الهيكلية الخاصة بالمشروع

طبعا اذا تسوي نسخ للمشروع بجهازك راح تلاحظ انو المشروع ما مبني بطريقة ال component based structure الي هو اصلا يعتبر horizantal slicing arcetecture انما راح تلاحظ بناء هيكلية مختلفة والي هي اسمها Vertical-Slicing Architecture والي من مميزاتها :

• راح يكون كلشي يخص ال Feature بمكان واحد او فولدر واحد على سبيل المثال كلشي يخص المنتجات راح تلكاه بفولدر اسمة المنتجات
• راح يكون اسهل بهواي من ناحية الصيانة وتوسعة المشروع لان بكل بساطة كلشي موجود بمكان واحد مراح تدوخ وتطفر من فولدر الفولدر علمود تدور على الهووك مال المنتجات ... لا كلها كدام عينك بفولدر واحد

لهذا المشروع من راح تدخل بيه راح تشوف كل صفحة والفولدر الخاص مالتها

ملاحظة : راح تلكة فولدر يجمع شغلات مشتركة مثلا راح تلكة فولدر خاص بال Auth بيه كلشي يخص الحماية من توكن ورفرش توكن وبرمشنات وغيرها لان هذا مستخدم بكل انحاء الصفحات لهذا صار الة فولدر منعزل خاص بيه

---

مثال من المشروع

//DeliveryEmployees folder contain
DeliveryEmployeeRequest.ts; // file
DeliveryEmployeesView.tsx; // file
useDeliveryEmployees.ts; // file

وشرح بسيط عنها علمود تفهم الستراكجر مال المشروع بشكل عام قبل لا نغوص بالتفاصيل مال كل فولدر :-

1. DeliveryEmployeeRequest.ts: الي راح ينتهي بكلمة Request اغلب الاحيان راح تلكاه يخص ال Validation مثل هذا الانبوت يكون مطلوب وطولة 8 احرف او يكون عبارة عن ارقام ويكون اوبشنال ... وغيرها
2. DeliveryEmployeesView.tsx: هذا واضح لان هذا يخص شكل الصفحة من ناحية ال UI وعرض البيانات واللوجك الخاص بيها راح يكون معزول بالفايل الجاي
3. useDeliveryEmployees.ts : هذا كلشي يخص اللوجك من ناحية التعامل ويا الباك ايند او التعامل ويا الهووكس او ال States او الموديلات مال التايب سكربت او الفانكشز الخاصة بالايفنتات وغيرها كلها راح تلكاها بهاي الصفحة وراح ناخذ مثال بسيط علمود تتقرب الصورة على كل فايل ملاحظة: راح تلكة بهواي فولدرات فايل اسمة Columns.ts هذا راح يخص الاعمدة مال التيبل مال الفولدر الحالي لان التيبل هنانة صاير داينمك فلهذا الاعمدة راح تمرر الى التيبل علمود يعرضها بالخصائص الجاية من الفايل

مثال على الفولدرات الفوك

//DeliveryEmployeeRequest.ts
export const schema = z.object({
  name: z.string({ required_error: "يجب ادخال اسم موظف التوصيل" }),
  phoneNumber: z
    .string()
    .optional()
    .refine((val) => !val || /^[0-9]{10,11}$/.test(val), {
      message: "الرقم الموظف يجب ان يحتوي على الاقل 10 ارقام ولا يتجاوز 11 رقم",
    }),
});

هاي هنا راح تلاحظ انو السكيما هنا بيها شغلتين :

• الاسم : والي راح يكون هنا مطلوب ويرجع رسالة في حال ما تم ادخال اسم من نوع نص
• رقم الهاتف : هنا هو اوبشنال وراح يكون سترنك ومدخل عليه Reqular Expression الي راح تسوي فحص انو الارقام لازم تكون سترنك بس بنفس الوكت تستقبل بس ارقام والطول مال السترنك راح يكون من 10 الى 11 رقم وراح يرجع رسالة اذا اقل او اكثر من هل عدد

هاي بالنسبة الهاي الصفحة

//DeliveryEmployeesView.tsx
<Dialog open={openDeleteDialog} onOpenChange={setOpenDeleteDialog}>
  <DialogContent className="sm:max-w-[425px]">
    <DialogHeader className="mt-4">
      <DialogTitle className="text-right border-b pb-3">
        هل انت متاكد من حذف الموظف؟
      </DialogTitle>
    </DialogHeader>
    <div className="flex justify-end gap-2">
      <Button onClick={() => setOpenDeleteDialog(false)} variant="outline">
        لا
      </Button>
      <Button onClick={handleDeleteOnclick}>نعم</Button>
    </div>
  </DialogContent>
</Dialog>

هنا حيكون مسؤول عن العرض المحتويات الصفحة والتعامل ويا اللوجك الموجود بالفايل مال الكستوم هووك , وراح تلاحظ الي موجود بس محتويات العرض والي هي عبارة عن Components مأخوذة من مكتبة Radix UI علمود نحذف موظف حالي

// handleDeleteOnClick Function
const handleDeleteOnclick = () => {
  if (selectedEmployee) {
    useDeleteDeliveryEmployeeMutaiton.mutate(selectedEmployee);
  }
};

// useDeleteDeliveryEmployeeMutation
const useDeleteDeliveryEmployeeMutaiton = useMutation({
  mutationFn: deleteDeliveryEmployee,
  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ["delivery-employees"],
    });
    setOpenDeleteDialog(false);
    setSelectedEmployee(null);
  },
});

• هنا مثال على شنو موجود بداخل الكستوم هووك مالتي والي حيكون كلة عبارة عن اللوجك مالتي فصلتة من صفحة ال UI وعزلتة هنانة علمود يصير الكود مالتي انظف فراح تلكة اغلب الهووكس مثل ال useEffect , useState .... etc راح تلكاها بهاي الصفحة
• وايضا راح تلكة اللوجك الي يخص التواصل ويا ال API من ناحية كل العمليات
• بالنسبة للكود الفوك حيكون عبارة عن مثال عملي عن الفصل مال الملفات وهو حاليا من الشخص راح يضغط حذف وتأكيد راح يفعل دالة handleDeleteOnClick الي بدورها راح تجيك ال state مال الموظف اذا موجود فعل الفانكشن
• طبعا ال MutatationFunction هاي تستخدم ويا العمليات الي حيصير بيها تعديل على البيانات او حذفها من ناحية ال API والي حتكون غالب الاحيان اما حذف او تعديل او اضافة

ملاحظة : بالنسبة للتواصل ويا ال API راح يكون اكو فولدر معزول اسمة API بداخل السورس فولدر وراح يكون بيه طن فولدرات كل فولدر يخص مجموعة معينة مثل المنتجات كل عمليات التواصل ويا الباك راح تلكاها هناك والتنفيذ بس تلكاه بالكستوم هووك

//DeliveryEmployeesEndpoints API File
export const deleteDeliveryEmployee = async (id: number) => {
  const response = await axiosInstance.delete(`/delivery-drivers/${id}`);
  return response.data;
};

• هنا راح تشوف على سبيل المثال دالة الحذف مالتك الي تم استخدامها بالكستوم هووك الفوك

وبس من ناحية الستراكجر بشكل مبدئي حيكون عندك وجه نظر مبدئية على المشروع وشلون يشتغل طبعا اكو بعد شغلات كاعد تصير وراح تتعرف عليها كل وحدة بصفحتها