fix(client): fix issue with react-query cache

client/components/shared/Announcement.module.scss

@@ -1,7 +0,0 @@
-.container {
-  @apply z-10 fixed top-0 left-0 right-0;
-
-  strong {
-    @apply font-semibold;
-  }
-}

client/components/shared/Announcement.tsx

@@ -1,26 +0,0 @@
-import { AnnouncementOutlined } from '@mui/icons-material';
-import { Alert, Collapse } from '@mui/material';
-import { useState } from 'react';
-
-import { PRODUCT_HUNT_URL } from '@/constants/index';
-
-import styles from './Announcement.module.scss';
-
-const Announcement = () => {
-  const [open, setOpen] = useState(true);
-
-  return (
-    <div className={styles.container}>
-      <Collapse in={open}>
-        <Alert icon={<AnnouncementOutlined />} severity="info" onClose={() => setOpen(false)}>
-          <a href={PRODUCT_HUNT_URL} target="_blank" rel="noreferrer">
-            <strong>Reactive Resume is featured on Product Hunt.</strong> If you liked this app, please show your
-            support by <strong>upvoting</strong>!
-          </a>
-        </Alert>
-      </Collapse>
-    </div>
-  );
-};
-
-export default Announcement;

client/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@beam-australia/react-env": "^3.1.1",
     "@emotion/css": "^11.7.1",
-    "@emotion/react": "^11.8.1",
+    "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@hookform/resolvers": "2.8.8",
     "@monaco-editor/react": "^4.3.1",
@@ -25,7 +25,7 @@
     "joi": "^17.6.0",
     "lodash": "^4.17.21",
     "md5-hex": "^4.0.0",
-    "monaco-editor": "^0.32.1",
+    "monaco-editor": "^0.33.0",
     "nanoid": "^3.3.1",
     "next": "12.1.0",
     "next-i18next": "^10.5.0",
@@ -36,7 +36,7 @@
     "react-dnd-html5-backend": "^15.1.2",
     "react-dom": ">=17",
     "react-google-login": "^5.2.2",
-    "react-hook-form": "^7.27.1",
+    "react-hook-form": "^7.28.0",
     "react-hot-toast": "2.2.0",
     "react-hotkeys-hook": "^3.4.4",
     "react-icons": "^4.3.1",
@@ -59,14 +59,14 @@
     "@types/downloadjs": "^1.4.3",
     "@types/lodash": "^4.14.179",
     "@types/node": "17.0.21",
-    "@types/react": "17.0.39",
+    "@types/react": "17.0.40",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-redux": "^7.1.23",
     "@types/tailwindcss": "^3.0.9",
     "@types/uuid": "^8.3.4",
     "@types/webfontloader": "^1.6.34",
     "autoprefixer": "^10.4.2",
-    "eslint": "^8.10.0",
+    "eslint": "^8.11.0",
     "eslint-config-next": "12.1.0",
     "next-sitemap": "^2.5.7",
     "postcss": "^8.4.8",

client/pages/[username]/[slug]/build.tsx

@@ -42,6 +42,7 @@ const Build: NextPage<Props> = ({ username, slug }) => {
     `resume/${username}/${slug}`,
     () => fetchResumeByIdentifier({ username, slug }),
     {
+      cacheTime: 0,
       refetchOnMount: false,
       refetchOnReconnect: false,
       refetchOnWindowFocus: false,

client/pages/index.tsx

@@ -8,7 +8,6 @@ import { Trans, useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
 import Testimony from '@/components/landing/Testimony';
-import Announcement from '@/components/shared/Announcement';
 import Footer from '@/components/shared/Footer';
 import LanguageSwitcher from '@/components/shared/LanguageSwitcher';
 import Logo from '@/components/shared/Logo';
@@ -45,8 +44,6 @@ const Home: NextPage = () => {
 
   return (
     <main className={styles.container}>
-      <Announcement />
-
       <div className={styles.header}>
         <div className={styles.logo}>
           <Logo size={256} />

client/store/sagas/sync.ts

@@ -14,7 +14,7 @@ import {
   setResumeState,
 } from '../resume/resumeSlice';
 
-const DEBOUNCE_WAIT = 2500;
+const DEBOUNCE_WAIT = 1000;
 
 const debouncedSync = debounce((resume: Resume) => updateResume(resume), DEBOUNCE_WAIT);
 

client/utils/template.ts

@@ -43,7 +43,7 @@ type Separator = ', ' | ' / ' | ' | ';
 
 export const parseListItemPath = (item: ListItem, path: string | string[], separator: Separator = ', '): string => {
   if (isArray(path)) {
-    const value = path.map((_path) => get(item, _path));
+    const value = path.map((_path) => get(item, _path)).filter((x) => x);
 
     return value.join(separator);
   } else {