predictions display

frontend/src/components/header.jsx

@@ -1,7 +1,9 @@
 import {FaSignInAlt, FaSignOutAlt, FaUser} from 'react-icons/fa'
 import {Link, useNavigate} from 'react-router-dom'
 import {useSelector, useDispatch} from 'react-redux'
-import {logout, reset} from '../features/auth/authSlice'
+import {logout, resetAuth} from '../features/auth/authSlice'
+import {resetGoals} from '../features/goals/goalsSlice'
+import { resetHabits} from '../features/habits/habitsSlice'
 
 function Header() {
 
@@ -11,7 +13,9 @@ function Header() {
 
     const onLogout = () => {
         dispatch(logout())
-        dispatch(reset())
+        dispatch(resetAuth())
+        dispatch(resetGoals())
+        dispatch(resetHabits())
         navigate('/')
     }
 

frontend/src/features/auth/authSlice.js

@@ -42,7 +42,7 @@ export const authSlice = createSlice({
     name: 'auth',
     initialState,
     reducers: {
-        reset: (state) => {
+        resetAuth: (state) => {
             state.user = null
             state.isLoading = false
             state.isSuccess = false
@@ -85,5 +85,5 @@ export const authSlice = createSlice({
     }
 })
 
-export const { reset } = authSlice.actions
+export const { resetAuth } = authSlice.actions
 export default authSlice.reducer

frontend/src/features/goals/goalsService.js

@@ -16,8 +16,22 @@ const submitGoals = async (goalsData, token) => {
     return response.data
 }
 
+// get goals
+const getGoals = async (token) => {
+    //const tokenData = JSON.parse(token)
+    //console.log(`Bearer ${token}`)
+    //console.log(goalsData)
+    const config = {
+        headers: {Authorization: `Bearer ${token}`}
+    }
+    const response = await axios.get(API_URL, config)
+
+    return response.data[-1]
+}
+
 const goalsService = {
     submitGoals,
+    getGoals,
 }
 
 export default goalsService

frontend/src/features/goals/goalsSlice.js

@@ -26,13 +26,29 @@ export const submitGoals = createAsyncThunk ('goals/submit', async (goalsData, t
     }
 })
 
+// get goals
+export const getGoals = createAsyncThunk ('goals/get', async (_,thunkAPI) => {
+
+    try {
+
+        const user = thunkAPI.getState().auth.user
+        const token = JSON.parse(user).token
+        //console.log(token)
+
+        return await goalsService.getGoals(token)
+    } catch(error) {
+        const err_message = (error.response && error.response.data && error.response.data.message) || error.message || error.toString()
+        return thunkAPI.rejectWithValue(err_message)
+    }
+})
+
 
 export const goalsSlice = createSlice({
     name: 'goals',
     initialState,
     reducers: {
-        reset: (state) => {
-            state.gaols = null
+        resetGoals: (state) => {
+            state.goals = null
             state.isLoading = false
             state.isSuccess = false
             state.isRejected = false
@@ -54,8 +70,22 @@ export const goalsSlice = createSlice({
             state.message = action.payload
             state.goals = null
         })
+        builder.addCase(getGoals.pending, (state) => {
+            state.isLoading = true
+        })
+        builder.addCase(getGoals.fulfilled, (state, action) => {
+            state.isLoading = false
+            state.isSuccess = true
+            state.goals = action.payload
+        })
+        builder.addCase(getGoals.rejected, (state, action) => {
+            state.isLoading = false
+            state.isRejected = true
+            state.message = action.payload
+            state.goals = null
+        })
     }
 })
 
-export const { reset } = goalsSlice.actions
+export const { resetGoals } = goalsSlice.actions
 export default goalsSlice.reducer

frontend/src/features/habits/habitsService.js

@@ -16,8 +16,22 @@ const submitHabits = async (habitsData, token) => {
     return response.data
 }
 
+// get habits
+const getHabits = async (token) => {
+    //const tokenData = JSON.parse(token)
+    //console.log(`Bearer ${token}`)
+    //console.log(habitsData)
+    const config = {
+        headers: {Authorization: `Bearer ${token}`}
+    }
+    const response = await axios.get(API_URL, config)
+
+    return response.data[-1]
+}
+
 const habitsService = {
     submitHabits,
+    getHabits,
 }
 
 export default habitsService

frontend/src/features/habits/habitsSlice.js

@@ -18,6 +18,7 @@ export const submitHabits = createAsyncThunk ('habits/submit', async (habitsData
 
         const user = thunkAPI.getState().auth.user
         const token = JSON.parse(user).token
+
         console.log(habitsData)
 
         return await habitsService.submitHabits(habitsData, token)
@@ -27,12 +28,27 @@ export const submitHabits = createAsyncThunk ('habits/submit', async (habitsData
     }
 })
 
+// get habits
+export const getHabits = createAsyncThunk ('habits/get', async (_, thunkAPI) => {
+
+    try {
+        const user = thunkAPI.getState().auth.user
+        const token = JSON.parse(user).token
+        //console.log(token)
+
+        return await habitsService.getHabits(token)
+    } catch(error) {
+        const err_message = (error.response && error.response.data && error.response.data.message) || error.message || error.toString()
+        return thunkAPI.rejectWithValue(err_message)
+    }
+})
+
 
 export const habitsSlice = createSlice({
     name: 'habits',
     initialState,
     reducers: {
-        reset: (state) => {
+        resetHabits: (state) => {
             state.habits = null
             state.isLoading = false
             state.isSuccess = false
@@ -55,8 +71,22 @@ export const habitsSlice = createSlice({
             state.message = action.payload
             state.habits = null
         })
+        builder.addCase(getHabits.pending, (state) => {
+            state.isLoading = true
+        })
+        builder.addCase(getHabits.fulfilled, (state, action) => {
+            state.isLoading = false
+            state.isSuccess = true
+            state.habits = action.payload
+        })
+        builder.addCase(getHabits.rejected, (state, action) => {
+            state.isLoading = false
+            state.isRejected = true
+            state.message = action.payload
+            state.habits = null
+        })
     }
 })
 
-export const { reset } = habitsSlice.actions
+export const { resetHabits } = habitsSlice.actions
 export default habitsSlice.reducer

frontend/src/pages/Goals.jsx

@@ -1,12 +1,13 @@
 import {useState, useEffect} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
-import {submitGoals} from '../features/goals/goalsSlice'
+import {submitGoals, getGoals} from '../features/goals/goalsSlice'
 import {useNavigate} from 'react-router-dom'
+//import sendData from '../features/ml/ml'
 
 function Goals() {
 
     const { user } = useSelector((state) => state.auth)
-    const name = JSON.parse(user)["name"]
+    const name = user.name
     //console.log(user.name)
 
     var [formData, setFormData] = useState({
@@ -39,15 +40,20 @@ function Goals() {
 
         //console.log(habitsData)
         dispatch(submitGoals(goalsData))
+
+        //dispatch(getGoals())
+        //console.log()
     }
 
-    const {goals, isLoading, isRejected, isSuccess, message} = useSelector((state) => (state.goals))
+    const {goals, isSuccess,} = useSelector((state) => (state.goals))
+    const {habits} = useSelector((state) => (state.habits))
     const navigate = useNavigate()
     useEffect(() => {
         if (isSuccess) {
             navigate('/')
+            //SendData(habits, goals)
         }
-    }, [isSuccess, navigate])
+    }, [isSuccess, goals, habits, navigate])
 
 
     return (<>

frontend/src/pages/Habits.jsx

@@ -1,12 +1,12 @@
 import {useSelector, useDispatch} from 'react-redux'
 import {useState, useEffect} from 'react'
 import { useNavigate } from "react-router-dom";
-import {submitHabits, reset} from '../features/habits/habitsSlice'
+import {submitHabits, resetHabits} from '../features/habits/habitsSlice'
 
 function Habits() {
 
     const { user } = useSelector((state) => state.auth)
-    const name = JSON.parse(user).name
+    const name = user.name
     //const token = JSON.parse(user).token
 
 

frontend/src/pages/Landing.jsx

@@ -1,15 +1,68 @@
-import {useSelector} from 'react-redux'
+import {useDispatch, useSelector} from 'react-redux'
+import {getGoals} from '../features/goals/goalsSlice'
+import {getHabits} from '../features/habits/habitsSlice'
+import { useNavigate } from "react-router-dom";
 
 
 function Landing() {
 
     const { user } = useSelector((state) => state.auth)
-    //const name = JSON.parse(user)["name"]
+    let name;
+
+    if (user) {
+        name = user.name
+    }
+
     //console.log(user.name)
+    const dispatch = useDispatch()
+    const navigate = useNavigate()
+
+    const ghg_before = 605.12
+    let ghg_after
+    /*
+    if (user) {
+        if (habits.length = 0) {
+        dispatch(getGoals())
+        dispatch(getHabits())
+    } else {
+        
+    }}
+    */
+    /*
+    dispatch(getGoals())
+    dispatch(getHabits())
+    */
+
+    const {habits} = useSelector((state) => state.habits)
+    const {goals} = useSelector((state) => state.goals)
+
+    if (habits) {
+        const ghg_car = 21.63
+
+        const car_habit = habits.car + habits.carpool
+        //console.log(goals[0].car_goal)
+        const car_goal = goals.car_goal + goals.carpool_goal
+        const ratio = 1 - car_goal/car_habit
+        ghg_after = ghg_before - ratio * ghg_car
+
+    }
 
     return (<>
 
-        <h1>Welcome {user && user.name} to CarAIbou</h1>
+        <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>
+        {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>
+        </>) : (<div>
+                <h3>You have not tell us your transport habits and goals</h3>
+                <button onClick={() => (navigate('/habits'))}>Set transport habits and goals</button>
+            </div>)}</div>) : (<h3>Please login or register first</h3>)}
+
 
     </>
 

frontend/src/pages/Login.jsx

@@ -3,7 +3,7 @@ import {FaSignInAlt} from 'react-icons/fa'
 import {useSelector, useDispatch} from 'react-redux'
 import { toast } from 'react-toastify'
 import { useNavigate } from "react-router-dom";
-import {login, reset} from '../features/auth/authSlice'
+import {login, resetAuth} from '../features/auth/authSlice'
 
 function Login() {
 
@@ -52,7 +52,7 @@ function Login() {
 
         if (isSuccess) {
 
-            //dispatch(reset())
+            //dispatch(resetAuth())
             navigate('/')
 
         }