Revamp: Journal Page

package.json

@@ -23,10 +23,11 @@
     "i18next": "^21.6.11",
     "i18next-browser-languagedetector": "^6.1.3",
     "moment": "^2.30.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-i18next": "^11.15.4",
-    "react-router-dom": "^6.2.1",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.23.1",
     "recoil": "^0.7.1",
     "regenerator-runtime": "^0.13.9",
     "sass": "^1.50.0",

src/App.tsx

@@ -1,28 +1,32 @@
-import { notification } from "antd";
 import React, { useEffect } from "react";
+import { notification } from "antd";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { darkModeState, displayToast, backupRestoreModal, languageChangeModal } from "@store";
 
 import lightAvatar from "@assets/images/mainAvatarLight.svg";
 import darkAvatar from "@assets/images/mainAvatarDark.svg";
 
-import { FAQPage } from "@pages/FAQPage/FAQPage";
-import { MyTimePage } from "@pages/MyTimePage/MyTimePage";
-import { LandingPage } from "@pages/LandingPage/LandingPage";
-import { FeedbackPage } from "@pages/FeedbackPage/FeedbackPage";
-import { ShowFeelingsPage } from "@pages/ShowFeelingsPage/ShowFeelingsPage";
 import GoalsPage from "@pages/GoalsPage/GoalsPage";
 import InvitePage from "@pages/InvitePage/InvitePage";
 import InvestPage from "@pages/InvestPage/InvestPage";
 import BackupRestoreModal from "@components/BackupRestoreModal";
+
+import { FAQPage } from "@pages/FAQPage/FAQPage";
+import { MyTimePage } from "@pages/MyTimePage/MyTimePage";
+import { LandingPage } from "@pages/LandingPage/LandingPage";
+import { FeedbackPage } from "@pages/FeedbackPage/FeedbackPage";
+import { FeelingsPage } from "@pages/FeelingsPage/FeelingsPage";
 import { LanguageChangeModal } from "@components/LanguageChangeModal/LanguageChangeModal";
+
+import useApp from "./hooks/useApp";
+import AppLayout from "./layouts/AppLayout";
 import { themeState } from "./store/ThemeState";
 
 import "./global.scss";
 import "./customize.scss";
 import "./override.scss";
-import useApp from "./hooks/useApp";
+import "./short.scss";
 
 const Context = React.createContext({ name: "Default" });
 
@@ -77,7 +81,14 @@ const App = () => {
             )}
             <Route path="/Feedback" element={<FeedbackPage />} />
             <Route path="/MyGoals" element={<GoalsPage />} />
-            <Route path="/MyJournal" element={<ShowFeelingsPage />} />
+            <Route
+              path="/MyJournal"
+              element={
+                <AppLayout title="myJournal">
+                  <FeelingsPage />
+                </AppLayout>
+              }
+            />
             <Route path="*" element={<GoalsPage />} />
             <Route path="/ZinZenFAQ" element={<FAQPage />} />
             <Route path="/invite/:id" element={<InvitePage />} />

src/Interfaces/ICommon.ts

@@ -23,7 +23,7 @@ export interface ZModalProps {
   children: React.ReactNode;
   type?: string;
   open: boolean;
-  onCancel: () => void;
+  onCancel?: () => void;
   width?: number;
   style?: React.CSSProperties;
 }
@@ -35,10 +35,10 @@ export interface ColorPaletteProps {
 
 export interface ISubHeaderProps {
   title: string;
-  leftNav: () => void;
-  rightNav: () => void;
-  showLeftNav: boolean;
-  showRightNav: boolean;
+  leftNav?: () => void;
+  rightNav?: () => void;
+  showLeftNav?: boolean;
+  showRightNav?: boolean;
 }
 
 export interface IconProps {

src/Providers.tsx

@@ -0,0 +1,14 @@
+import React, { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { RecoilRoot } from "recoil";
+
+const Providers = ({ children }: { children: ReactNode }) => {
+  const queryClient = new QueryClient();
+  return (
+    <RecoilRoot>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </RecoilRoot>
+  );
+};
+
+export default Providers;

src/api/FeelingsAPI/index.ts

@@ -1,106 +1,28 @@
 import { db, IFeelingItem } from "@models";
-import { getJustDate } from "@src/utils";
 
-export const getFeeling = async (feelingId: number) => {
-  db.transaction("rw", db.feelingsCollection, async () => {
-    const feeling = await db.feelingsCollection.get(feelingId);
-    return feeling;
-  }).catch((e) => {
-    console.log(e.stack || e);
-  });
+export const fetchFeelings = async ({ pageParam = 1 }) => {
+  const limit = 6;
+  const offset = (pageParam - 1) * limit;
+  const feelings = await db.feelingsCollection.orderBy("date").reverse().offset(offset).limit(limit).toArray();
+  return { feelings, nextPage: pageParam + 1 };
 };
 
-export const removeFeeling = (feelingId: number) => {
-  db.transaction("rw", db.feelingsCollection, async () => {
-    await db.feelingsCollection.delete(feelingId);
-  }).catch((e) => {
-    console.log(e.stack || e);
-  });
+export const addFeeling = async (feeling: Omit<IFeelingItem, "id">) => {
+  return db.feelingsCollection.add(feeling);
 };
 
-export const getAllFeelings = async () => {
-  const allFeelings = await db.feelingsCollection.toArray();
-  return allFeelings;
+export const getFeelings = async () => {
+  return db.feelingsCollection.toArray();
 };
 
-export const getFeelingsOnDate = async (date: Date) => {
-  let feelingsList: IFeelingItem[] = [];
-  await db
-    .transaction("rw", db.feelingsCollection, async () => {
-      feelingsList = await db.feelingsCollection.where("date").equals(date).toArray();
-    })
-    .catch((e) => {
-      console.log(e.stack || e);
-    });
-  return feelingsList;
+export const getFeelingById = async (id: number) => {
+  return db.feelingsCollection.get(id);
 };
 
-export const addFeelingWithNote = async (
-  feelingName: string,
-  feelingCategory: string,
-  feelingDate: Date,
-  feelingNote: string,
-) => {
-  // const currentDate = getJustDate(new Date());
-  const feelingDateFormatted = getJustDate(feelingDate);
-  const currentDateFeelings = await getFeelingsOnDate(feelingDate);
-  const checkFeelings = (feeling: IFeelingItem) => feeling.content === feelingName;
-  if (currentDateFeelings.some(checkFeelings)) {
-    return;
-  }
-  db.transaction("rw", db.feelingsCollection, async () => {
-    await db.feelingsCollection.add({
-      content: feelingName,
-      date: feelingDateFormatted,
-      category: feelingCategory,
-      note: feelingNote,
-    });
-  }).catch((e) => {
-    console.log(e.stack || e);
-  });
+export const updateFeeling = async (id: number, updatedFeeling: Partial<IFeelingItem>) => {
+  return db.feelingsCollection.update(id, updatedFeeling);
 };
 
-export const addFeeling = async (feelingName: string, feelingCategory: string, feelingDate: Date) => {
-  // const currentDate = getJustDate(new Date());
-  const feelingDateFormatted = getJustDate(feelingDate);
-  const currentDateFeelings = await getFeelingsOnDate(feelingDate);
-  const checkFeelings = (feeling: IFeelingItem) => feeling.content === feelingName;
-  if (currentDateFeelings.some(checkFeelings)) {
-    return;
-  }
-  db.transaction("rw", db.feelingsCollection, async () => {
-    await db.feelingsCollection.add({ content: feelingName, date: feelingDateFormatted, category: feelingCategory });
-  }).catch((e) => {
-    console.log(e.stack || e);
-  });
-};
-
-export const addFeelingNote = async (feelingId: number, InputNote: string) => {
-  const feeling = await db.feelingsCollection.get(feelingId);
-  const updatedFeeling = { ...feeling, note: InputNote };
-  let updatedFeelingsList;
-  await db
-    .transaction("rw", db.feelingsCollection, async () => {
-      await db.feelingsCollection.put(updatedFeeling as IFeelingItem);
-      updatedFeelingsList = await getAllFeelings();
-    })
-    .catch((e) => {
-      console.log(e.stack || e);
-    });
-  return updatedFeelingsList;
-};
-
-export const removeFeelingNote = async (feelingId: number) => {
-  const feeling = await db.feelingsCollection.get(feelingId);
-  delete feeling?.note;
-  let updatedFeelingsList;
-  await db
-    .transaction("rw", db.feelingsCollection, async () => {
-      await db.feelingsCollection.put(feeling!);
-      updatedFeelingsList = await getAllFeelings();
-    })
-    .catch((e) => {
-      console.log(e.stack || e);
-    });
-  return updatedFeelingsList;
+export const deleteFeeling = async (id: number) => {
+  return db.feelingsCollection.delete(id);
 };

src/common/LoadingContainer.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import zinzenLightLogo from "@assets/images/zinzenLightLogo.svg";
+
+const LoadingContainer = () => {
+  return (
+    <div
+      className="place-middle f-col gap-8"
+      style={{
+        gap: 8,
+        height: "100%",
+      }}
+    >
+      <img className="logo-flip" src={zinzenLightLogo} alt="ZinZen" />
+      <p>loading...</p>
+    </div>
+  );
+};
+
+export default LoadingContainer;

src/common/SubHeader.tsx

@@ -6,7 +6,7 @@ import chevronLeftIcon from "@assets/images/chevronLeft.svg";
 
 import { ISubHeaderProps } from "@src/Interfaces/ICommon";
 
-const NavBtn = ({ show, className, handleClick }: { show: boolean; className: string; handleClick: () => void }) => (
+const NavBtn = ({ show, className, handleClick }: { show?: boolean; className: string; handleClick?: () => void }) => (
   <Col span={6} style={{ textAlign: "center", alignSelf: "center" }}>
     {show && (
       <button type="button" className="ordinary-element" onClick={handleClick}>