fix(client): 🐛 attempt to fix the one-off date issue

use utc functions from dayjs to correspond to the same date on the server
AmruthPillai · Jul 31, 2022 · 5197f95 · 5197f95
1 parent 1c19062
commit 5197f95
Show file tree

Hide file tree

Showing 14 changed files with 33 additions and 25 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -21,5 +21,8 @@
   "i18n-ally.namespace": true,
   "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
   "i18n-ally.sortKeys": true,
-  "scss.validate": false
+  "scss.validate": false,
+  "conventionalCommits.scopes": [
+    "client"
+  ]
 }
diff --git a/client/components/build/RightSidebar/sections/Settings.tsx b/client/components/build/RightSidebar/sections/Settings.tsx
@@ -48,7 +48,7 @@ const Settings = () => {
   const dateConfig: DateConfig = useMemo(() => get(resume, 'metadata.date'), [resume]);
 
   const isDarkMode = useMemo(() => theme === 'dark', [theme]);
-  const exampleString = useMemo(() => `Eg. ${dayjs().format(dateConfig.format)}`, [dateConfig.format]);
+  const exampleString = useMemo(() => `Eg. ${dayjs().utc().format(dateConfig.format)}`, [dateConfig.format]);
   const themeString = useMemo(() => (isDarkMode ? 'Matte Black Everything' : 'As bright as your future'), [isDarkMode]);
 
   const { mutateAsync: loadSampleDataMutation } = useMutation<Resume, ServerError, LoadSampleDataParams>(

diff --git a/client/components/shared/ResumeInput.tsx b/client/components/shared/ResumeInput.tsx
@@ -63,7 +63,7 @@ const ResumeInput: React.FC<Props> = ({ type = 'text', label, path, className, m
         renderInput={(params) => <TextField {...params} error={false} className={className} />}
         onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
           isEmpty(keyboardInputValue) && onChangeValue('');
-          date && dayjs(date).isValid() && onChangeValue(date.toISOString());
+          date && dayjs(date).utc().isValid() && onChangeValue(date.toISOString());
         }}
       />
     );

diff --git a/client/modals/builder/sections/AwardModal.tsx b/client/modals/builder/sections/AwardModal.tsx
@@ -134,7 +134,7 @@ const AwardModal: React.FC = () => {
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).isValid() && field.onChange(date.toISOString());
+                date && dayjs(date).utc().isValid() && field.onChange(date.toISOString());
               }}
               renderInput={(params) => (
                 <TextField

diff --git a/client/modals/builder/sections/CertificateModal.tsx b/client/modals/builder/sections/CertificateModal.tsx
@@ -134,7 +134,7 @@ const CertificateModal: React.FC = () => {
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).isValid() && field.onChange(date.toISOString());
+                date && dayjs(date).utc().isValid() && field.onChange(date.toISOString());
               }}
               renderInput={(params) => (
                 <TextField

diff --git a/client/modals/builder/sections/CustomModal.tsx b/client/modals/builder/sections/CustomModal.tsx
@@ -150,7 +150,7 @@ const CustomModal: React.FC = () => {
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).isValid() && field.onChange(date.toISOString());
+                date && dayjs(date).utc().isValid() && field.onChange(date.toISOString());
               }}
               renderInput={(params) => (
                 <TextField
@@ -174,7 +174,7 @@ const CustomModal: React.FC = () => {
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).isValid() && field.onChange(date.toISOString());
+                date && dayjs(date).utc().isValid() && field.onChange(date.toISOString());
               }}
               renderInput={(params) => (
                 <TextField

diff --git a/client/modals/builder/sections/EducationModal.tsx b/client/modals/builder/sections/EducationModal.tsx
@@ -173,7 +173,7 @@ const EducationModal: React.FC = () => {
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).isValid() && field.onChange(date.toISOString());
+                date && dayjs(date).utc().isValid() && field.onChange(date.toISOString());
               }}
               renderInput={(params) => (
                 <TextField
@@ -197,7 +197,7 @@ const EducationModal: React.FC = () => {
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).isValid() && field.onChange(date.toISOString());
+                date && dayjs(date).utc().isValid() && field.onChange(date.toISOString());
               }}
               renderInput={(params) => (
                 <TextField

diff --git a/client/modals/builder/sections/ProjectModal.tsx b/client/modals/builder/sections/ProjectModal.tsx
@@ -143,7 +143,7 @@ const ProjectModal: React.FC = () => {
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).isValid() && field.onChange(date.toISOString());
+                date && dayjs(date).utc().isValid() && field.onChange(date.toISOString());
               }}
               renderInput={(params) => (
                 <TextField
@@ -167,7 +167,7 @@ const ProjectModal: React.FC = () => {
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).isValid() && field.onChange(date.toISOString());
+                date && dayjs(date).utc().isValid() && field.onChange(date.toISOString());
               }}
               renderInput={(params) => (
                 <TextField

diff --git a/client/modals/builder/sections/PublicationModal.tsx b/client/modals/builder/sections/PublicationModal.tsx
@@ -134,7 +134,7 @@ const PublicationModal: React.FC = () => {
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).isValid() && field.onChange(date.toISOString());
+                date && dayjs(date).utc().isValid() && field.onChange(date.toISOString());
               }}
               renderInput={(params) => (
                 <TextField

diff --git a/client/modals/builder/sections/VolunteerModal.tsx b/client/modals/builder/sections/VolunteerModal.tsx
@@ -140,7 +140,7 @@ const VolunteerModal: React.FC = () => {
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).isValid() && field.onChange(date.toISOString());
+                date && dayjs(date).utc().isValid() && field.onChange(date.toISOString());
               }}
               renderInput={(params) => (
                 <TextField
@@ -164,7 +164,7 @@ const VolunteerModal: React.FC = () => {
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).isValid() && field.onChange(date.toISOString());
+                date && dayjs(date).utc().isValid() && field.onChange(date.toISOString());
               }}
               renderInput={(params) => (
                 <TextField

diff --git a/client/modals/builder/sections/WorkModal.tsx b/client/modals/builder/sections/WorkModal.tsx
@@ -140,7 +140,7 @@ const WorkModal: React.FC = () => {
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).isValid() && field.onChange(date.toISOString());
+                date && dayjs(date).utc().isValid() && field.onChange(date.toISOString());
               }}
               renderInput={(params) => (
                 <TextField
@@ -164,7 +164,7 @@ const WorkModal: React.FC = () => {
               views={['year', 'month', 'day']}
               onChange={(date: Date | null, keyboardInputValue: string | undefined) => {
                 isEmpty(keyboardInputValue) && field.onChange('');
-                date && dayjs(date).isValid() && field.onChange(date.toISOString());
+                date && dayjs(date).utc().isValid() && field.onChange(date.toISOString());
               }}
               renderInput={(params) => (
                 <TextField

diff --git a/client/utils/date.ts b/client/utils/date.ts
@@ -19,7 +19,7 @@ export const dateFormatOptions: string[] = [
   'YYYY',
 ];
 
-export const getRelativeTime = (timestamp: dayjs.ConfigType): string => dayjs(timestamp).toNow(true);
+export const getRelativeTime = (timestamp: dayjs.ConfigType): string => dayjs(timestamp).utc().toNow(true);
 
 export const formatDateString = (date: string | DateRange, formatStr: string): string | null => {
   const presentString = i18n?.t<string>('common.date.present') ?? '';
@@ -28,9 +28,9 @@ export const formatDateString = (date: string | DateRange, formatStr: string): s
 
   // If `date` is a string
   if (isString(date)) {
-    if (!dayjs(date).isValid()) return null;
+    if (!dayjs(date).utc().utc().isValid()) return null;
 
-    return dayjs(date).format(formatStr);
+    return dayjs(date).utc().format(formatStr);
   }
 
   // If `date` is a DateRange

diff --git a/client/wrappers/DateWrapper.tsx b/client/wrappers/DateWrapper.tsx
@@ -1,12 +1,14 @@
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import utc from 'dayjs/plugin/utc';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
 const DateWrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const { locale } = useRouter();
 
   useEffect(() => {
+    dayjs.extend(utc);
     dayjs.extend(relativeTime);
 
     // Locales

diff --git a/server/src/integrations/integrations.service.ts b/server/src/integrations/integrations.service.ts
@@ -15,6 +15,7 @@ import {
 } from '@reactive-resume/schema';
 import csv from 'csvtojson';
 import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
 import { readFile, unlink } from 'fs/promises';
 import { cloneDeep, get, isEmpty, merge } from 'lodash';
 import StreamZip from 'node-stream-zip';
@@ -28,7 +29,9 @@ import { ResumeService } from '@/resume/resume.service';
 
 @Injectable()
 export class IntegrationsService {
-  constructor(private resumeService: ResumeService) {}
+  constructor(private resumeService: ResumeService) {
+    dayjs.extend(utc);
+  }
 
   async linkedIn(userId: number, path: string): Promise<ResumeEntity> {
     let archive: StreamZip.StreamZipAsync;
@@ -39,7 +42,7 @@ export class IntegrationsService {
       const resume: Partial<Resume> = cloneDeep(defaultState);
 
       // Basics
-      const timestamp = dayjs().format(FILENAME_TIMESTAMP);
+      const timestamp = dayjs().utc().format(FILENAME_TIMESTAMP);
       merge<Partial<Resume>, DeepPartial<Resume>>(resume, {
         name: `Imported from LinkedIn (${timestamp})`,
         slug: `imported-from-linkedin-${timestamp}`,
@@ -269,7 +272,7 @@ export class IntegrationsService {
       const resume: Partial<Resume> = cloneDeep(defaultState);
 
       // Metadata
-      const timestamp = dayjs().format(FILENAME_TIMESTAMP);
+      const timestamp = dayjs().utc().format(FILENAME_TIMESTAMP);
       merge<Partial<Resume>, DeepPartial<Resume>>(resume, {
         name: `Imported from JSON Resume (${timestamp})`,
         slug: `imported-from-json-resume-${timestamp}`,
@@ -604,7 +607,7 @@ export class IntegrationsService {
       const resume: Partial<Resume> = cloneDeep(jsonResume);
 
       // Metadata
-      const timestamp = dayjs().format(FILENAME_TIMESTAMP);
+      const timestamp = dayjs().utc().format(FILENAME_TIMESTAMP);
       merge<Partial<Resume>, DeepPartial<Resume>>(resume, {
         name: `Imported from Reactive Resume (${timestamp})`,
         slug: `imported-from-reactive-resume-${timestamp}`,
@@ -625,7 +628,7 @@ export class IntegrationsService {
       const resume: Partial<Resume> = cloneDeep(defaultState);
 
       // Metadata
-      const timestamp = dayjs().format(FILENAME_TIMESTAMP);
+      const timestamp = dayjs().utc().format(FILENAME_TIMESTAMP);
       merge<Partial<Resume>, DeepPartial<Resume>>(resume, {
         name: `Imported from Reactive Resume V2 (${timestamp})`,
         slug: `imported-from-reactive-resume-v2-${timestamp}`,
@@ -948,6 +951,6 @@ export class IntegrationsService {
   }
 
   private parseDate = (date: string): string => {
-    return isEmpty(date) ? '' : dayjs(date).toISOString();
+    return isEmpty(date) ? '' : dayjs(date).utc().toISOString();
   };
 }