diff --git a/client/src/components/activitypage/ActivityPage.jsx b/client/src/components/activitypage/ActivityPage.jsx index 398a9204..9d4a6e0a 100644 --- a/client/src/components/activitypage/ActivityPage.jsx +++ b/client/src/components/activitypage/ActivityPage.jsx @@ -1,21 +1,32 @@ import PageTitle from "../common/PageTitle"; -import ActivityCard from "../common/ActivityCard"; +import ActivityCard from "../common/activityCard"; import Button from "../common/Button"; import "./ActivityPage.scss"; +import { useGetAllActivitiesQuery } from "../../redux/slices/activitiesApiSlice"; const ActivityPage = () => { + const { data: activityList, isFetching: isFetchingActivity } = + useGetAllActivitiesQuery(); + + if (!isFetchingActivity) { + console.log("activities = ", activityList); + } return (
-
- - - - + {isFetchingActivity + ? "جاري التحميل..." + : activityList.body.map((act) => { + return ; + })}
); diff --git a/client/src/components/activitypage/ActivityPage.scss b/client/src/components/activitypage/ActivityPage.scss index af328796..2ce0350c 100644 --- a/client/src/components/activitypage/ActivityPage.scss +++ b/client/src/components/activitypage/ActivityPage.scss @@ -7,8 +7,10 @@ gap: 20px; .activity-section { - width: 90%; - height: 800px; + width: 95%; + max-width: 400px; + height: fit-content; + max-height: 800px; background: var(--grey-800); display: flex; diff --git a/client/src/components/addactivitypage/AddActivityPage.jsx b/client/src/components/addactivitypage/AddActivityPage.jsx index 88958cd8..87f0151f 100644 --- a/client/src/components/addactivitypage/AddActivityPage.jsx +++ b/client/src/components/addactivitypage/AddActivityPage.jsx @@ -4,12 +4,16 @@ import TextInput from "../common/Inputs"; import CustomSelect from "../common/CustomSelect"; import Button from "../common/Button"; import "../../assets/styles/components/MoneyPage.scss"; +import { useInsertActivityMutation } from "../../redux/slices/activitiesApiSlice"; +import { useGetAllWeeksQuery } from "../../redux/slices/termApiSlice"; +import { toast } from "react-toastify"; const AddActivityPage = () => { - const [activityName, setActivityName] = useState(" "); - const [activityType, setActivityType] = useState(" "); - const [activityPlace, setActivityPlace] = useState(" "); - const [activityDay, setActivityDay] = useState(" "); + const [activityName, setActivityName] = useState(""); + const [activityType, setActivityType] = useState(""); + const [activityPlace, setActivityPlace] = useState(""); + const [activityDay, setActivityDay] = useState(""); + const [activityWeek, setActivityWeek] = useState(""); const activityTypesList = [ { value: "entertainment", name: "ترفيه" }, @@ -31,27 +35,45 @@ const AddActivityPage = () => { { name: "الجمعة", value: "fri" }, ]; + const [insertActivity, { isLoading }] = useInsertActivityMutation(); + const { data: WeeksAvailable, isFetching: isFetchingWeeks } = + useGetAllWeeksQuery(); + + let weeksList; + if (!isFetchingWeeks && WeeksAvailable) { + weeksList = WeeksAvailable.body.map((week) => { + return { + ...week, + allWeekInfo: week.weekNumber + " - " + week.startDate.split("T")[0], + weekId: week.termNumber + "-" + week.weekNumber, + }; + }); + console.log("weeks = ", WeeksAvailable, weeksList); + } const HandleSubmit = async (e) => { e.preventDefault(); const newActivity = { name: activityName, - place: activityType, + place: activityPlace, + weekNumber: activityWeek.split("-")[1], + termNumber: activityWeek.split("-")[0], day: activityDay, type: activityType, }; console.log(newActivity); - // try { - // const res = await insertScout(newActivity).unwrap(); - // if (res.status === 400 || res.status === 500) - // throw new Error("Something went wrong while inserting the scout"); - // toast.success("تم إنشاء الكشاف بنجاح"); - // } catch (err) { - // console.log(); - // toast.error("حدث خطأ أثناء إنشاء الكشاف"); - // toast.error(JSON.stringify(err)); - // } + try { + const res = await insertActivity(newActivity).unwrap(); + if (res.status === 400 || res.status === 500 || res.status === 404) + throw new Error("Something went wrong while inserting the activity"); + toast.success("تم إنشاء النشاط بنجاح"); + } catch (err) { + console.log(); + toast.error("حدث خطأ أثناء إنشاء النشاط"); + toast.error(JSON.stringify(err)); + } }; + return (
@@ -98,12 +120,22 @@ const AddActivityPage = () => { onChange={(e) => setActivityDay(e.target.value)} required={true} /> + setActivityWeek(e.target.value)} + required={true} + /> - {/* {isLoadingInsertScout && ( + {isLoading && (

{ > جاري الإضافة

- )} */} + )}
); diff --git a/client/src/components/common/ActivityCard.jsx b/client/src/components/common/ActivityCard.jsx index ce01ef96..bb004f33 100644 --- a/client/src/components/common/ActivityCard.jsx +++ b/client/src/components/common/ActivityCard.jsx @@ -1,12 +1,32 @@ import React from "react"; import "../../assets/styles/components/activityCard.scss"; import Button from "./Button"; -const ActivityCard = ({ title, place, time }) => { +const ActivityCard = ({ activity }) => { + const activityTypesList = { + entertainment: "ترفيه", + rowing: "تجديف", + camping: "نخييم", + wildCooking: "طهي في البرية", + scouting: "كشفي", + volunteering: "تطوعي", + other: "غير ذلك", + }; + + const days = { + sat: "السبت", + sun: "الأحد", + mon: "الاثنين", + tue: "الثلاثاء", + wed: "الأربعاء", + thu: "الخميس", + fri: "الجمعة", + }; + return (
-

{title}

-

{"المكان: " + place}

-

{"الميعاد : " + time}

+

{activityTypesList[activity.type]}

+

{"المكان: " + activity.place}

+

{"اليوم : " + days[activity.day]}

({ + GetAllActivities: builder.query({ + query: () => ({ + url: `${ACTIVITIES_URL}/all`, + method: "GET", + }), + providesTags: ["activites"], + }), + InsertActivity: builder.mutation({ + query: (activity) => ({ + url: `${ACTIVITIES_URL}`, + method: "POST", + body: activity, + }), + invalidatesTags: ["activites"], + }), + }), +}); + +export const { useGetAllActivitiesQuery, useInsertActivityMutation } = + activitiesApi; diff --git a/client/src/redux/slices/apiSlice.js b/client/src/redux/slices/apiSlice.js index 0c7a625f..11d1a0eb 100644 --- a/client/src/redux/slices/apiSlice.js +++ b/client/src/redux/slices/apiSlice.js @@ -25,6 +25,7 @@ export const apiSlice = createApi({ "auth", "sector", "alert", + "activites", ], endpoints: () => ({}), }); diff --git a/server/controllers/activities.controller.js b/server/controllers/activities.controller.js index c79171bc..1003e532 100644 --- a/server/controllers/activities.controller.js +++ b/server/controllers/activities.controller.js @@ -3,14 +3,14 @@ import db from "../database/db.js" const activitiesController = { insertActivity: async (req, res) => { try { - const { place, weekNumber, termNumber, day, type } = req.body + const { name , place, weekNumber, termNumber, day, type } = req.body const result = await db.query(` - INSERT INTO "Activity" ("place", "weekNumber", "termNumber", "day", "type") - VALUES ($1, $2, $3, $4, $5) + INSERT INTO "Activity" ( "name" , "place", "weekNumber", "termNumber", "day", "type") + VALUES ($1, $2, $3, $4, $5 , $6) RETURNING * `, - [place, weekNumber, termNumber, day, type]) + [name , place, weekNumber, termNumber, day, type]) if (result.rowCount === 0) { return res.status(400).json({