solving bugs reported in GH issues

2025-11-18 18:51:32 +10:00 · 2020-07-24 21:54:48 +05:30
parent 586f2b1eca
commit f2a0b612d0
21 changed files with 827 additions and 979 deletions
--- a/src/components/builder/lists/List.js
+++ b/src/components/builder/lists/List.js
@ -1,5 +1,6 @@
 import { get, isEmpty } from 'lodash';
 import React, { memo, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 import { MdAdd } from 'react-icons/md';
 import ModalContext from '../../../contexts/ModalContext';
 import { useSelector } from '../../../contexts/ResumeContext';
@ -20,6 +21,7 @@ const List = ({
  hasDate,
  event,
 }) => {
+  const { i18n } = useTranslation();
  const items = useSelector(path, []);
  const { emitter } = useContext(ModalContext);

@ -46,6 +48,7 @@ const List = ({
                  formatDateRange({
                    startDate: x.startDate,
                    endDate: x.endDate,
+                    language: i18n.language,
                  }))
              }
              text={text || get(x, textPath, '')}
--- a/src/contexts/UserContext.js
+++ b/src/contexts/UserContext.js
@ -75,12 +75,17 @@ const UserProvider = ({ children }) => {

  const deleteAccount = async () => {
    const { currentUser } = firebase.auth();
+    const deleteUser = firebase.functions().httpsCallable('deleteUser');
+    deleteUser();
+
    try {
+      deleteUser();
      await currentUser.delete();
    } catch (e) {
-      toast.error(e.message);
-      await loginWithGoogle();
-      await currentUser.delete();
+      if (e.code === 'auth/requires-recent-login') {
+        await loginWithGoogle();
+        await currentUser.delete();
+      }
    } finally {
      logout();
      toast(
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@ -98,7 +98,7 @@
        "line1": "Address Line 1",
        "line2": "Address Line 2",
        "city": "City",
-        "pincode": "Pincode"
+        "pincode": "Zip Code"
      }
    },
    "social": {
--- a/src/modals/sections/EducationModal.js
+++ b/src/modals/sections/EducationModal.js
@ -25,7 +25,7 @@ const EducationModal = () => {
    field: Yup.string().required(t('shared.forms.validation.required')),
    degree: Yup.string(),
    gpa: Yup.string(),
-    startDate: Yup.date().required(t('shared.forms.validation.required')),
+    startDate: Yup.date(),
    endDate: Yup.date().when(
      'startDate',
      (startDate, yupSchema) =>
--- a/src/modals/sections/SkillModal.js
+++ b/src/modals/sections/SkillModal.js
@ -41,7 +41,7 @@ const SkillModal = () => {

            <Input
              label={t('builder.skills.level')}
-              placeholder="Fundamental Awareness"
+              placeholder="Novice"
              {...getFieldProps(formik, schema, 'level')}
            />
          </div>
--- a/src/modals/sections/SocialModal.js
+++ b/src/modals/sections/SocialModal.js
@ -8,7 +8,7 @@ import { getFieldProps } from '../../utils';
 import DataModal from '../DataModal';

 const initialValues = {
-  url: 'https://',
+  url: '',
  network: '',
  username: '',
 };
@ -55,7 +55,7 @@ const SocialModal = () => {
            <Input
              label={t('builder.social.url')}
              className="col-span-2"
-              placeholder="https://twitter.com/KingOKings"
+              placeholder="https://"
              {...getFieldProps(formik, schema, 'url')}
            />
          </div>
--- a/src/modals/sections/WorkModal.js
+++ b/src/modals/sections/WorkModal.js
@ -10,7 +10,7 @@ import DataModal from '../DataModal';
 const initialValues = {
  company: '',
  position: '',
-  website: 'https://',
+  website: '',
  startDate: '',
  endDate: '',
  summary: '',
@ -23,7 +23,7 @@ const WorkModal = () => {
    company: Yup.string().required(t('shared.forms.validation.required')),
    position: Yup.string().required(t('shared.forms.validation.required')),
    website: Yup.string().url(t('shared.forms.validation.url')),
-    startDate: Yup.date().required(t('shared.forms.validation.required')),
+    startDate: Yup.date(),
    endDate: Yup.date().when(
      'startDate',
      (startDate, yupSchema) =>
@ -64,7 +64,7 @@ const WorkModal = () => {

            <Input
              label={t('shared.forms.website')}
-              placeholder="https://example.com/"
+              placeholder="https://"
              {...getFieldProps(formik, schema, 'website')}
            />

--- a/src/templates/Castform.js
+++ b/src/templates/Castform.js
@ -57,6 +57,7 @@ const Castform = ({ data }) => {
        id="page"
        className="rounded"
        style={{
+          fontSize: 14,
          fontFamily: data.metadata.font,
          color: data.metadata.colors.text,
          backgroundColor: data.metadata.colors.background,
--- a/src/templates/blocks/Awards/AwardsA.js
+++ b/src/templates/blocks/Awards/AwardsA.js
@ -5,38 +5,39 @@ import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { safetyCheck } from '../../../utils';

-const AwardItem = (x) => {
-  const { i18n } = useTranslation();
-
-  return (
-    <div key={x.id}>
-      <div className="flex justify-between items-center">
-        <div className="flex flex-col text-left mr-2">
-          <h6 className="font-semibold">{x.title}</h6>
-          <span className="text-xs">{x.awarder}</span>
-        </div>
-        {x.date && (
-          <h6 className="text-xs font-medium text-right">
-            {dayjs(x.date)
-              .locale(i18n.language.substr(0, 2))
-              .format('MMMM YYYY')}
-          </h6>
-        )}
+const AwardItem = ({ item, i18n }) => (
+  <div>
+    <div className="flex justify-between items-center">
+      <div className="flex flex-col text-left mr-2">
+        <h6 className="font-semibold">{item.title}</h6>
+        <span className="text-xs">{item.awarder}</span>
      </div>
-      {x.summary && (
-        <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
+      {item.date && (
+        <h6 className="text-xs font-medium text-right">
+          {dayjs(item.date)
+            .locale(i18n.language.substr(0, 2))
+            .format('MMMM YYYY')}
+        </h6>
      )}
    </div>
-  );
-};
+    {item.summary && (
+      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
+    )}
+  </div>
+);

 const AwardsA = () => {
+  const { i18n } = useTranslation();
  const { data, heading: Heading } = useContext(PageContext);

  return safetyCheck(data.awards) ? (
    <div>
      <Heading>{data.awards.heading}</Heading>
-      <div className="grid gap-4">{data.awards.items.map(AwardItem)}</div>
+      <div className="grid gap-4">
+        {data.awards.items.map((x) => (
+          <AwardItem key={x.id} item={x} i18n={i18n} />
+        ))}
+      </div>
    </div>
  ) : null;
 };
--- a/src/templates/blocks/Certifications/CertificationsA.js
+++ b/src/templates/blocks/Certifications/CertificationsA.js
@ -5,39 +5,38 @@ import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { safetyCheck } from '../../../utils';

-const CertificationItem = (x) => {
-  const { i18n } = useTranslation();
-
-  return (
-    <div key={x.id}>
-      <div className="flex justify-between items-center">
-        <div className="flex flex-col text-left mr-2">
-          <h6 className="font-semibold">{x.title}</h6>
-          <span className="text-xs">{x.issuer}</span>
-        </div>
-        {x.date && (
-          <h6 className="text-xs font-medium text-right">
-            {dayjs(x.date)
-              .locale(i18n.language.substr(0, 2))
-              .format('MMMM YYYY')}
-          </h6>
-        )}
+const CertificationItem = ({ item, i18n }) => (
+  <div>
+    <div className="flex justify-between items-center">
+      <div className="flex flex-col text-left mr-2">
+        <h6 className="font-semibold">{item.title}</h6>
+        <span className="text-xs">{item.issuer}</span>
      </div>
-      {x.summary && (
-        <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
+      {item.date && (
+        <h6 className="text-xs font-medium text-right">
+          {dayjs(item.date)
+            .locale(i18n.language.substr(0, 2))
+            .format('MMMM YYYY')}
+        </h6>
      )}
    </div>
-  );
-};
+    {item.summary && (
+      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
+    )}
+  </div>
+);

 const CertificationsA = () => {
+  const { i18n } = useTranslation();
  const { data, heading: Heading } = useContext(PageContext);

  return safetyCheck(data.certifications) ? (
    <div>
      <Heading>{data.certifications.heading}</Heading>
      <div className="grid gap-4">
-        {data.certifications.items.map(CertificationItem)}
+        {data.certifications.items.map((x) => (
+          <CertificationItem key={x.id} item={x} i18n={i18n} />
+        ))}
      </div>
    </div>
  ) : null;
--- a/src/templates/blocks/Education/EducationA.js
+++ b/src/templates/blocks/Education/EducationA.js
@ -1,40 +1,50 @@
 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 = (x) => (
-  <div key={x.id}>
+const EducationItem = ({ item, i18n }) => (
+  <div>
    <div className="flex justify-between items-center">
      <div className="flex flex-col text-left mr-2">
-        <h6 className="font-semibold">{x.institution}</h6>
+        <h6 className="font-semibold">{item.institution}</h6>
        <span className="text-xs">
-          <strong>{x.degree}</strong> {x.field}
+          <strong>{item.degree}</strong> {item.field}
        </span>
      </div>
      <div className="flex flex-col items-end text-right">
-        {x.startDate && (
+        {item.startDate && (
          <h6 className="text-xs font-medium mb-1">
-            ({formatDateRange({ startDate: x.startDate, endDate: x.endDate })})
+            (
+            {formatDateRange({
+              startDate: item.startDate,
+              endDate: item.endDate,
+              language: i18n.language,
+            })}
+            )
          </h6>
        )}
-        <span className="text-sm font-medium">{x.gpa}</span>
+        <span className="text-sm font-medium">{item.gpa}</span>
      </div>
    </div>
-    {x.summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
+    {item.summary && (
+      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
    )}
  </div>
 );

 const EducationA = () => {
+  const { i18n } = useTranslation();
  const { data, heading: Heading } = useContext(PageContext);

  return safetyCheck(data.education) ? (
    <div>
      <Heading>{data.education.heading}</Heading>
      <div className="grid gap-4">
-        {data.education.items.map(EducationItem)}
+        {data.education.items.map((x) => (
+          <EducationItem key={x.id} item={x} i18n={i18n} />
+        ))}
      </div>
    </div>
  ) : null;
--- a/src/templates/blocks/Projects/ProjectsA.js
+++ b/src/templates/blocks/Projects/ProjectsA.js
@ -5,42 +5,43 @@ import ReactMarkdown from 'react-markdown';
 import PageContext from '../../../contexts/PageContext';
 import { safetyCheck } from '../../../utils';

-const ProjectItem = (x) => {
-  const { i18n } = useTranslation();
-
-  return (
-    <div key={x.id}>
-      <div className="flex justify-between items-center">
-        <div className="flex flex-col text-left mr-2">
-          <h6 className="font-semibold">{x.title}</h6>
-          {x.link && (
-            <a href={x.link} className="text-xs">
-              {x.link}
-            </a>
-          )}
-        </div>
-        {x.date && (
-          <h6 className="text-xs font-medium text-right">
-            {dayjs(x.date)
-              .locale(i18n.language.substr(0, 2))
-              .format('MMMM YYYY')}
-          </h6>
+const ProjectItem = ({ item, i18n }) => (
+  <div>
+    <div className="flex justify-between items-center">
+      <div className="flex flex-col text-left mr-2">
+        <h6 className="font-semibold">{item.title}</h6>
+        {item.link && (
+          <a href={item.link} className="text-xs">
+            {item.link}
+          </a>
        )}
      </div>
-      {x.summary && (
-        <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
+      {item.date && (
+        <h6 className="text-xs font-medium text-right">
+          {dayjs(item.date)
+            .locale(i18n.language.substr(0, 2))
+            .format('MMMM YYYY')}
+        </h6>
      )}
    </div>
-  );
-};
+    {item.summary && (
+      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
+    )}
+  </div>
+);

 const ProjectsA = () => {
+  const { i18n } = useTranslation();
  const { data, heading: Heading } = useContext(PageContext);

  return safetyCheck(data.projects) ? (
    <div>
      <Heading>{data.projects.heading}</Heading>
-      <div className="grid gap-4">{data.projects.items.map(ProjectItem)}</div>
+      <div className="grid gap-4">
+        {data.projects.items.map((x) => (
+          <ProjectItem key={x.id} item={x} i18n={i18n} />
+        ))}
+      </div>
    </div>
  ) : null;
 };
--- a/src/templates/blocks/Work/WorkA.js
+++ b/src/templates/blocks/Work/WorkA.js
@ -1,34 +1,46 @@
 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 = (x) => (
-  <div key={x.id}>
+const WorkItem = ({ item, i18n }) => (
+  <div>
    <div className="flex justify-between items-center">
      <div className="flex flex-col text-left mr-2">
-        <h6 className="font-semibold">{x.company}</h6>
-        <span className="text-xs">{x.position}</span>
+        <h6 className="font-semibold">{item.company}</h6>
+        <span className="text-xs">{item.position}</span>
      </div>
-      {x.startDate && (
+      {item.startDate && (
        <h6 className="text-xs font-medium text-right">
-          ({formatDateRange({ startDate: x.startDate, endDate: x.endDate })})
+          (
+          {formatDateRange({
+            startDate: item.startDate,
+            endDate: item.endDate,
+            language: i18n.language,
+          })}
+          )
        </h6>
      )}
    </div>
-    {x.summary && (
-      <ReactMarkdown className="markdown mt-2 text-sm" source={x.summary} />
+    {item.summary && (
+      <ReactMarkdown className="markdown mt-2 text-sm" source={item.summary} />
    )}
  </div>
 );

 const WorkA = () => {
+  const { i18n } = useTranslation();
  const { data, heading: Heading } = useContext(PageContext);

  return safetyCheck(data.work) ? (
    <div>
      <Heading>{data.work.heading}</Heading>
-      <div className="grid gap-4">{data.work.items.map(WorkItem)}</div>
+      <div className="grid gap-4">
+        {data.work.items.map((x) => (
+          <WorkItem key={x.id} item={x} i18n={i18n} />
+        ))}
+      </div>
    </div>
  ) : null;
 };
--- a/src/utils/index.js
+++ b/src/utils/index.js
@ -22,15 +22,13 @@ export const isFileImage = (file) => {
  return file && acceptedImageTypes.includes(file.type);
 };

-export const formatDateRange = ({ startDate, endDate }) => {
-  const { i18n } = useTranslation();
-
+export const formatDateRange = ({ startDate, endDate, language }) => {
  const start = `${dayjs(startDate)
-    .locale(i18n.language.substr(0, 2))
+    .locale(language.substr(0, 2))
    .format('MMMM YYYY')}`;

  const end = dayjs(endDate).isValid()
-    ? `${dayjs(endDate).locale(i18n.language.substr(0, 2)).format('MMMM YYYY')}`
+    ? `${dayjs(endDate).locale(language.substr(0, 2)).format('MMMM YYYY')}`
    : 'Present';

  return `${start} - ${end}`;