basic styling

frontend/src/components/Spinner.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function Spinner() {
+    return (
+        <div className='loadingSpinnerContainer'>
+            <div className='loadingSpinner'></div>
+        </div>
+    )
+}
+
+export default Spinner

frontend/src/features/auth/authService.js

@@ -8,7 +8,7 @@ const register = async (userData) => {
     const response = await axios.post(API_URL, userData)
 
     if(response.data) {
-        localStorage.setItem('user', JSON.stringify(response.data))
+        localStorage.setItem('user', response.data)
     }
 
     return response.data

frontend/src/features/goals/goalsSlice.js

@@ -16,7 +16,7 @@ export const submitGoals = createAsyncThunk ('goals/submit', async (goalsData, t
     try {
 
         const user = thunkAPI.getState().auth.user
-        const token = JSON.parse(user).token
+        const token = user.token
         //console.log(goalsData)
 
         return await goalsService.submitGoals(goalsData, token)
@@ -32,8 +32,8 @@ export const getGoals = createAsyncThunk ('goals/get', async (_,thunkAPI) => {
     try {
 
         const user = thunkAPI.getState().auth.user
-        const token = JSON.parse(user).token
-        //console.log(token)
+        const token = user.token
+        console.log(token)
 
         return await goalsService.getGoals(token)
     } catch(error) {

frontend/src/features/habits/habitsSlice.js

@@ -13,11 +13,11 @@ const initialState = {
 
 // submit habits
 export const submitHabits = createAsyncThunk ('habits/submit', async (habitsData, thunkAPI) => {
-
+    console.log(habitsData)
     try {
 
         const user = thunkAPI.getState().auth.user
-        const token = JSON.parse(user).token
+        const token = user.token
 
         console.log(habitsData)
 
@@ -33,7 +33,7 @@ export const getHabits = createAsyncThunk ('habits/get', async (_, thunkAPI) =>
 
     try {
         const user = thunkAPI.getState().auth.user
-        const token = JSON.parse(user).token
+        const token = user.token
         //console.log(token)
 
         return await habitsService.getHabits(token)

frontend/src/index.css

@@ -0,0 +1,129 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #EFF2E5;
+    font-family: 'Inter', sans-serif;
+    color: #5F6739;
+}
+
+p {
+    line-height: 1.7;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #DEE7C2;
+    padding: 20px;
+    margin-bottom: 30px;
+}
+
+.header ul {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header ul li {
+    margin-left: 20px;
+    list-style-type: none;
+}
+
+.header ul li a {
+    display: flex;
+    align-items: center;
+}
+
+.content {
+    padding: 40px;
+}
+
+.heading {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 50px;
+}
+
+.projection {
+    padding: 40px;
+    margin: 50px;
+    height: 400px;
+    width: 400px;
+    background-image: url('../public/co2_img.jpg');
+    background-position: center center;
+    background-size: cover;
+}
+
+.projection p, .projection h1 {
+    color: white;
+}
+
+.form-group {
+    margin-bottom: 10px;
+}
+
+.form-group input,
+.form-group textarea,
+.form-group select {
+  padding: 10px;
+  border: 1px solid #e6e6e6;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  font-family: inherit;
+}
+
+button {
+    padding: 10px 20px;
+    border: 1px solid #5F6739;
+    border-radius: 5px;
+    background: #5F6739;
+    color: #fff;
+    font-size: 16px;
+    font-weight: 700;
+    cursor: pointer;
+    text-align: center;
+    appearance: button;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+button:hover {
+    transform: scale(0.98);
+}
+
+.loadingSpinnerContainer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 5000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .loadingSpinner {
+    width: 64px;
+    height: 64px;
+    border: 8px solid;
+    border-color: #000 transparent #555 transparent;
+    border-radius: 50%;
+    animation: spin 1.2s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }

frontend/src/pages/Goals.jsx

@@ -2,6 +2,7 @@ import {useState, useEffect} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 import {submitGoals, getGoals} from '../features/goals/goalsSlice'
 import {useNavigate} from 'react-router-dom'
+import Spinner from '../components/Spinner'
 //import sendData from '../features/ml/ml'
 
 function Goals() {
@@ -45,20 +46,26 @@ function Goals() {
         //console.log()
     }
 
-    const {goals, isSuccess,} = useSelector((state) => (state.goals))
-    const {habits} = useSelector((state) => (state.habits))
+    const {goals, isSuccess, isLoading} = useSelector((state) => (state.goals))
+
     const navigate = useNavigate()
     useEffect(() => {
         if (isSuccess) {
             navigate('/')
             //SendData(habits, goals)
         }
-    }, [isSuccess, goals, habits, navigate])
+    }, [isSuccess, goals, navigate])
+
+    if (isLoading) {
+        <Spinner />
+    }
 
 
-    return (<>
+    return (<div className='content'>
         <h1>Hi {name},</h1>
         <h2>Please tell us how you want to change your habits</h2>
+        <p>Please type in your number of days going to work by car, carpooling, public transport and walking</p>
+
 
         <section className="form">
             <form onSubmit={onSubmit}>
@@ -117,7 +124,7 @@ function Goals() {
                 </div>
             </form>
         </section>
-    </>
+    </div>
 
     )
 }

frontend/src/pages/Habits.jsx

@@ -2,6 +2,7 @@ import {useSelector, useDispatch} from 'react-redux'
 import {useState, useEffect} from 'react'
 import { useNavigate } from "react-router-dom";
 import {submitHabits, resetHabits} from '../features/habits/habitsSlice'
+import Spinner from '../components/Spinner'
 
 function Habits() {
 
@@ -48,7 +49,7 @@ function Habits() {
             walk: walk_day
         }
 
-        //console.log(habitsData)
+        console.log(habitsData)
         dispatch(submitHabits(habitsData))
 
     }
@@ -60,9 +61,14 @@ function Habits() {
         }
     }, [isSuccess, navigate])
 
-    return (<>
+    if (isLoading) {
+        <Spinner />
+    }
+
+    return (<div className='content'>
         <h1>Hi {name},</h1>
         <h2>Please tell us your transport habits</h2>
+        <p>Please type in your number of days going to work by car, carpooling, public transport and walking</p>
 
         <section className="form">
             <form onSubmit={onSubmit}>
@@ -123,7 +129,7 @@ function Habits() {
         </section>
 
 
-    </>
+    </div>
 
     )
 }

frontend/src/pages/Landing.jsx

@@ -47,24 +47,28 @@ function Landing() {
 
     }
 
-    return (<>
+    return (<div className="content">
 
-        <h1>Welcome {name} to CarAIbou</h1>
-        <div>
-                <p>By 2028, if we do not take actions, the Green House Gas emissinos in Canada would be {ghg_before} million metric tons</p>
-            </div>
+        <h1 className='heading'>Welcome {name} to CarAIbou</h1>
+        <div className='projection'>
+            <p>By 2028, if we do not take actions, the Green House Gas emissinos in Canada would be</p>
+            <h1>{ghg_before}</h1>  
+            <p>million metric tons</p>
+        </div>
         {user ? (<div>{habits ? (<>
 
-            <div>
-                <p>By 2028, if everyone takes the same actions as you do, the Green House Gas emissinos in Canada would be {ghg_after} million metric tons</p>
+            <div className='projection'>
+                <p>By 2028, if everyone takes the same actions as you do, the Green House Gas emissinos in Canada would be</p>
+                <h1>{ghg_after}</h1>
+                <p>million metric tons</p>
             </div>
         </>) : (<div>
-                <h3>You have not tell us your transport habits and goals</h3>
+                <p>You have not tell us your transport habits and goals</p>
                 <button onClick={() => (navigate('/habits'))}>Set transport habits and goals</button>
-            </div>)}</div>) : (<h3>Please login or register first</h3>)}
+            </div>)}</div>) : (<p>Please login or register first</p>)}
 
 
-    </>
+    </div>
 
     )
 }

frontend/src/pages/Login.jsx

@@ -4,6 +4,7 @@ import {useSelector, useDispatch} from 'react-redux'
 import { toast } from 'react-toastify'
 import { useNavigate } from "react-router-dom";
 import {login, resetAuth} from '../features/auth/authSlice'
+import Spinner from '../components/Spinner'
 
 function Login() {
 
@@ -58,8 +59,11 @@ function Login() {
         }
     }, [isSuccess, isRejected, message, navigate, dispatch])
 
+    if (isLoading) {
+        <Spinner />
+    }
 
-    return (<>
+    return (<div className='content'>
         <section className='heading'>
             <h1>
                 <FaSignInAlt /> Login
@@ -100,7 +104,7 @@ function Login() {
                 </div>
             </form>
         </section>
-    </>)
+    </div>)
 }
 
 export default Login

frontend/src/pages/Register.jsx

@@ -4,6 +4,7 @@ import {useSelector, useDispatch} from 'react-redux'
 import { toast } from 'react-toastify'
 import { useNavigate } from "react-router-dom";
 import {register, reset} from '../features/auth/authSlice'
+import Spinner from '../components/Spinner'
 
 
 function Register() {
@@ -65,10 +66,14 @@ function Register() {
 
         }
     }, [isSuccess, isRejected, message, navigate, dispatch])
+
+    if (isLoading) {
+        <Spinner />
+    }
 
 
 
-    return (<>
+    return (<div className='content'>
         <section className='heading'>
             <h1>
                 <FaUser /> Register
@@ -142,7 +147,7 @@ function Register() {
                 </div>
             </form>
         </section>
-    </>)
+    </div>)
 }
 
 export default Register