صفحة الادوار

---

---

فايلات الفولدر

الفايلات
api.ts
columns.ts
RolesRequest.ts
useRoles.ts
RolesView.tsx

api.ts

export const assignPermissionToRole = async (
  permission: string,
  roleId: string
) => {
  const response = await axiosInstance.post(`/roles/add-permission`, {
    permissions: [permission],
    roleId: roleId,
  });
  return response.data;
};

export const removePermissionFromRole = async (
  permission: string,
  roleId: string
) => {
  const response = await axiosInstance.post(`/roles/remove-permission`, {
    permissions: [permission],
    roleId: roleId,
  });
  return response.data;
};

• هذا الملف عبارة عن تواصل ويا ال API الي بالباك وبيه مجموعة من ال Endpoints وهاي جزء منها

---

columns.ts

const getColumns = (t: TFunction): ColumnDef<Role>[] => {
  return [
    {
      accessorKey: "name",
      header: t("pages.management.roles.columns.name"),
      size: 450,
    },
  ];
};

• هاي هنا راح تنحط الاعمدة مال التيبل الي راح ينعرض بالصفحة مالتك والي بيه بس بارميتر واحد

---

RolesRequest.ts

export const baseSchema = (t: TFunction) =>
  z.object({
    name: z.string({
      required_error: t("pages.management.roles.inputs.name.required"),
    }),
  });

• هنا هاي السكيما مال الفورمة مال الاضافة والتعديل

---

useRoles.ts

export const getInfiniteScrollRolesQuery = (query: string, sort: string) => {
  return useInfiniteQuery<Role[]>({
    queryKey: ["roles", query, sort],
    queryFn: async ({ pageParam = 0 }) => {
      const fetchSize = 10;
      const offset = (pageParam as number) * fetchSize;
      const fetchedData = await getInfiniteRoles(
        offset,
        fetchSize,
        query,
        sort
      );
      return fetchedData;
    },
    initialPageParam: 0,
    getNextPageParam: (lastPage, allPages) => {
      const nextOffset = lastPage.length ? allPages.length : undefined;
      return nextOffset;
    },
  });
};
// ----------------------- //

const addNewRoleMutation = useMutation({
  mutationFn: createRole,
  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ["roles"],
    });
    setOpenDialog(false);
    reset(defaultValues);
    toast.success(t("pages.management.roles.addRoleSuccess"));
  },
  onError: (error: any) => {
    toast.error(t("pages.management.roles.addRoleError"), {
      description: error?.response?.data[0].reason,
    });
  },
});
// ----------------------- //

const deleteRoleMutation = useMutation({
  mutationFn: deleteRole,
  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ["roles"],
    });
    setDeleteDialog(false);
    setSelectedRole(null);
    reset(defaultValues);
    toast.success(t("successMessage"));
  },
  onError: (error) => {
    const errorMessage = (error as any)?.response?.data?.message;
    const errorReason = (error as any)?.response?.data[0]?.reason;
    toast.error(t("errorMessage"), {
      description: `${errorMessage}${errorReason ? `:${errorReason}` : ""}`,
    });
  },
});
// ----------------------- //
const editRoleMutation = useMutation({
  mutationFn: updateRole,
  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ["roles"],
    });
    setOpenDialog(false);
    reset(defaultValues);
    toast.success(t("pages.management.roles.updateRoleSuccess"));
  },
  onError: (error: any) => {
    toast.error(t("pages.management.roles.updateRoleError"), {
      description: error?.response?.data[0].reason,
    });
  },
});

• هنا هاي الدوال راح تفعل الدوال مال التواصل ويا الباك وهمينة تسوي كاش للداتا الي تجي او تسوي refetch وتسوي كاش من جديد
• بال getInfiniteScrollRolesQuery راح تصير عملية ال Paging للبيانات الي راح تجي عن طريق استخدام دالة ال useInfiniteQuery وهذا ال endpoint مالتها /roles?offset=${offset}&limit=${fetchSize}&search=${query}&sort=${sort}
  • sort : ترتيب البيانات
  • query : هاي راح تحط قيمة البحث مالتك الي كتبتها بالحقل مال البحث
  • fetchSize : شكد عدد الاسطر الي راح تجي بالفيتش الواحد
  • offset : وين وصلت بعدد الفيتش الي صار الحد هسة
• getNextPageParam : هاي راح تشوف اذا انت وصلت الاخير سطر ويوكف بحث او فيتش لو بعد باقي من الاسطر الي ما جبتها
• بالنسبة الباقي الدوال فهنة بكل بساطة راح يسون عملية اضافة او تعديل او حذف بناء على الداتا الي راح تجيهن وراح تسوي refetch للبيانات من جديد لمن تنجح العملية لان الداتا القديمة بعد ما منها فايدة لان صار عليها تحديث

---

RolesView.tsx

const { t, i18n } = useTranslation();
const { updateBreadcrumbs } = useBreadcrumbs();
useEffect(() => {
  updateBreadcrumbs([
    {
      link: "/roles",
      label: t("pages.management.roles.title"),
    },
  ]);
}, [i18n.language]);
useTitle(t("pages.management.roles.title"));
const columns = useMemo(() => getColumns(t), [i18n.language]);
const { user } = useAuthStore();

• اول شي الدوال الي من ال useTranslation هاي تفيد بالترجمة يعني تحول النص من عربي الى انكليزي وبالعكس
• وعدنة مجموعة اكواد لخ تخص تغيير التايتل لمن تتغير اللغة بال useEffect
• ال columns هاي راح تجي اول ما تفتح الصفحة وراح يصير الها re-render بس لمن اللغة تتغير مال الصفحة
• اليوزر هذا جبتة من custom Hook والي راح يكون الكود مالتة هيج شكلة :

const useAuthStore = create<AuthStore>((set, get) => ({
  user: JSON.parse(localStorage.getItem("user") || "null"),
  setUser: (user: User) => {
    localStorage.setItem("user", JSON.stringify(user));
    set(() => ({ user: user }));
  },
  logOutUser: () => {
    localStorage.removeItem("user");
    set(() => ({ user: null }));
  },
  getUser: () => get().user,
}));

• وراح يجيب المستخدم واذا ماكو حجيب null
• وبيه عدة دوال لخ بس ما مستخدمة بهذا الفايل