Dark theme implementation (#259)

* ch(fix sign up): fixing sign up - google is removed -Date of birth is validated to be at least 18 years -Email field is automatically filled and uneditable ( collect the email from the sign up link sent to them) -Password should not be too easy. (Should not be in the first 100 most common passwords: https://tinyurl.com/wiki-100) [Finishes #42-signup-fix] * ch(dark-theme):implementation of dark theme -Dark theme is added using our new design -implement effective dark theme at all [finishes #59-dark-theme-implementation] * add orgLogin update (#260) * add * Add change * move space in organiaztionLogin * add newUpdate * add newChange * add change * add changing * Add change * add change --------- Co-authored-by: Rachel UMWARI <[email protected]>
atlp-rwanda · Sep 13, 2023 · a4e8a2f · a4e8a2f
1 parent 92654a5
commit a4e8a2f
Show file tree

Hide file tree

Showing 12 changed files with 21,504 additions and 82 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Mutations/manageStudentMutations.tsx b/src/Mutations/manageStudentMutations.tsx
@@ -36,6 +36,7 @@ export const GET_TRAINEES_QUERY = gql`
         githubUsername
         resume
       }
+      id
       email
       team {
         name
@@ -331,6 +332,31 @@ export const INVITE_USER_MUTATION = gql`
     inviteUser(email: $email, orgToken: $orgToken, type: $type)
   }
 `;
+export const ACCEPT_EVENT_MUTATION = gql`
+  mutation RespondToEventInvitation(
+    $eventId: ID!
+    $status: String!
+    $reason: String!
+    $authToken: String
+  ) {
+    respondToEventInvitation(
+      eventId: $eventId
+      status: $status
+      reason: $reason
+      authToken: $authToken
+    ) {
+      title
+      timeToStart
+      timeToEnd
+      invitationStatus
+      invitationReason
+      hostName
+      guests
+      end
+      start
+    }
+  }
+`;
 export const GET_TEAM_QUERY = gql`
   query GetAllTeamInCohort($orgToken: String, $cohort: String) {
     getAllTeamInCohort(orgToken: $orgToken, cohort: $cohort) {
@@ -382,4 +408,4 @@ export const GET_TEAM_TRAINEE_QUERY = gql`
       }
     }
   }
-`;
+`;
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
@@ -14,6 +14,7 @@ import moment from 'moment';
 import { GET_TRAINEES_QUERY } from '../Mutations/manageStudentMutations';
 import { SEND_INVITATION_EMAIL } from '../Mutations/event';
 import Select from 'react-select';
+import { toast } from 'react-toastify';
 
 /* istanbul ignore next */
 
@@ -27,20 +28,25 @@ function formatDate(dateString: string | number | Date) {
   const day = `${date.getDate()}`.padStart(2, '0');
   return `${day}-${month}-${year}`;
 }
-const sendInvitationEmail = (email: String, title: String, start: any, hostName: String, timeToStart:any, timeToFinish:any) => {
+const sendInvitationEmail = (
+  email: String,
+  title: String,
+  start: any,
+  hostName: String,
+  timeToStart: any,
+  timeToFinish: any,
+) => {
   const [sendInvitationEmailMutation] = useMutation(SEND_INVITATION_EMAIL);
- 
+
   const formattedStartDate = formatDate(start);
   sendInvitationEmailMutation({
     variables: {
       email: email,
       title: title,
-      start:start,
+      start: start,
       hostName: hostName,
-      timeToStart:timeToStart,
-      timeToFinish:timeToFinish
-
-
+      timeToStart: timeToStart,
+      timeToFinish: timeToFinish,
     },
   })
     .then((response) => {
@@ -49,11 +55,9 @@ const sendInvitationEmail = (email: String, title: String, start: any, hostName:
     .catch((error) => {
       // Handle any errors
     });
-    console.log("dfgfsd", start)
+  console.log('dfgfsd', start);
 };
 
-
-
 const newEventTemp = {
   title: '',
   start: '',
@@ -64,8 +68,6 @@ const newEventTemp = {
   timeToFinish: '',
 };
 
-
-
 const Calendar = () => {
   useDocumentTitle('Calendar');
   const [openEvent, setOpenEvent] = useState(false);
@@ -135,8 +137,10 @@ const Calendar = () => {
       orgToken: organizationToken,
     },
   });
+
   /* istanbul ignore next */
   useEffect(() => {
+    console.log('!!!!!!', queryData);
     if (queryData?.getTrainees) {
       setUsers(queryData.getTrainees);
     }
@@ -145,7 +149,7 @@ const Calendar = () => {
   useEffect(() => {
     getTrainees();
   }, [queryData]);
-
+  console.log(users);
   const traineeOptions = users.map((user: any) => ({
     value: user.email,
     label: user.email,
@@ -155,11 +159,12 @@ const Calendar = () => {
   const handleUserChange = (event: any) => {
     if (event) {
       const selectedIds = event.map((user: any) => user.id);
+      console.log('Event ID', event);
       setSelectedUsers(selectedIds);
       console.log('Selected IDs:', selectedIds);
     }
   };
- /* istanbul ignore next */
+  /* istanbul ignore next */
   useEffect(() => {
     const fetchData = async () => {
       /* istanbul ignore next */
@@ -185,7 +190,6 @@ const Calendar = () => {
             title: one.title,
             timeToFinish: one.timeToEnd,
           }),
-
         );
         setData(all);
         console.log('all', all);
@@ -201,14 +205,14 @@ const Calendar = () => {
     setSelectedEvent(event);
   };
   // handle open & close event
-/* istanbul ignore next */
+  /* istanbul ignore next */
   const handleOpenEvent = (e: any) => {
     setEventDetails(e);
     setOpenEvent(!openEvent);
     console.log('guests', e.extendedProps);
   };
   // handle
-/* istanbul ignore next */
+  /* istanbul ignore next */
   const removeEvent = (e: any) => {
     e.preventDefault();
     const newState = !openEvent;
@@ -222,7 +226,7 @@ const Calendar = () => {
       <div
         onClick={() => handleOpenEvent(e.event)}
         data-html={true}
-        data-tip={`<div>${e.event.title}<br> ${e.event.extendedProps.hostName}  <br> ${e.event.extendedProps.timeToStart} - ${e.event.extendedProps.timeToFinish}  </div> `}
+        data-tip={`<div>${e.event.title}<br> ${e.event.extendedProps.hostName} <br>${e.event.extendedProps.guests}  <br> ${e.event.extendedProps.timeToStart} - ${e.event.extendedProps.timeToFinish}  </div> `}
         className=" bg-primary text-white max-w-full min-w-full overflow-auto text-xs md:text-sm"
       >
         <p className="px-3 py-1 ">{e.event.title}</p>
@@ -232,8 +236,7 @@ const Calendar = () => {
           {e.event.extendedProps.timeToStart} -{' '}
           {e.event.extendedProps.timeToFinish}
         </p>
-        <div className="absolute bottom-0 right-0 flex items-center">
-        </div>
+        <div className="absolute bottom-0 right-0 flex items-center"></div>
         <ReactTooltip data-html={true} />
       </div>
     );
@@ -249,41 +252,37 @@ const Calendar = () => {
     setAddEventModel(newState);
   };
   /* istanbul ignore next */
-  
+
   const handleAddEvent = (e: any) => {
     e.preventDefault();
-
-
     const updatedNewEvent = {
-       ...newEvent, 
-       guests: selectedUsers,
-
-     };
+      ...newEvent,
+      guests: selectedUsers,
+    };
     createEvent({
       variables: {
         ...updatedNewEvent,
         authToken: localStorage.getItem('auth_token'),
       },
     })
       .then(() => {
-
         // Send invitation email to the selected guest
         selectedUsers.forEach((guestEmail: string) => {
-          sendInvitationEmail(guestEmail, 
-            updatedNewEvent.title, 
+          sendInvitationEmail(
+            guestEmail,
+            updatedNewEvent.title,
             updatedNewEvent.start,
-            updatedNewEvent.hostName, 
-            updatedNewEvent.timeToStart, 
-            updatedNewEvent.timeToFinish);
+            updatedNewEvent.hostName,
+            updatedNewEvent.timeToStart,
+            updatedNewEvent.timeToFinish,
+          );
         });
-
       })
-
-
+
       .catch((error) => {
         console.log('errorrrr', error);
       });
-      console.log( moment( updatedNewEvent.start).format('YYYY-MM-DD'))
+    console.log(moment(updatedNewEvent.start).format('YYYY-MM-DD'));
 
     setData([...data, updatedNewEvent]);
     setNewEvent(newEventTemp);
@@ -314,10 +313,8 @@ const Calendar = () => {
             <form
               data-testid="handleAddEvent"
               className=" py-3 px-8"
-              /* istanbul ignore next */ 
-              onSubmit ={(e) =>
-                handleAddEvent(e)
-              }
+              /* istanbul ignore next */
+              onSubmit={(e) => handleAddEvent(e)}
             >
               <div className="input my-3 h-9 ">
                 <div className="grouped-input flex items-center h-full w-full rounded-md">
@@ -372,6 +369,7 @@ const Calendar = () => {
                     placeholderText={t('Start Date')}
                     style={{ marginRight: '10px' }}
                     selected={newEvent.start}
+                    minDate={new Date()}
                     onChange /* istanbul ignore next */={(start: any) =>
                       /* istanbul ignore next */ setNewEvent({
                         ...newEvent,
@@ -389,6 +387,7 @@ const Calendar = () => {
                     placeholderText={t('End Date')}
                     style={{ marginRight: '10px' }}
                     selected={newEvent.end}
+                    minDate={newEvent.start}
                     onChange=/* istanbul ignore next */ {(end: any) =>
                       /* istanbul ignore next */
                       setNewEvent({ ...newEvent, end })

diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
@@ -65,11 +65,7 @@ function DataTable({ data, columns, title, loading }: TableData) {
           <input
             defaultValue={globalFilter || ''}
             placeholder="Filter"
-<<<<<<< HEAD
             className="px-5 py-2 mt-4 font-sans text-xs border border-primary rounded outline-none dark:bg-neutral-600 dark:text-white w-52 md:w-96"
-=======
-            className="px-5 py-2 mt-4 font-sans text-xs border rounded outline-none border-primary dark:bg-dark-tertiary dark:text-white w-52 md:w-96"
->>>>>>> f2b9701 (github activity (#244))
             /* istanbul ignore next */
             onChange={(e) => setGlobalFilter(e.target.value)}
           />
@@ -141,4 +137,4 @@ function DataTable({ data, columns, title, loading }: TableData) {
   );
 }
 
-export default DataTable;
+export default DataTable;
diff --git a/src/components/Docs/OthersDocs.tsx b/src/components/Docs/OthersDocs.tsx
@@ -408,4 +408,4 @@ function TraineeDocs() {
   );
 }
 
-export default TraineeDocs;
+export default TraineeDocs;
diff --git a/src/components/tests/__snapshots__/TraineeAttendanceDetails.test.tsx.snap b/src/components/tests/__snapshots__/TraineeAttendanceDetails.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Trainee Viewing Detailed Attendance Rating Renders a Detailed Trainee A
     >
       <thead>
         <tr
-          className="text-gray-300  bg-gray-100  dark:bg-dark-tertiary"
+          className="text-gray-300  bg-gray-100  dark:bg-neutral-600"
         >
           <th
             className="lg:py-3 md:py-2 lg:px-3 md:px-2  text-left  text-[#6B7280] dark:text-dark-text-fill "
@@ -124,7 +124,7 @@ exports[`Trainee Viewing Detailed Attendance Rating Renders a Detailed Trainee A
       >
         <thead>
           <tr
-            className="text-gray-300 dark:text-white  bg-gray-100 dark:bg-dark-tertiary "
+            className="text-gray-300 dark:text-white  bg-gray-100 dark:bg-neutral-600 "
           >
             <th
               className="py-2 px-3 text-center text-[#6B7280] dark:text-dark-text-fill "
@@ -185,7 +185,7 @@ exports[`Trainee Viewing Detailed Attendance Rating Renders a Detailed Trainee A
       >
         <thead>
           <tr
-            className="text-gray-300 dark:text-dark-text-fill bg-gray-100 dark:bg-dark-tertiary"
+            className="text-gray-300 dark:text-dark-text-fill bg-gray-100 dark:bg-neutral-600"
           >
             <th
               className="py-2 px-3 text-center text-[#6B7280] dark:text-dark-text-fill  "

diff --git a/src/containers/Routes.tsx b/src/containers/Routes.tsx
@@ -44,9 +44,9 @@ function MainRoutes() {
     <div className="min-h-screen page-layout">
       <Suspense fallback={<Skeleton />}>
         <Routes>
-          <Route path="signup/org" element={<OrgRegister />} />
+          <Route path="/*" element={<DashRoutes />} />
           <Route
-            path="/login/org"
+            path="/"
             element={
               <>
                 <Header />
@@ -95,7 +95,6 @@ function MainRoutes() {
             <Route path="/pricing-form" element={<Pay />} />
           </Route>
           <Route path="*" element={<Error />} />
-          <Route path="/noredirect" element={<Noredirect />} />
         </Routes>
       </Suspense>
     </div>

diff --git a/src/hook/useDarkMode.ts b/src/hook/useDarkMode.ts
@@ -22,19 +22,8 @@ export const setThemeHeader = (newTheme: ThemeType, oldTheme?: ThemeType) => {
 };
 
 const useDarkMode = () => {
-<<<<<<< HEAD
   const [colorTheme, changeTheme] = useState<ThemeType>(getInitialTheme());
   setThemeHeader(colorTheme);
-=======
-  const [theme, setTheme] = useState(getInitialState);
-  const colorTheme = theme === 'dark' ? 'light' : 'dark';
-  useEffect(() => {
-    const root = window.document.documentElement;
-    root.classList.remove(colorTheme);
-    root.classList.add(theme);
-    root.setAttribute('data-theme', theme);
-  }, [theme]);
->>>>>>> f2b9701 (github activity (#244))
 
   return [colorTheme, changeTheme] as const;
 };

diff --git a/src/pages/About.tsx b/src/pages/About.tsx
@@ -297,4 +297,4 @@ function About({ styles }: any) {
     </div>
   );
 }
-export default About;
+export default About;
-Original file line number
+Diff line change
@@ Expand Up / @@ -408,4 +408,4 @@ function TraineeDocs() { @@
       );
     }
-    export default TraineeDocs;
+    export default TraineeDocs;