feat: format with prettier

apps/web/components/Dashboard/UI/BreadCrumbs.tsx

@@ -4,30 +4,68 @@ import Link from 'next/link'
 import React from 'react'
 
 type BreadCrumbsProps = {
-    type: 'courses' | 'user' | 'users' | 'org' | 'orgusers'
-    last_breadcrumb?: string
+  type: 'courses' | 'user' | 'users' | 'org' | 'orgusers'
+  last_breadcrumb?: string
 }
 
 function BreadCrumbs(props: BreadCrumbsProps) {
-    const course = useCourse() as any;
+  const course = useCourse() as any
 
-    return (
-        <div>
-            <div className='h-7'></div>
-            <div className='text-gray-400 tracking-tight font-medium text-sm flex space-x-1'>
-                <div className='flex items-center space-x-1'>
-                    {props.type == 'courses' ? <div className='flex space-x-2 items-center'> <Book className='text-gray' size={14}></Book><Link href='/dash/courses'>Courses</Link></div> : ''}
-                    {props.type == 'user' ? <div className='flex space-x-2 items-center'> <User className='text-gray' size={14}></User><Link href='/dash/user-account/settings/general'>Account Settings</Link></div> : ''}
-                    {props.type == 'orgusers' ? <div className='flex space-x-2 items-center'> <Users className='text-gray' size={14}></Users><Link href='/dash/users/settings/users'>Organization users</Link></div> : ''}
-                    
-                    {props.type == 'org' ? <div className='flex space-x-2 items-center'> <School className='text-gray' size={14}></School><Link href='/dash/users'>Organization Settings</Link></div> : ''}
-                    <div className='flex items-center space-x-1 first-letter:uppercase'>
-                        {props.last_breadcrumb ? <ChevronRight size={17} /> : ''}
-                        <div className='first-letter:uppercase'>  {props.last_breadcrumb}</div>
-                    </div></div></div>
+  return (
+    <div>
+      <div className="h-7"></div>
+      <div className="text-gray-400 tracking-tight font-medium text-sm flex space-x-1">
+        <div className="flex items-center space-x-1">
+          {props.type == 'courses' ? (
+            <div className="flex space-x-2 items-center">
+              {' '}
+              <Book className="text-gray" size={14}></Book>
+              <Link href="/dash/courses">Courses</Link>
+            </div>
+          ) : (
+            ''
+          )}
+          {props.type == 'user' ? (
+            <div className="flex space-x-2 items-center">
+              {' '}
+              <User className="text-gray" size={14}></User>
+              <Link href="/dash/user-account/settings/general">
+                Account Settings
+              </Link>
+            </div>
+          ) : (
+            ''
+          )}
+          {props.type == 'orgusers' ? (
+            <div className="flex space-x-2 items-center">
+              {' '}
+              <Users className="text-gray" size={14}></Users>
+              <Link href="/dash/users/settings/users">Organization users</Link>
+            </div>
+          ) : (
+            ''
+          )}
 
+          {props.type == 'org' ? (
+            <div className="flex space-x-2 items-center">
+              {' '}
+              <School className="text-gray" size={14}></School>
+              <Link href="/dash/users">Organization Settings</Link>
+            </div>
+          ) : (
+            ''
+          )}
+          <div className="flex items-center space-x-1 first-letter:uppercase">
+            {props.last_breadcrumb ? <ChevronRight size={17} /> : ''}
+            <div className="first-letter:uppercase">
+              {' '}
+              {props.last_breadcrumb}
+            </div>
+          </div>
         </div>
-    )
+      </div>
+    </div>
+  )
 }
 
-export default BreadCrumbs
+export default BreadCrumbs

apps/web/components/Dashboard/UI/CourseOverviewTop.tsx

@@ -1,43 +1,66 @@
-import { useCourse } from "@components/Contexts/CourseContext";
-import { useEffect } from "react";
-import BreadCrumbs from "./BreadCrumbs";
-import SaveState from "./SaveState";
-import { CourseOverviewParams } from "app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page";
-import { getUriWithOrg } from "@services/config/config";
-import { useOrg } from "@components/Contexts/OrgContext";
-import { getCourseThumbnailMediaDirectory } from "@services/media/media";
-import Link from "next/link";
-import Image from "next/image";
-import EmptyThumbnailImage from '../../../public/empty_thumbnail.png';
+import { useCourse } from '@components/Contexts/CourseContext'
+import { useEffect } from 'react'
+import BreadCrumbs from './BreadCrumbs'
+import SaveState from './SaveState'
+import { CourseOverviewParams } from 'app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page'
+import { getUriWithOrg } from '@services/config/config'
+import { useOrg } from '@components/Contexts/OrgContext'
+import { getCourseThumbnailMediaDirectory } from '@services/media/media'
+import Link from 'next/link'
+import Image from 'next/image'
+import EmptyThumbnailImage from '../../../public/empty_thumbnail.png'
 
-export function CourseOverviewTop({ params }: { params: CourseOverviewParams }) {
-    const course = useCourse() as any;
-    const org = useOrg() as any;
+export function CourseOverviewTop({
+  params,
+}: {
+  params: CourseOverviewParams
+}) {
+  const course = useCourse() as any
+  const org = useOrg() as any
 
-    useEffect(() => { }
-        , [course, org])
+  useEffect(() => {}, [course, org])
 
-    return (
-        <>
-            <BreadCrumbs type='courses' last_breadcrumb={course.courseStructure.name} ></BreadCrumbs>
-            <div className='flex'>
-                <div className='flex py-5 grow items-center'>
-                    <Link href={getUriWithOrg(org?.slug, "") + `/course/${params.courseuuid}`}>
-                        {course?.courseStructure?.thumbnail_image ?
-                        <img className="w-[100px] h-[57px] rounded-md drop-shadow-md" src={`${getCourseThumbnailMediaDirectory(org?.org_uuid, "course_" + params.courseuuid, course.courseStructure.thumbnail_image)}`} alt="" />
-                        :
-                        <Image width={100} className="h-[57px] rounded-md drop-shadow-md" src={EmptyThumbnailImage} alt="" />}
-                    </Link>
-                    <div className="flex flex-col course_metadata justify-center pl-5">
-                        <div className='text-gray-400 font-semibold text-sm'>Course</div>
-                        <div className='text-black font-bold text-xl -mt-1 first-letter:uppercase'>{course.courseStructure.name}</div>
-                    </div>
-                </div>
-                <div className='flex items-center'>
-                    <SaveState orgslug={params.orgslug} />
-                </div>
+  return (
+    <>
+      <BreadCrumbs
+        type="courses"
+        last_breadcrumb={course.courseStructure.name}
+      ></BreadCrumbs>
+      <div className="flex">
+        <div className="flex py-5 grow items-center">
+          <Link
+            href={getUriWithOrg(org?.slug, '') + `/course/${params.courseuuid}`}
+          >
+            {course?.courseStructure?.thumbnail_image ? (
+              <img
+                className="w-[100px] h-[57px] rounded-md drop-shadow-md"
+                src={`${getCourseThumbnailMediaDirectory(
+                  org?.org_uuid,
+                  'course_' + params.courseuuid,
+                  course.courseStructure.thumbnail_image
+                )}`}
+                alt=""
+              />
+            ) : (
+              <Image
+                width={100}
+                className="h-[57px] rounded-md drop-shadow-md"
+                src={EmptyThumbnailImage}
+                alt=""
+              />
+            )}
+          </Link>
+          <div className="flex flex-col course_metadata justify-center pl-5">
+            <div className="text-gray-400 font-semibold text-sm">Course</div>
+            <div className="text-black font-bold text-xl -mt-1 first-letter:uppercase">
+              {course.courseStructure.name}
             </div>
-        </>
-    )
-
-}
+          </div>
+        </div>
+        <div className="flex items-center">
+          <SaveState orgslug={params.orgslug} />
+        </div>
+      </div>
+    </>
+  )
+}

apps/web/components/Dashboard/UI/LeftMenu.tsx

@@ -1,107 +1,172 @@
-'use client';
-import { useOrg } from '@components/Contexts/OrgContext';
-import { useSession } from '@components/Contexts/SessionContext';
+'use client'
+import { useOrg } from '@components/Contexts/OrgContext'
+import { useSession } from '@components/Contexts/SessionContext'
 import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
-import LearnHouseDashboardLogo from '@public/dashLogo.png';
-import { logout } from '@services/auth/auth';
+import LearnHouseDashboardLogo from '@public/dashLogo.png'
+import { logout } from '@services/auth/auth'
 import { BookCopy, Home, LogOut, School, Settings, Users } from 'lucide-react'
-import Image from 'next/image';
+import Image from 'next/image'
 import Link from 'next/link'
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation'
 import React, { useEffect } from 'react'
-import UserAvatar from '../../Objects/UserAvatar';
-import AdminAuthorization from '@components/Security/AdminAuthorization';
+import UserAvatar from '../../Objects/UserAvatar'
+import AdminAuthorization from '@components/Security/AdminAuthorization'
 
 function LeftMenu() {
-    const org = useOrg() as any;
-    const session = useSession() as any;
-    const [loading, setLoading] = React.useState(true);
-    const route = useRouter();
+  const org = useOrg() as any
+  const session = useSession() as any
+  const [loading, setLoading] = React.useState(true)
+  const route = useRouter()
 
-    function waitForEverythingToLoad() {
-        if (org && session) {
-            return true;
-        }
-        return false;
+  function waitForEverythingToLoad() {
+    if (org && session) {
+      return true
     }
+    return false
+  }
 
-    async function logOutUI() {
-        const res = await logout();
-        if (res) {
-            route.push('/login');
-        }
-
+  async function logOutUI() {
+    const res = await logout()
+    if (res) {
+      route.push('/login')
     }
+  }
 
-    useEffect(() => {
-        if (waitForEverythingToLoad()) {
-            setLoading(false);
-        }
+  useEffect(() => {
+    if (waitForEverythingToLoad()) {
+      setLoading(false)
     }
-        , [loading])
+  }, [loading])
 
-
-    return (
-        <div
-            style={{ background: "linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(271.56% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgb(20 19 19)" }}
-            className='flex flex-col w-[90px] bg-black h-screen  text-white shadow-xl'>
-            <div className='flex flex-col h-full'>
-                <div className='flex h-20 mt-6'>
-                    <Link className='flex flex-col items-center mx-auto space-y-3' href={"/"}>
-                        <ToolTip content={'Back to Home'} slateBlack sideOffset={8} side='right'  >
-                            <Image alt="Learnhouse logo" width={40} src={LearnHouseDashboardLogo} />
-                        </ToolTip>
-                        <ToolTip content={'Your Organization'} slateBlack sideOffset={8} side='right'  >
-                            <div className='py-1 px-3 bg-black/40 opacity-40 rounded-md text-[10px] justify-center text-center'>{org?.name}</div>
-                        </ToolTip>
-                    </Link>
-                </div>
-                <div className='flex grow flex-col justify-center space-y-5 items-center mx-auto'>
-                    {/* <ToolTip content={"Back to " + org?.name + "'s Home"} slateBlack sideOffset={8} side='right'  >
+  return (
+    <div
+      style={{
+        background:
+          'linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(271.56% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgb(20 19 19)',
+      }}
+      className="flex flex-col w-[90px] bg-black h-screen  text-white shadow-xl"
+    >
+      <div className="flex flex-col h-full">
+        <div className="flex h-20 mt-6">
+          <Link
+            className="flex flex-col items-center mx-auto space-y-3"
+            href={'/'}
+          >
+            <ToolTip
+              content={'Back to Home'}
+              slateBlack
+              sideOffset={8}
+              side="right"
+            >
+              <Image
+                alt="Learnhouse logo"
+                width={40}
+                src={LearnHouseDashboardLogo}
+              />
+            </ToolTip>
+            <ToolTip
+              content={'Your Organization'}
+              slateBlack
+              sideOffset={8}
+              side="right"
+            >
+              <div className="py-1 px-3 bg-black/40 opacity-40 rounded-md text-[10px] justify-center text-center">
+                {org?.name}
+              </div>
+            </ToolTip>
+          </Link>
+        </div>
+        <div className="flex grow flex-col justify-center space-y-5 items-center mx-auto">
+          {/* <ToolTip content={"Back to " + org?.name + "'s Home"} slateBlack sideOffset={8} side='right'  >
                         <Link className='bg-white text-black hover:text-white rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/`} ><ArrowLeft className='hover:text-white' size={18} /></Link>
                     </ToolTip> */}
-                    <AdminAuthorization authorizationMode="component">
-                        <ToolTip content={"Home"} slateBlack sideOffset={8} side='right'  >
-                            <Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash`} ><Home size={18} /></Link>
-                        </ToolTip>
-                        <ToolTip content={"Courses"} slateBlack sideOffset={8} side='right'  >
-                            <Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash/courses`} ><BookCopy size={18} /></Link>
-                        </ToolTip>
-                        <ToolTip content={"Users"} slateBlack sideOffset={8} side='right'  >
-                            <Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash/users/settings/users`} ><Users size={18} /></Link>
-                        </ToolTip>
-                        <ToolTip content={"Organization"} slateBlack sideOffset={8} side='right'  >
-                            <Link className='bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/dash/org/settings/general`} ><School size={18} /></Link>
-                        </ToolTip>
-                    </AdminAuthorization>
-                </div>
-                <div className='flex flex-col mx-auto pb-7 space-y-2'>
-
-                    <div className="flex items-center flex-col space-y-2">
-                        <ToolTip content={'@' + session.user.username} slateBlack sideOffset={8} side='right'  >
-                            <div className='mx-auto'>
-                                <UserAvatar border='border-4' width={35} />
-                            </div>
-                        </ToolTip>
-                        <div className='flex items-center flex-col space-y-1'>
-                            <ToolTip content={session.user.username + "'s Settings"} slateBlack sideOffset={8} side='right'  >
-                                <Link href={'/dash/user-account/settings/general'} className='py-3'>
-                                    <Settings className='mx-auto text-neutral-400 cursor-pointer' size={18} />
-                                </Link>
-                            </ToolTip>
-                            <ToolTip content={'Logout'} slateBlack sideOffset={8} side='right'  >
-                                <LogOut onClick={() => logOutUI()} className='mx-auto text-neutral-400 cursor-pointer' size={14} />
-                            </ToolTip>
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-
-
+          <AdminAuthorization authorizationMode="component">
+            <ToolTip content={'Home'} slateBlack sideOffset={8} side="right">
+              <Link
+                className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
+                href={`/dash`}
+              >
+                <Home size={18} />
+              </Link>
+            </ToolTip>
+            <ToolTip content={'Courses'} slateBlack sideOffset={8} side="right">
+              <Link
+                className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
+                href={`/dash/courses`}
+              >
+                <BookCopy size={18} />
+              </Link>
+            </ToolTip>
+            <ToolTip content={'Users'} slateBlack sideOffset={8} side="right">
+              <Link
+                className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
+                href={`/dash/users/settings/users`}
+              >
+                <Users size={18} />
+              </Link>
+            </ToolTip>
+            <ToolTip
+              content={'Organization'}
+              slateBlack
+              sideOffset={8}
+              side="right"
+            >
+              <Link
+                className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
+                href={`/dash/org/settings/general`}
+              >
+                <School size={18} />
+              </Link>
+            </ToolTip>
+          </AdminAuthorization>
         </div>
-    )
+        <div className="flex flex-col mx-auto pb-7 space-y-2">
+          <div className="flex items-center flex-col space-y-2">
+            <ToolTip
+              content={'@' + session.user.username}
+              slateBlack
+              sideOffset={8}
+              side="right"
+            >
+              <div className="mx-auto">
+                <UserAvatar border="border-4" width={35} />
+              </div>
+            </ToolTip>
+            <div className="flex items-center flex-col space-y-1">
+              <ToolTip
+                content={session.user.username + "'s Settings"}
+                slateBlack
+                sideOffset={8}
+                side="right"
+              >
+                <Link
+                  href={'/dash/user-account/settings/general'}
+                  className="py-3"
+                >
+                  <Settings
+                    className="mx-auto text-neutral-400 cursor-pointer"
+                    size={18}
+                  />
+                </Link>
+              </ToolTip>
+              <ToolTip
+                content={'Logout'}
+                slateBlack
+                sideOffset={8}
+                side="right"
+              >
+                <LogOut
+                  onClick={() => logOutUI()}
+                  className="mx-auto text-neutral-400 cursor-pointer"
+                  size={14}
+                />
+              </ToolTip>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }
 
 export default LeftMenu
-

apps/web/components/Dashboard/UI/SaveState.tsx

@@ -1,114 +1,127 @@
-'use client';
-import { getAPIUrl } from '@services/config/config';
-import { updateCourseOrderStructure } from '@services/courses/chapters';
-import { revalidateTags } from '@services/utils/ts/requests';
-import { useCourse, useCourseDispatch } from '@components/Contexts/CourseContext'
+'use client'
+import { getAPIUrl } from '@services/config/config'
+import { updateCourseOrderStructure } from '@services/courses/chapters'
+import { revalidateTags } from '@services/utils/ts/requests'
+import {
+  useCourse,
+  useCourseDispatch,
+} from '@components/Contexts/CourseContext'
 import { Check, SaveAllIcon, Timer } from 'lucide-react'
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation'
 import React, { useEffect } from 'react'
-import { mutate } from 'swr';
-import { updateCourse } from '@services/courses/courses';
+import { mutate } from 'swr'
+import { updateCourse } from '@services/courses/courses'
 
 function SaveState(props: { orgslug: string }) {
-    const course = useCourse() as any;
-    const router = useRouter();
-    const saved = course ? course.isSaved : true;
-    const dispatchCourse = useCourseDispatch() as any;
-    const course_structure = course.courseStructure;
-
-    const saveCourseState = async () => {
-        // Course  order 
-        if (saved) return;
-        await changeOrderBackend();
-        mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`);
-        // Course metadata
-        await changeMetadataBackend();
-        mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`);
-        await revalidateTags(['courses'], props.orgslug)
-        dispatchCourse({ type: 'setIsSaved' })
-    }
-
-
-    // 
-    // Course Order 
-    const changeOrderBackend = async () => {
-        mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`);
-        await updateCourseOrderStructure(course.courseStructure.course_uuid, course.courseOrder);
-        await revalidateTags(['courses'], props.orgslug)
-        router.refresh();
-        dispatchCourse({ type: 'setIsSaved' })
-    }
+  const course = useCourse() as any
+  const router = useRouter()
+  const saved = course ? course.isSaved : true
+  const dispatchCourse = useCourseDispatch() as any
+  const course_structure = course.courseStructure
 
+  const saveCourseState = async () => {
+    // Course  order
+    if (saved) return
+    await changeOrderBackend()
+    mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`)
     // Course metadata
-    const changeMetadataBackend = async () => {
-        mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`);
-        await updateCourse(course.courseStructure.course_uuid, course.courseStructure);
-        await revalidateTags(['courses'], props.orgslug)
-        router.refresh();
-        dispatchCourse({ type: 'setIsSaved' })
-    }
-
-
-
-    const handleCourseOrder = (course_structure: any) => {
-        const chapters = course_structure.chapters;
-        const chapter_order_by_ids = chapters.map((chapter: any) => {
-            return {
-                chapter_id: chapter.id,
-                activities_order_by_ids: chapter.activities.map((activity: any) => {
-                    return {
-                        activity_id: activity.id
-                    }
-                })
-            }
-        })
-        dispatchCourse({ type: 'setCourseOrder', payload: { chapter_order_by_ids: chapter_order_by_ids } })
-        dispatchCourse({ type: 'setIsNotSaved' })
-    }
-
-    const initOrderPayload = () => {
-        if (course_structure && course_structure.chapters) {
-            handleCourseOrder(course_structure);
-            dispatchCourse({ type: 'setIsSaved' })
-
-        }
-    }
-
-    const changeOrderPayload = () => {
-        if (course_structure && course_structure.chapters) {
-            handleCourseOrder(course_structure);
-            dispatchCourse({ type: 'setIsNotSaved' })
-
-        }
-    }
-
-    useEffect(() => {
-        if (course_structure?.chapters) {
-            initOrderPayload();
-        }
-        if (course_structure?.chapters && !saved) {
-            changeOrderPayload();
-        }
-    }, [course_structure]); // This effect depends on the `course_structure` variable
-
-    return (
-        <div className='flex space-x-4'>
-            {saved ? <></> : <div className='text-gray-600 flex space-x-2 items-center antialiased'>
-                <Timer size={15} />
-                <div>
-                    Unsaved changes
-                </div>
-
-            </div>}
-            <div className={`px-4 py-2 rounded-lg drop-shadow-md cursor-pointer flex space-x-2 items-center font-bold antialiased transition-all ease-linear ` + (saved ? 'bg-gray-600 text-white' : 'bg-black text-white border hover:bg-gray-900 ')
-            } onClick={saveCourseState}>
-
-                {saved ? <Check size={20} /> : <SaveAllIcon size={20} />}
-                {saved ? <div className=''>Saved</div> : <div className=''>Save</div>}
-            </div>
-        </div>
+    await changeMetadataBackend()
+    mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`)
+    await revalidateTags(['courses'], props.orgslug)
+    dispatchCourse({ type: 'setIsSaved' })
+  }
 
+  //
+  // Course Order
+  const changeOrderBackend = async () => {
+    mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`)
+    await updateCourseOrderStructure(
+      course.courseStructure.course_uuid,
+      course.courseOrder
     )
+    await revalidateTags(['courses'], props.orgslug)
+    router.refresh()
+    dispatchCourse({ type: 'setIsSaved' })
+  }
+
+  // Course metadata
+  const changeMetadataBackend = async () => {
+    mutate(`${getAPIUrl()}courses/${course.courseStructure.course_uuid}/meta`)
+    await updateCourse(
+      course.courseStructure.course_uuid,
+      course.courseStructure
+    )
+    await revalidateTags(['courses'], props.orgslug)
+    router.refresh()
+    dispatchCourse({ type: 'setIsSaved' })
+  }
+
+  const handleCourseOrder = (course_structure: any) => {
+    const chapters = course_structure.chapters
+    const chapter_order_by_ids = chapters.map((chapter: any) => {
+      return {
+        chapter_id: chapter.id,
+        activities_order_by_ids: chapter.activities.map((activity: any) => {
+          return {
+            activity_id: activity.id,
+          }
+        }),
+      }
+    })
+    dispatchCourse({
+      type: 'setCourseOrder',
+      payload: { chapter_order_by_ids: chapter_order_by_ids },
+    })
+    dispatchCourse({ type: 'setIsNotSaved' })
+  }
+
+  const initOrderPayload = () => {
+    if (course_structure && course_structure.chapters) {
+      handleCourseOrder(course_structure)
+      dispatchCourse({ type: 'setIsSaved' })
+    }
+  }
+
+  const changeOrderPayload = () => {
+    if (course_structure && course_structure.chapters) {
+      handleCourseOrder(course_structure)
+      dispatchCourse({ type: 'setIsNotSaved' })
+    }
+  }
+
+  useEffect(() => {
+    if (course_structure?.chapters) {
+      initOrderPayload()
+    }
+    if (course_structure?.chapters && !saved) {
+      changeOrderPayload()
+    }
+  }, [course_structure]) // This effect depends on the `course_structure` variable
+
+  return (
+    <div className="flex space-x-4">
+      {saved ? (
+        <></>
+      ) : (
+        <div className="text-gray-600 flex space-x-2 items-center antialiased">
+          <Timer size={15} />
+          <div>Unsaved changes</div>
+        </div>
+      )}
+      <div
+        className={
+          `px-4 py-2 rounded-lg drop-shadow-md cursor-pointer flex space-x-2 items-center font-bold antialiased transition-all ease-linear ` +
+          (saved
+            ? 'bg-gray-600 text-white'
+            : 'bg-black text-white border hover:bg-gray-900 ')
+        }
+        onClick={saveCourseState}
+      >
+        {saved ? <Check size={20} /> : <SaveAllIcon size={20} />}
+        {saved ? <div className="">Saved</div> : <div className="">Save</div>}
+      </div>
+    </div>
+  )
 }
 
-export default SaveState
+export default SaveState