Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-17 02:01:29 +10:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
use utc functions from dayjs to correspond to the same date on the server
This commit is contained in:
Amruth Pillai
2022-07-31 02:13:08 -08:00
parent 1c19062c63
commit 5197f954c0
14 changed files with 33 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/build/RightSidebar/sections/Settings.tsx
View File

@ -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>(

2
client/components/shared/ResumeInput.tsx
View File

@ -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());
}}
/>
);

2
client/modals/builder/sections/AwardModal.tsx
View File

@ -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

2
client/modals/builder/sections/CertificateModal.tsx
View File

@ -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

4
client/modals/builder/sections/CustomModal.tsx
View File

@ -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

4
client/modals/builder/sections/EducationModal.tsx
View File

@ -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

4
client/modals/builder/sections/ProjectModal.tsx
View File

@ -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

2
client/modals/builder/sections/PublicationModal.tsx
View File

@ -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

4
client/modals/builder/sections/VolunteerModal.tsx
View File

@ -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

4
client/modals/builder/sections/WorkModal.tsx
View File

@ -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

6
client/utils/date.ts
View File

@ -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

2
client/wrappers/DateWrapper.tsx
View File

@ -1,5 +1,6 @@
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';
@ -7,6 +8,7 @@ const DateWrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) =
const { locale } = useRouter();
useEffect(() => {
dayjs.extend(utc);
dayjs.extend(relativeTime);
// Locales