done with appointments page

examples/calendar/backend/services/time/controller.ts

@@ -34,17 +34,17 @@ export const create = async (req: Request, res: Response, next: NextFunction) =>
 
 // Get all available times for a person
 export const get = async (req: Request, res: Response, next: NextFunction) => {
-	if ((req as any).user.payload.id !== +req.params.userId) {
-		return res.status(401).send({ error: "You can can only access yourself" });
-	}
+
 	try {
+		const userId = (req as any).user.payload.id;
 		const times = await Time.findAll({
 			where: {
-				userId: {
-					[Op.eq]: req.params.userId
+				user: {
+					[Op.eq]: userId
 				}
 			}
 		});
+		console.log("Times", times);
 		return res.status(200).send(times);
 	} catch (error) {
 		console.log(error);

examples/calendar/frontend/src/Profile/Profile.tsx

@@ -15,8 +15,15 @@ interface Props {
 }
 
 interface Time {
-	startTime: number;
+	startTime: Date;
 	checked: boolean;
+	disabled: boolean;
+}
+interface SetBooking {
+	timeStarts: number[];
+	timeEnds: number[];
+	status: string;
+	userId: number;
 }
 interface State {
 	loading: boolean;
@@ -36,30 +43,81 @@ interface JwtDecoded {
 }
 
 export const Profile = ({ auth, onLoggedOut }: Props): JSX.Element => {
-
-	const [state, setState] = useState<State>({
+	const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+
+	const getTimeAvailAPI = async (userId: string) => {
+		const fetchAvailTimes = (await axios.get(`${process.env.REACT_APP_BACKEND_URL}/time/${userId}`, {
+			headers: {
+				Authorization: `Bearer ${accessToken}`
+			}
+		})).data;
+		console.log("fetch", fetchAvailTimes);
+		return fetchAvailTimes;
+	}
+	const setTimeAvailAPI = async (availableTimes:SetBooking ) => {
+		const setAvailTimes = (await axios.post(`${process.env.REACT_APP_BACKEND_URL}/time`, {
+			headers: {
+				Authorization: `Bearer ${accessToken}`
+			}, json: availableTimes
+		})).data;
+		return setAvailTimes;
+	}
+	const timesInitial = () => {
+		const timeReturn = [];
+		var someDate = new Date(selectedDate);
+		someDate.setHours(8, 0, 0);
+		for (var i = 0; i < 60; i++)
+		{
+			const newTime = someDate.getTime() + i * 15 * 60 * 1000;
+			timeReturn.push({ startTime: new Date(newTime), checked: false, disabled: false });	
+		}
+		return timeReturn;
+	}
+	const setTimesFalse = () => {
+		const timeReturn = [];
+		var someDate = new Date(selectedDate);
+		someDate.setHours(8, 0, 0);
+		for (var i = 0; i < 60; i++)
+		{
+			const newTime = someDate.getTime() + i * 15 * 60 * 1000;
+			timeReturn.push({ startTime: new Date(newTime), checked: false, disabled: false });	
+		}
+		return timeReturn;
+	}
+
+	const [times, setTimes] = useState<Time[]>(timesInitial())
+	const [userV, setUser] = useState<State>({
 		loading: false,
 		user: undefined,
-		username: "",
-		times: [{startTime: 1888, checked: false}],
+		username: ""
 	});
+	const [checkedTimes, setCheckedTimes] = useState<String[]>([]);
+	useEffect(() => { 
+		setTimes(timesInitial());
+	}, [selectedDate]);
 
 	useEffect(() => {
 		const { accessToken } = auth;
 		const {
 			payload: { id }
 		} = jwtDecode<JwtDecoded>(accessToken);
-
 		async function fetchUserAPI() {
 			const user = (await axios.get<User>(`${process.env.REACT_APP_BACKEND_URL}/users/user`, {
 				headers: {
 					Authorization: `Bearer ${accessToken}`
 				}
 			})).data;
-			setState({...state, user});
+			setUser({ ...userV, user });
+			const booked = await getTimeAvailAPI(id);
+			booked.forEach((booking: any) => {
+				let item = { startTime: booking.startTime, checked: false, disabled: false };
+				const tempTimes = times;
+				var foundIndex = tempTimes.findIndex(x => x === item);
+				tempTimes[foundIndex] = { startTime: booking.startTime, checked: false, disabled: true };
+				setTimes(tempTimes);
+			});
 		};
 		fetchUserAPI();
-
 	}, []);
 
 	const { accessToken } = auth;
@@ -68,26 +126,44 @@ export const Profile = ({ auth, onLoggedOut }: Props): JSX.Element => {
 		payload: { publicAddress }
 	} = jwtDecode<JwtDecoded>(accessToken);
 
-	const { loading, user, times } = state;
+	const { loading, user } = userV;
 
 	const username = user && user.username;
 
 	return (
 		<div className="Profile">
 			<p>
-			Logged in as {publicAddress}  
+				Logged in as {publicAddress}  
+
 			</p> 				
-
 			<h1>Set your availability</h1>
+
 			<div style={{display: "grid", gridTemplateColumns: "3fr 9fr"}}>
-			<Calendar />
+				<Calendar value={selectedDate} onChange={setSelectedDate} />
+
 				<div style={{ "textAlign": "left" }}>
-					{times?.map((time: Time) => {
+					<>
+					{times?.map((time: Time, index:number) => {
 						return (
-						<ToggleButton className="mb-2" id="toggle-check" type="checkbox" variant="outline-primary" value="1">
-       					{time.startTime}
+							<ToggleButton key={index} className="mb-2" disabled={time.disabled} id={`toggle-check-${index}`} type="checkbox"
+								variant="outline-primary" checked={checkedTimes[index] === time.startTime.getTime().toString()} value={index} onChange={
+									(e) => {
+										console.log("Checked times", checkedTimes[index]);
+										const tempTimes = [...checkedTimes];
+										//alert(e.target.value);
+										//const findIndex = tempTimes.findIndex(x => x.startTime.getTime().toString() == e.target.value);
+										//alert(findIndex);
+										tempTimes[index] = time.startTime.getTime().toString();
+										console.log("temptimes", tempTimes);
+										//alert(e.target.checked);
+										//e.target.checked = false;
+										setCheckedTimes(tempTimes);
+									}
+								}>
+       					{time.startTime.getHours()}:{time.startTime.getMinutes()}
       					</ToggleButton>)
 					})}
+						</>
 			</div>
 			</div>
 			<button onClick={onLoggedOut}>Logout</button>