- fix language issue when printing

database.rules.json

@@ -9,6 +9,7 @@
       }
     },
     "users": {
+      ".indexOn": "isAnonymous",
       "$uid": {
         ".read": "$uid === auth.uid",
         ".write": "$uid === auth.uid"

gatsby-browser.js

@@ -4,7 +4,6 @@ import 'firebase/analytics';
 import 'firebase/auth';
 import 'firebase/database';
 import 'firebase/functions';
-import 'firebase/storage';
 import React from 'react';
 import { DatabaseProvider } from './src/contexts/DatabaseContext';
 import { ModalProvider } from './src/contexts/ModalContext';

gatsby-ssr.js

@@ -2,4 +2,3 @@ import 'firebase/analytics';
 import 'firebase/auth';
 import 'firebase/database';
 import 'firebase/functions';
-import 'firebase/storage';

src/contexts/ResumeContext.js

@@ -85,7 +85,7 @@ const ResumeProvider = ({ children }) => {
           return newState;
 
         case 'change_language':
-          newState = clone(state);
+          newState = set(clone(state), 'metadata.language', payload);
           items = get(
             i18next.getDataByLanguage(payload),
             'translation.builder.sections',
@@ -94,6 +94,7 @@ const ResumeProvider = ({ children }) => {
             has(newState, `${key}.heading`) &&
               set(newState, `${key}.heading`, items[key]);
           });
+          debouncedUpdateResume(newState);
           return newState;
 
         case 'reset_layout':

src/templates/blocks/Awards/AwardsA.js

@@ -1,11 +1,9 @@
-import dayjs from 'dayjs';
 import React, { memo, useContext } from 'react';
-import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
-import { safetyCheck } from '../../../utils';
+import { formatDate, safetyCheck } from '../../../utils';
 
-const AwardItem = ({ item, i18n }) => (
+const AwardItem = ({ item, language }) => (
   <div>
     <div className="flex justify-between items-center">
       <div className="flex flex-col text-left mr-2">
@@ -14,9 +12,7 @@ const AwardItem = ({ item, i18n }) => (
       </div>
       {item.date && (
         <h6 className="text-xs font-medium text-right">
-          {dayjs(item.date)
+          {formatDate({ date: item.date, language })}
-            .locale(i18n.language.substr(0, 2))
-            .format('MMMM YYYY')}
         </h6>
       )}
     </div>
@@ -27,7 +23,6 @@ const AwardItem = ({ item, i18n }) => (
 );
 
 const AwardsA = () => {
-  const { i18n } = useTranslation();
   const { data, heading: Heading } = useContext(PageContext);
 
   return safetyCheck(data.awards) ? (
@@ -35,7 +30,7 @@ const AwardsA = () => {
       <Heading>{data.awards.heading}</Heading>
       <div className="grid gap-4">
         {data.awards.items.map((x) => (
-          <AwardItem key={x.id} item={x} i18n={i18n} />
+          <AwardItem key={x.id} item={x} language={data.metadata.language} />
         ))}
       </div>
     </div>

src/templates/blocks/Certifications/CertificationsA.js

@@ -1,11 +1,9 @@
-import dayjs from 'dayjs';
 import React, { memo, useContext } from 'react';
-import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
-import { safetyCheck } from '../../../utils';
+import { formatDate, safetyCheck } from '../../../utils';
 
-const CertificationItem = ({ item, i18n }) => (
+const CertificationItem = ({ item, language }) => (
   <div>
     <div className="flex justify-between items-center">
       <div className="flex flex-col text-left mr-2">
@@ -14,9 +12,7 @@ const CertificationItem = ({ item, i18n }) => (
       </div>
       {item.date && (
         <h6 className="text-xs font-medium text-right">
-          {dayjs(item.date)
+          {formatDate({ date: item.date, language })}
-            .locale(i18n.language.substr(0, 2))
-            .format('MMMM YYYY')}
         </h6>
       )}
     </div>
@@ -27,7 +23,6 @@ const CertificationItem = ({ item, i18n }) => (
 );
 
 const CertificationsA = () => {
-  const { i18n } = useTranslation();
   const { data, heading: Heading } = useContext(PageContext);
 
   return safetyCheck(data.certifications) ? (
@@ -35,7 +30,11 @@ const CertificationsA = () => {
       <Heading>{data.certifications.heading}</Heading>
       <div className="grid gap-4">
         {data.certifications.items.map((x) => (
-          <CertificationItem key={x.id} item={x} i18n={i18n} />
+          <CertificationItem
+            key={x.id}
+            item={x}
+            language={data.metadata.language}
+          />
         ))}
       </div>
     </div>

src/templates/blocks/Education/EducationA.js

@@ -1,10 +1,9 @@
 import React, { memo, useContext } from 'react';
-import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { formatDateRange, safetyCheck } from '../../../utils';
 
-const EducationItem = ({ item, i18n }) => (
+const EducationItem = ({ item, language }) => (
   <div>
     <div className="flex justify-between items-center">
       <div className="flex flex-col text-left mr-2">
@@ -20,7 +19,7 @@ const EducationItem = ({ item, i18n }) => (
             {formatDateRange({
               startDate: item.startDate,
               endDate: item.endDate,
-              language: i18n.language,
+              language,
             })}
             )
           </h6>
@@ -35,7 +34,6 @@ const EducationItem = ({ item, i18n }) => (
 );
 
 const EducationA = () => {
-  const { i18n } = useTranslation();
   const { data, heading: Heading } = useContext(PageContext);
 
   return safetyCheck(data.education) ? (
@@ -43,7 +41,11 @@ const EducationA = () => {
       <Heading>{data.education.heading}</Heading>
       <div className="grid gap-4">
         {data.education.items.map((x) => (
-          <EducationItem key={x.id} item={x} i18n={i18n} />
+          <EducationItem
+            key={x.id}
+            item={x}
+            language={data.metadata.language}
+          />
         ))}
       </div>
     </div>

src/templates/blocks/Projects/ProjectsA.js

@@ -1,11 +1,9 @@
-import dayjs from 'dayjs';
 import React, { memo, useContext } from 'react';
-import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
-import { safetyCheck } from '../../../utils';
+import { formatDate, safetyCheck } from '../../../utils';
 
-const ProjectItem = ({ item, i18n }) => (
+const ProjectItem = ({ item, language }) => (
   <div>
     <div className="flex justify-between items-center">
       <div className="flex flex-col text-left mr-2">
@@ -18,9 +16,7 @@ const ProjectItem = ({ item, i18n }) => (
       </div>
       {item.date && (
         <h6 className="text-xs font-medium text-right">
-          {dayjs(item.date)
+          {formatDate({ date: item.date, language })}
-            .locale(i18n.language.substr(0, 2))
-            .format('MMMM YYYY')}
         </h6>
       )}
     </div>
@@ -31,7 +27,6 @@ const ProjectItem = ({ item, i18n }) => (
 );
 
 const ProjectsA = () => {
-  const { i18n } = useTranslation();
   const { data, heading: Heading } = useContext(PageContext);
 
   return safetyCheck(data.projects) ? (
@@ -39,7 +34,7 @@ const ProjectsA = () => {
       <Heading>{data.projects.heading}</Heading>
       <div className="grid gap-4">
         {data.projects.items.map((x) => (
-          <ProjectItem key={x.id} item={x} i18n={i18n} />
+          <ProjectItem key={x.id} item={x} language={data.metadata.language} />
         ))}
       </div>
     </div>

src/templates/blocks/Work/WorkA.js

@@ -1,10 +1,9 @@
 import React, { memo, useContext } from 'react';
-import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { formatDateRange, safetyCheck } from '../../../utils';
 
-const WorkItem = ({ item, i18n }) => (
+const WorkItem = ({ item, language }) => (
   <div>
     <div className="flex justify-between items-center">
       <div className="flex flex-col text-left mr-2">
@@ -17,7 +16,7 @@ const WorkItem = ({ item, i18n }) => (
           {formatDateRange({
             startDate: item.startDate,
             endDate: item.endDate,
-            language: i18n.language,
+            language,
           })}
           )
         </h6>
@@ -30,7 +29,6 @@ const WorkItem = ({ item, i18n }) => (
 );
 
 const WorkA = () => {
-  const { i18n } = useTranslation();
   const { data, heading: Heading } = useContext(PageContext);
 
   return safetyCheck(data.work) ? (
@@ -38,7 +36,7 @@ const WorkA = () => {
       <Heading>{data.work.heading}</Heading>
       <div className="grid gap-4">
         {data.work.items.map((x) => (
-          <WorkItem key={x.id} item={x} i18n={i18n} />
+          <WorkItem key={x.id} item={x} language={data.metadata.language} />
         ))}
       </div>
     </div>

src/utils/dayjs.js

@@ -5,6 +5,7 @@ import 'dayjs/locale/en';
 import 'dayjs/locale/es';
 import 'dayjs/locale/fi';
 import 'dayjs/locale/fr';
+import 'dayjs/locale/ja';
 import 'dayjs/locale/kn';
 import 'dayjs/locale/nl';
 import 'dayjs/locale/pt';

src/utils/index.js

@@ -22,7 +22,11 @@ export const isFileImage = (file) => {
   return file && acceptedImageTypes.includes(file.type);
 };
 
-export const formatDateRange = ({ startDate, endDate, language }) => {
+export const formatDate = ({ date, language = 'en' }) => {
+  return dayjs(date).locale(language.substr(0, 2)).format('MMMM YYYY');
+};
+
+export const formatDateRange = ({ startDate, endDate, language = 'en' }) => {
   const start = `${dayjs(startDate)
     .locale(language.substr(0, 2))
     .format('MMMM YYYY')}`;