From a4493b70e062393e8adbfd142168c64a6e4d3cf5 Mon Sep 17 00:00:00 2001 From: Vivian Li Date: Sat, 16 Sep 2023 17:29:12 -0400 Subject: [PATCH] predictions display --- frontend/src/components/header.jsx | 8 ++- frontend/src/features/auth/authSlice.js | 4 +- frontend/src/features/goals/goalsService.js | 14 +++++ frontend/src/features/goals/goalsSlice.js | 36 ++++++++++- frontend/src/features/habits/habitsService.js | 14 +++++ frontend/src/features/habits/habitsSlice.js | 34 ++++++++++- frontend/src/pages/Goals.jsx | 14 +++-- frontend/src/pages/Habits.jsx | 4 +- frontend/src/pages/Landing.jsx | 59 ++++++++++++++++++- frontend/src/pages/Login.jsx | 4 +- 10 files changed, 171 insertions(+), 20 deletions(-) diff --git a/frontend/src/components/header.jsx b/frontend/src/components/header.jsx index 1376082..cea22c4 100644 --- a/frontend/src/components/header.jsx +++ b/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('/') } diff --git a/frontend/src/features/auth/authSlice.js b/frontend/src/features/auth/authSlice.js index d832545..548febe 100644 --- a/frontend/src/features/auth/authSlice.js +++ b/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 \ No newline at end of file diff --git a/frontend/src/features/goals/goalsService.js b/frontend/src/features/goals/goalsService.js index 91c52e0..ec2e07f 100644 --- a/frontend/src/features/goals/goalsService.js +++ b/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 \ No newline at end of file diff --git a/frontend/src/features/goals/goalsSlice.js b/frontend/src/features/goals/goalsSlice.js index ae2c758..84d121c 100644 --- a/frontend/src/features/goals/goalsSlice.js +++ b/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 \ No newline at end of file diff --git a/frontend/src/features/habits/habitsService.js b/frontend/src/features/habits/habitsService.js index ef4be99..6c66b2b 100644 --- a/frontend/src/features/habits/habitsService.js +++ b/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 \ No newline at end of file diff --git a/frontend/src/features/habits/habitsSlice.js b/frontend/src/features/habits/habitsSlice.js index 8184724..288a91e 100644 --- a/frontend/src/features/habits/habitsSlice.js +++ b/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 \ No newline at end of file diff --git a/frontend/src/pages/Goals.jsx b/frontend/src/pages/Goals.jsx index 40dcd54..048ca47 100644 --- a/frontend/src/pages/Goals.jsx +++ b/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 (<> diff --git a/frontend/src/pages/Habits.jsx b/frontend/src/pages/Habits.jsx index 3f4c5c8..05f1c04 100644 --- a/frontend/src/pages/Habits.jsx +++ b/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 diff --git a/frontend/src/pages/Landing.jsx b/frontend/src/pages/Landing.jsx index bce751c..afd8a38 100644 --- a/frontend/src/pages/Landing.jsx +++ b/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 (<> -

Welcome {user && user.name} to CarAIbou

+

Welcome {name} to CarAIbou

+
+

By 2028, if we do not take actions, the Green House Gas emissinos in Canada would be {ghg_before} million metric tons

+
+ {user ? (
{habits ? (<> + +
+

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

+
+ ) : (
+

You have not tell us your transport habits and goals

+ +
)}
) : (

Please login or register first

)} + diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx index 0555a40..413d266 100644 --- a/frontend/src/pages/Login.jsx +++ b/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('/') }