Merge pull request #62 from CMP26Projects/activity

Activity
CMP26Projects · Dec 29, 2023 · 3337304 · 3337304
2 parents 7197abb + c694c4c
commit 3337304
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 33 deletions.
diff --git 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 (
     <div className="activity-page">
       <PageTitle title="الأنشطة" />
-      <Button className="Button--medium Button--success add-button">
+      <Button
+        className="Button--medium Button--success add-button"
+        linkTo="/add-activity"
+      >
         إضافة
       </Button>
       <div className="activity-section">
-        <ActivityCard title="تخييم" place="محمية وادي دجلة" time="يوم الجمعة" />
-        <ActivityCard title="تخييم" place="محمية وادي دجلة" time="يوم الجمعة" />
-        <ActivityCard title="تخييم" place="محمية وادي دجلة" time="يوم الجمعة" />
-        <ActivityCard title="تخييم" place="محمية وادي دجلة" time="يوم الجمعة" />
+        {isFetchingActivity
+          ? "جاري التحميل..."
+          : activityList.body.map((act) => {
+              return <ActivityCard activity={act} />;
+            })}
       </div>
     </div>
   );

diff --git 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
@@ -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 (
     <div className="money-page">
       <PageTitle title="إضافة نشاط" />
@@ -98,20 +120,30 @@ const AddActivityPage = () => {
           onChange={(e) => setActivityDay(e.target.value)}
           required={true}
         />
+        <CustomSelect
+          label="اختار الأسبوع"
+          name="activityWeek"
+          data={isFetchingWeeks ? [] : weeksList}
+          displayMember="allWeekInfo"
+          valueMember="weekId"
+          selectedValue={activityWeek}
+          onChange={(e) => setActivityWeek(e.target.value)}
+          required={true}
+        />
 
         <Button className="insert-sector__btn Button--medium Button--primary-darker">
           إضافة
         </Button>
 
-        {/* {isLoadingInsertScout && (
+        {isLoading && (
           <p
             style={{
               direction: "rtl",
             }}
           >
             جاري الإضافة
           </p>
-        )} */}
+        )}
       </form>
     </div>
   );

diff --git 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 (
     <div className="all-card">
-      <h4>{title}</h4>
-      <p>{"المكان: " + place}</p>
-      <p>{"الميعاد : " + time}</p>
+      <h4>{activityTypesList[activity.type]}</h4>
+      <p>{"المكان: " + activity.place}</p>
+      <p>{"اليوم : " + days[activity.day]}</p>
       <div className="horizontally-aligned">
         <Button className="Button--medium Button--primary-darker">تعديل</Button>
         <svg

diff --git a/client/src/redux/slices/activitiesApiSlice.js b/client/src/redux/slices/activitiesApiSlice.js
@@ -0,0 +1,26 @@
+import { apiSlice } from "./apiSlice";
+
+const ACTIVITIES_URL = "/api/activities";
+
+export const activitiesApi = apiSlice.injectEndpoints({
+  endpoints: (builder) => ({
+    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
@@ -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
@@ -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({