-
Notifications
You must be signed in to change notification settings - Fork 1
/
App.js
114 lines (98 loc) · 3.32 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import React, { useState, useEffect } from 'react';
// import logo from './logo.svg';
import './App.css';
import Login from './Components/Login';
import Navigation from './Components/Navigation';
// import { useNavigate, useDispatch } from "react-router-dom";
import Profile from './Components/Profile';
import Status from './Components/Status';
import {useSelector} from 'react-redux'; // import useSelector from react-redux
import { Route, Navigate, Routes, useNavigate } from 'react-router-dom'; // import Route and Navigate from react-router-dom
import Scheduling from './Components/Scheduling';
function App() {
const user = useSelector(state => state.session.user);
console.log("LOGIN USER", user?.user?.id);
console.log("LOGIN", user);
// const [isLoaded, setIsLoaded] = useState(false);
// useEffect(() => {
// dispatch(authenticate()).then(() => setIsLoaded(true));
// }, [dispatch]);
const props = {
name: "John Doe",
email: "johndoe@example.com",
location: "New York, USA",
department: "Engineering",
groupSize: 2,
// profilePicture: "./profile.png",
timeSlot: "10:00",
interests: ["Coding", "Traveling", "Reading"],
isScheduled: true
};
const [groupSize, setGroupSize] = useState(props.groupSize);
const [timeSlot, setTimeSlot] = useState(props.timeSlot);
const handleGroupSizeChange = (size) => {
setGroupSize(size);
}
const handleTimeSlotChange = (slot) => {
setTimeSlot(slot);
}
const RedirectToHome = () => {
const navigate = useNavigate();
useEffect(() => {
navigate('/home');
}, [navigate]);
return null; // This component does not render anything to the DOM
}
const Wrapper = () => {
return (
<div>
<Scheduling
groupSize={groupSize}
timeSlot={timeSlot}
onGroupSizeChange={handleGroupSizeChange} // Changed from props.onGroupSizeChange
onTimeSlotChange={handleTimeSlotChange}
/>
<Status isScheduled={props.isScheduled} />
<Status isScheduled={!props.isScheduled} />
</div>
);
}
console.log(user);
return (
<>
<Navigation /*isLoaded={isLoaded}*/ />
<Routes>
{user ? (
//routes that will be available ONLY when user is logged in
//add additional routes here
<>
<Route path="/" element={<RedirectToHome />} />
<Route element={<Wrapper />} path="/home" />
<Route element={
<Profile
name={props.name}
email={props.email}
location={props.location}
department={props.department}
groupSize={groupSize}
timeSlot={timeSlot}
interests={props.interests}
onGroupSizeChange={handleGroupSizeChange} // Changed from props.onGroupSizeChange
onTimeSlotChange={handleTimeSlotChange} // Changed from props.onTimeSlotChange
/>
} path="/profile" />
</>
) : (
// <Route element={<Profile />} path="/home" />
//will redirect to '/' from any url if no user is logged in
//do not add additional routes here
<>
<Route path="*" element={<Navigate to="/login" replace />} />
<Route element={<Login />} path="/login" />
</>
)}
</Routes>
</>
);
}
export default App;