From 2ca35960d2728573c7cf9f8f077dd9bce99bccea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ben=20B=C3=B6ckmann?= <75972296+bencodes07@users.noreply.github.com> Date: Wed, 25 Sep 2024 10:16:46 +0200 Subject: [PATCH] feat: added store for appointments; minor bug fixes --- src/app/dashboard/bookings/page.tsx | 45 ++---------- src/app/dashboard/layout.tsx | 2 +- src/app/dashboard/page.tsx | 73 ++++++------------- .../dashboard/AppointmentDisplay.tsx | 8 +- .../dashboard/scheduler/OverviewScheduler.tsx | 13 ++-- src/store/features/collectionSlice.ts | 63 ++++++++++++++++ src/store/store.ts | 4 +- 7 files changed, 108 insertions(+), 100 deletions(-) create mode 100644 src/store/features/collectionSlice.ts diff --git a/src/app/dashboard/bookings/page.tsx b/src/app/dashboard/bookings/page.tsx index bca9d4c..e12bf11 100644 --- a/src/app/dashboard/bookings/page.tsx +++ b/src/app/dashboard/bookings/page.tsx @@ -41,45 +41,14 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@ import { Calendar } from "@/components/ui/calendar"; import { useDashboardData } from "@/components/dashboard/DashboardContext"; import { type Appointment, type Company } from "@/types"; +import { useSelector } from "react-redux"; +import { type RootState } from "@/store/store"; function Bookings() { const { user } = useDashboardData(); const [searchQuery, setSearchQuery] = useState(""); - const [appointments, setAppointments] = useState([ - { - id: 1, - from: new Date(2024, 8, 3, 18, 30), - to: new Date(2024, 8, 3, 19, 30), - title: "Scrum Meeting", - description: "Weekly team sync", - companyId: "1", - location: "Office", - client: null, - status: "PENDING" - }, - { - id: 2, - from: new Date(2024, 8, 5, 17, 30), - to: new Date(2024, 8, 5, 18, 30), - title: "Client Presentation", - description: "Presenting project progress", - companyId: "2", - location: "Conference Room", - client: null, - status: "BOOKED" - }, - { - id: 3, - from: new Date(2024, 8, 6, 21, 30), - to: new Date(2024, 8, 6, 22, 30), - title: "Client Presentation", - description: "Presenting project progress", - companyId: "2", - location: "Conference Room", - client: null, - status: "BOOKED" - } - ]); + const appointments = useSelector((state: RootState) => state.collection.appointments); + const [companies, setCompanies] = useState([ { id: "1", @@ -99,11 +68,9 @@ function Bookings() { } } } - // Add more companies as needed ]); useEffect(() => { - if (false) setAppointments([]); if (false) setCompanies([]); }, []); @@ -186,8 +153,8 @@ function Bookings() { } // Find the earliest start time and latest end time - const earliestTime = Math.min(...calcAppointments.map((a) => a.from.getHours())); - const latestTime = Math.max(...calcAppointments.map((a) => a.to.getHours())); + const earliestTime = Math.min(...calcAppointments.map((a) => new Date(a.from).getHours())); + const latestTime = Math.max(...calcAppointments.map((a) => new Date(a.to).getHours())); let startHour: number; let endHour: number; diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx index e0f09cd..dd5b240 100644 --- a/src/app/dashboard/layout.tsx +++ b/src/app/dashboard/layout.tsx @@ -66,7 +66,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
-
+
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 9cd5514..5bdb258 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -1,6 +1,5 @@ "use client"; import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import React, { useEffect, useState } from "react"; import { deleteToken, getAccessToken, getUser } from "@/lib/authActions"; @@ -19,6 +18,8 @@ import { useRouter } from "next/navigation"; import Link from "next/link"; import OverviewScheduler from "@/components/dashboard/scheduler/OverviewScheduler"; import AppointmentDisplay from "@/components/dashboard/AppointmentDisplay"; +import { useSelector } from "react-redux"; +import type { RootState } from "@/store/store"; function Dashboard() { const [user, setUser] = useState(); @@ -26,45 +27,7 @@ function Dashboard() { const router = useRouter(); - const [appointments, setAppointments] = useState([ - { - id: 1, - from: new Date(2024, 8, 23, 18, 30), - to: new Date(2024, 8, 23, 19, 30), - title: "Scrum Meeting", - description: "Weekly team sync", - companyId: "1", - location: "Office", - client: null, - status: "PENDING" - }, - { - id: 2, - from: new Date(2024, 8, 25, 17, 30), - to: new Date(2024, 8, 25, 18, 30), - title: "Client Presentation", - description: "Presenting project progress", - companyId: "2", - location: "Conference Room", - client: null, - status: "BOOKED" - }, - { - id: 3, - from: new Date(2024, 8, 25, 21, 30), - to: new Date(2024, 8, 25, 22, 30), - title: "Client Presentation", - description: "Presenting project progress", - companyId: "2", - location: "Conference Room", - client: null, - status: "BOOKED" - } - ]); - - useEffect(() => { - if (false) setAppointments([]); - }, []); + const appointments = useSelector((state: RootState) => state.collection.appointments); useEffect(() => { const fetchUser = async () => { @@ -112,7 +75,6 @@ function Dashboard() {

Welcome back, {user?.name}

- +

+ )}
-
+

Timeline

diff --git a/src/components/dashboard/AppointmentDisplay.tsx b/src/components/dashboard/AppointmentDisplay.tsx index 8777f62..1d9dd4f 100644 --- a/src/components/dashboard/AppointmentDisplay.tsx +++ b/src/components/dashboard/AppointmentDisplay.tsx @@ -14,16 +14,18 @@ export default function AppointmentDisplay(props: {

- {props.data.from.toLocaleString("en-US", { weekday: "short" })} + {new Date(props.data.from).toLocaleString("en-US", { weekday: "short" })} +

+

+ {new Date(props.data.from).getDate()}

-

{props.data.from.getDate()}

{props.data.title}

{"GitHub Company"}

{/* Get Company by ID here */}
- {props.data.from.getHours()}:{props.data.from.getMinutes()} + {new Date(props.data.from).getHours()}:{new Date(props.data.from).getMinutes()}
diff --git a/src/components/dashboard/scheduler/OverviewScheduler.tsx b/src/components/dashboard/scheduler/OverviewScheduler.tsx index 9c3814a..1afde3e 100644 --- a/src/components/dashboard/scheduler/OverviewScheduler.tsx +++ b/src/components/dashboard/scheduler/OverviewScheduler.tsx @@ -4,6 +4,7 @@ import "./scheduler.scss"; import "./overviewscheduler.scss"; import { registerLicense } from "@syncfusion/ej2-base"; import { type Appointment } from "@/types"; +import { useRouter } from "next/navigation"; type SchedulerProps = { data: Appointment[]; @@ -23,11 +24,12 @@ function OverviewScheduler(props: SchedulerProps) { const eventSettings = { dataSource: props.data, fields: fieldsData }; const predefinedColors = ["#6EE7B7", "#F87171", "#FACC15"]; + const router = useRouter(); registerLicense(process.env.NEXT_PUBLIC_SYNCFUSION_LICENSE!); const onEventClick = (args: { cancel: boolean }) => { - console.log("Event clicked", args); + router.push("/dashboard/bookings"); args.cancel = true; }; @@ -44,8 +46,8 @@ function OverviewScheduler(props: SchedulerProps) { } // Find the earliest start time and latest end time - const earliestTime = Math.min(...calcAppointments.map((a) => a.from.getHours())); - const latestTime = Math.max(...calcAppointments.map((a) => a.to.getHours())); + const earliestTime = Math.min(...calcAppointments.map((a) => new Date(a.from).getHours())); + const latestTime = Math.max(...calcAppointments.map((a) => new Date(a.to).getHours())); let startHour: number; let endHour: number; @@ -99,6 +101,7 @@ function OverviewScheduler(props: SchedulerProps) { height={"500px"} eventSettings={eventSettings} showHeaderBar={false} + showTimeIndicator={false} eventRendered={onEventRendered} key={props.selectedAppointmentId} readonly={true} @@ -111,9 +114,9 @@ function OverviewScheduler(props: SchedulerProps) { eventTemplate={(eventProps: Record) => { return (
); }} diff --git a/src/store/features/collectionSlice.ts b/src/store/features/collectionSlice.ts new file mode 100644 index 0000000..ae68b2b --- /dev/null +++ b/src/store/features/collectionSlice.ts @@ -0,0 +1,63 @@ +import { type Appointment, type Company } from "@/types"; +import { createSlice, type PayloadAction } from "@reduxjs/toolkit"; + +type CollectionState = { + appointments: Appointment[]; + companies: Company[]; +}; + +const initialState: CollectionState = { + appointments: [ + { + id: 1, + from: new Date(2024, 8, 23, 18, 30), + to: new Date(2024, 8, 23, 19, 30), + title: "Scrum Meeting", + description: "Weekly team sync", + companyId: "1", + location: "Office", + client: null, + status: "PENDING" + }, + { + id: 2, + from: new Date(2024, 8, 25, 17, 30), + to: new Date(2024, 8, 25, 18, 30), + title: "Client Presentation", + description: "Presenting project progress", + companyId: "2", + location: "Conference Room", + client: null, + status: "BOOKED" + }, + { + id: 3, + from: new Date(2024, 8, 25, 21, 30), + to: new Date(2024, 8, 25, 22, 30), + title: "Client Presentation", + description: "Presenting project progress", + companyId: "2", + location: "Conference Room", + client: null, + status: "BOOKED" + } + ], + companies: [] +}; + +export const collectionSlice = createSlice({ + name: "appointments", + initialState, + reducers: { + setAppointments(state, action: PayloadAction) { + state.appointments = action.payload; + }, + setCompanies(state, action: PayloadAction) { + state.companies = action.payload; + } + } +}); + +export const { setAppointments, setCompanies } = collectionSlice.actions; + +export default collectionSlice.reducer; diff --git a/src/store/store.ts b/src/store/store.ts index 51be905..7c5832f 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -3,10 +3,12 @@ import { persistReducer, persistStore } from "redux-persist"; import storage from "redux-persist/lib/storage"; import authReducer from "./features/authSlice"; import cookieReducer from "./features/cookieSlice"; +import collectionReducer from "./features/collectionSlice"; const rootReducer = combineReducers({ auth: authReducer, - cookie: cookieReducer + cookie: cookieReducer, + collection: collectionReducer }); const persistConfig = {