added multiple fonts selection feature

Vivekv634 · Nov 11, 2024 · e3ff43d · e3ff43d · vercel · Nov 11, 2024
1 parent b149344
commit e3ff43d
Show file tree

Hide file tree

Showing 20 changed files with 131 additions and 70 deletions.
diff --git a/app/(pages)/account/settings/Settings.jsx b/app/(pages)/account/settings/Settings.jsx
@@ -12,7 +12,7 @@ import {
 } from '@/components/ui/select';
 import { useSelector } from 'react-redux';
 import axios from 'axios';
-import { pages, themes } from '@/app/utils/pageData';
+import { fonts, pages, themes } from '@/app/utils/pageData';
 import { Separator } from '@/components/ui/separator';
 import { Button } from '@/components/ui/button';
 import ImportNotesDialog from '@/app/components/ImportNotesDialog';
@@ -25,6 +25,9 @@ import ButtonLoader from '@/app/components/ButtonLoader';
 const SettingsComponent = () => {
   const isDesktop = useMediaHook({ screenWidth: 768 });
   const { user } = useSelector((state) => state.note);
+  const [userFont, setUserFont] = useState(
+    user && user?.userData && user?.userData?.font,
+  );
   const [userTheme, setUserTheme] = useState(
     user && user?.userData && user?.userData?.theme,
   );
@@ -36,6 +39,7 @@ const SettingsComponent = () => {
   const [exportallnotes, setExportAllNotes] = useState(false);
   const [exportallnotebooks, setExportAllNotebooks] = useState(false);
   const [themeLoading, setThemeLoading] = useState(false);
+  const [fontLoading, setFontLoading] = useState(false);
   const toast = useCustomToast();
 
   const handleThemeChange = async () => {
@@ -61,6 +65,29 @@ const SettingsComponent = () => {
     }
   };
 
+  const handleFontChange = async () => {
+    try {
+      setFontLoading(true);
+      const body = { font: userFont };
+      await axios.put(
+        `${process.env.API}/api/account/update/${user.userID}`,
+        body,
+      );
+      setFontLoading(false);
+      toast({
+        description: 'Font updated!',
+        color: userTheme,
+      });
+    } catch (error) {
+      console.error(error);
+      setFontLoading(false);
+      toast({
+        description: 'Oops! something went wrong. Try again later!',
+        variant: 'destructive',
+      });
+    }
+  };
+
   const handleDefaultHomePageChange = async (page) => {
     await axios.put(`${process.env.API}/api/account/update/${user.userID}`, {
       defaultHomePage: page,
@@ -122,11 +149,50 @@ const SettingsComponent = () => {
             <Button
               className={cn(user?.userData?.theme === userTheme && 'hidden')}
               onClick={handleThemeChange}
+              disabled={themeLoading}
             >
               <ButtonLoader loading={themeLoading} label="Save" />
             </Button>
           </div>
         </div>
+        <Separator className="my-2" />
+        <div className="flex justify-between items-start">
+          <div>
+            <Label className="block font-bold">Font</Label>
+            <Label className="text-muted-foreground">
+              Set your prefered font
+            </Label>
+          </div>
+          <div className="flex flex-col items-end gap-2">
+            <Select
+              value={userFont}
+              onValueChange={(e) => {
+                setUserFont(e);
+                document.body.style.fontFamily = e;
+              }}
+            >
+              <SelectTrigger className="w-fit gap-1">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {Object.keys(fonts).map((font) => {
+                  return (
+                    <SelectItem value={font} key={font}>
+                      {fonts[font]}
+                    </SelectItem>
+                  );
+                })}
+              </SelectContent>
+            </Select>
+            <Button
+              className={cn(user?.userData?.font === userFont && 'hidden')}
+              onClick={handleFontChange}
+              disabled={fontLoading}
+            >
+              <ButtonLoader loading={fontLoading} label="Save" />
+            </Button>
+          </div>
+        </div>
       </div>
       <div className="p-2 border rounded-md mt-2 mx-1">
         <Label className="text-2xl font-extrabold block">Behaviour</Label>

diff --git a/app/(pages)/login/Login.jsx b/app/(pages)/login/Login.jsx
@@ -135,7 +135,7 @@ const LoginComponent = () => {
                 {error}
               </Label>
               <Label className="flex justify-end underline hover:no-underline font-semibold my-1">
-                <DialogTrigger className="border">
+                <DialogTrigger>
                   <span>Forgot password?</span>
                 </DialogTrigger>
               </Label>

diff --git a/app/api/(auth)/register/route.js b/app/api/(auth)/register/route.js
@@ -33,7 +33,6 @@ const registerUser = async (name, email, password) => {
     authID: response.user.uid,
     notesDocID: notesResponse.id,
   };
-  console.log(userData);
   await addDoc(userDB, userData);
   return response;
 };
diff --git a/app/api/notes/create/route.js b/app/api/notes/create/route.js
@@ -3,7 +3,7 @@ import { doc, runTransaction } from 'firebase/firestore';
 import { NextResponse } from 'next/server';
 import { headers } from 'next/headers';
 import { notes } from '@/app/utils/schema';
-import { uid } from 'uid';
+import { v4 } from 'uuid';
 
 export async function POST(request) {
   const notesDocID = headers().get('notesDocID');
@@ -17,14 +17,13 @@ export async function POST(request) {
       if (docSnap.exists()) {
         const data = docSnap.data();
         if (!data.notes) {
-          notes = [{ ...notesData, ...body, noteID: uid() }];
-          transaction.set(docRef, { ...data, notes: notes });
+          notes = [{ ...notesData, ...body, noteID: v4() }];
         } else {
           notes = data.notes;
-          notes.push({ ...notesData, ...body, noteID: uid() });
-          transaction.update(docRef, { notes: notes });
+          notes.push({ ...notesData, ...body, noteID: v4() });
         }
       }
+      transaction.update(docRef, { notes: notes });
     });
     return NextResponse.json({ result: notes }, { status: 201 });
   } catch (error) {

diff --git a/app/api/utils/create-autonote-notes/route.js b/app/api/utils/create-autonote-notes/route.js
@@ -4,7 +4,7 @@ import { titleFormatter } from '@/app/utils/titleFormatter';
 import { db } from '@/firebase.config';
 import { collection, getDocs, writeBatch } from 'firebase/firestore';
 import { NextResponse } from 'next/server';
-import { uid } from 'uid';
+import { v4 } from 'uuid';
 import nodemailer from 'nodemailer';
 import { emailTemplate } from '@/app/utils/emailTemplate';
 
@@ -50,7 +50,7 @@ export async function PATCH(request) {
           if (lastNoteGenerationTime <= currentTime) {
             newNoteBody = {
               ...Notes,
-              noteID: uid(),
+              noteID: v4(),
               title: titleFormatter(
                 autoNote.titleFormat,
                 autoNote.noteGenerated,

diff --git a/app/components/AutoNoteContextMenu.jsx b/app/components/AutoNoteContextMenu.jsx
@@ -21,7 +21,7 @@ import axios from 'axios';
 import { useSelector } from 'react-redux';
 import { titleFormatter } from '../utils/titleFormatter';
 import { useRouter } from 'next/navigation';
-import { uid } from 'uid';
+import { v4 } from 'uuid';
 import { useCustomToast } from './SendToast';
 
 const AutoNoteContextMenu = ({ autoNote, children }) => {
@@ -72,7 +72,7 @@ const AutoNoteContextMenu = ({ autoNote, children }) => {
       );
       const newNoteBody = {
         ...notes,
-        noteID: uid(),
+        noteID: v4(),
         title: noteTitle,
         notebook_ref_id: autoNote.autoNoteNotebookID,
         body: autoNote.template || '{}',

diff --git a/app/components/ChangeEmailDialog.jsx b/app/components/ChangeEmailDialog.jsx
@@ -96,7 +96,7 @@ export default function ChangeEmailDialog({ open, setOpen }) {
             >
               Cancel
             </DialogClose>
-            <Button type="submit">
+            <Button disabled={loading} type="submit">
               <ButtonLoader loading={loading} label="Send Verification Email" />
             </Button>
           </DialogFooter>

diff --git a/app/components/ChangePasswordDialog.jsx b/app/components/ChangePasswordDialog.jsx
@@ -74,6 +74,7 @@ export default function ChangePasswordDialog({ open, setOpen }) {
             <Button
               type="submit"
               className={cn(!isDesktop && 'my-2', 'font-semibold')}
+              disabled={loading}
             >
               <ButtonLoader loading={loading} label="Send Verification Email" />
             </Button>

diff --git a/app/components/EditAutoNoteDialog.jsx b/app/components/EditAutoNoteDialog.jsx
@@ -25,7 +25,7 @@ import { cn } from '@/lib/utils';
 import { useMediaHook } from '@/app/utils/mediaHook';
 import { Separator } from '@/components/ui/separator';
 import { Checkbox } from '@/components/ui/checkbox';
-import { uid } from 'uid';
+import { v4 } from 'uuid';
 import axios from 'axios';
 import { useSelector } from 'react-redux';
 import { useCustomToast } from './SendToast';
@@ -91,7 +91,7 @@ const EditAutoNoteDialog = ({
         updatedNotebooks = { ...notebooks };
 
       if (newNotebookFlag) {
-        const notebookID = uid();
+        const notebookID = v4();
         autoNoteBody['autoNoteNotebookID'] = notebookID;
         Object.keys(updatedNotebooks).forEach((notebook_id) => {
           if (notebook_id === autoNote.autoNoteNotebookID) {

diff --git a/app/components/NewAutoNoteDialog.jsx b/app/components/NewAutoNoteDialog.jsx
@@ -25,7 +25,7 @@ import {
 } from '@/components/ui/select';
 import { autoNote, generationPeriod, state } from '../utils/schema';
 import { Separator } from '@/components/ui/separator';
-import { uid } from 'uid';
+import { v4 } from 'uuid';
 import { Checkbox } from '@/components/ui/checkbox';
 import { auth } from '@/firebase.config';
 import VerifyEmailTemplate from './VerifyEmailTemplate';
@@ -112,7 +112,7 @@ const NewAutoNoteDialog = ({ setOpen }) => {
       setLoading(true);
       let newAutoNoteBody = {
           ...autoNote,
-          autoNoteID: uid(),
+          autoNoteID: v4(),
           autoNoteName: autoNoteName,
           titleFormat: titleFormat,
           state: autoNoteState,
@@ -122,7 +122,7 @@ const NewAutoNoteDialog = ({ setOpen }) => {
         updatedNotebookArray = [],
         updatedNotebooks = { ...notebooks };
       if (Object.keys(notebooks).length == 0 || newNotebookFlag) {
-        const notebookID = uid();
+        const notebookID = v4();
         newAutoNoteBody['autoNoteNotebookID'] = notebookID;
         newNotebookBody = {
           notebookID: notebookID,

diff --git a/app/components/NewNoteDialog.jsx b/app/components/NewNoteDialog.jsx
@@ -20,7 +20,7 @@ import { Input } from '@/components/ui/input';
 import { useSelector } from 'react-redux';
 import { Button, buttonVariants } from '@/components/ui/button';
 import { useMediaHook } from '@/app/utils/mediaHook';
-import { uid } from 'uid';
+import { v4 } from 'uuid';
 import axios from 'axios';
 import { auth } from '@/firebase.config';
 import VerifyEmailTemplate from './VerifyEmailTemplate';
@@ -80,7 +80,7 @@ export default function NewNoteDialog() {
     e.preventDefault();
     try {
       setLoading(true);
-      const notebookID = uid();
+      const notebookID = v4();
       const TAGS = tags.split(' ').filter((tag) => tag.trim());
       let noteBody = {
           tagsList: TAGS,

diff --git a/app/components/NoteConfigDialog.jsx b/app/components/NoteConfigDialog.jsx
@@ -22,7 +22,7 @@ import { Input } from '@/components/ui/input';
 import { useSelector } from 'react-redux';
 import { Button, buttonVariants } from '@/components/ui/button';
 import { useMediaHook } from '@/app/utils/mediaHook';
-import { uid } from 'uid';
+import { v4 } from 'uuid';
 import axios from 'axios';
 import { useCustomToast } from './SendToast';
 import ButtonLoader from './ButtonLoader';
@@ -86,7 +86,7 @@ export default function NoteConfigDialog({
     e.preventDefault();
     try {
       setLoading(true);
-      const notebookID = uid();
+      const notebookID = v4();
       const TAGS = tags.split(' ').filter((tag) => tag.trim());
       let noteBody = {
           title: noteTitle,

diff --git a/app/components/NoteContextMenu.jsx b/app/components/NoteContextMenu.jsx
@@ -14,7 +14,7 @@ import { useRouter } from 'next/navigation';
 import { useDispatch, useSelector } from 'react-redux';
 import { setDeletedNotes, setNotes } from '../redux/slices/noteSlice';
 import axios from 'axios';
-import { uid } from 'uid';
+import { v4 } from 'uuid';
 import { usePathname } from 'next/navigation';
 import {
   ContextMenu,
@@ -169,7 +169,7 @@ export default function NoteContextMenu({ children, notesDocID, note }) {
       let body = {
         ...note,
         updation_date: new Date().toString(),
-        noteID: uid(),
+        noteID: v4(),
       };
       const duplicateResponse = await axios.post(
         `${process.env.API}/api/notes/create`,

diff --git a/app/components/Sidebar.jsx b/app/components/Sidebar.jsx
@@ -62,6 +62,8 @@ const Menubar = () => {
           `${process.env.API}/api/account/user/${userID}`,
         );
         if (response?.data?.result) {
+          document.body.style.fontFamily =
+            response?.data?.result?.userData?.font;
           dispatch(setUser(response?.data?.result));
           return response?.data?.result;
         }

diff --git a/app/layout.js b/app/layout.js
@@ -1,5 +1,5 @@
 import './globals.css';
-import { Poppins } from 'next/font/google';
+import { Poppins, Ubuntu_Mono } from 'next/font/google';
 import LayoutComponent from './LayoutComponent';
 import { cn } from '@/lib/utils';
 
@@ -8,6 +8,11 @@ const poppins = Poppins({
   weight: ['500', '600', '700'],
 });
 
+const ubuntu = Ubuntu_Mono({
+  subsets: ['latin'],
+  weight: ['400', '700'],
+});
+
 export const metadata = {
   title: 'AutoBook',
   description:
@@ -49,23 +54,13 @@ export default function RootLayout({ children }) {
   return (
     <html
       lang="en"
-      className={cn(poppins.className, 'scroll-smooth')}
+      className={cn(ubuntu.className, poppins.className, 'scroll-smooth')}
       suppressHydrationWarning
     >
       <head>
-        {/* <meta property="og:title" content="Your App Title" /> */}
-        {/* <meta */}
-        {/*   property="og:description" */}
-        {/*   content="Description of your application." */}
-        {/* /> */}
-        {/* <meta property="og:image" content="/og-image.png" /> */}
-        {/* <meta property="og:type" content="website" /> */}
-        {/* <meta property="og:url" content="https://yourappdomain.com" /> */}
-        {/* <meta name="twitter:card" content="summary_large_image" /> */}
         <link rel="manifest" href="/manifest.json" />
         <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
         <link rel="icon" href="/icons/favicon.ico" />
-        <meta name="theme-color" content="#90cdf4" />
       </head>
       <body className="selection:bg-fuchsia-300 selection:text-zinc-900">
         <LayoutComponent>{children}</LayoutComponent>

diff --git a/app/utils/pageData.js b/app/utils/pageData.js
@@ -488,8 +488,13 @@ export const whyChooseUsCards = [
     src: 'https://plus.unsplash.com/premium_photo-1719933739393-6086c1bfa4cc?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
   },
   {
-    title:
-      'Fast and Lightweight: Optimized as a PWA for quick loading and offline access.',
+    title: 'Fast and Lightweight: Optimized as a PWA for quick loading.',
     src: 'https://plus.unsplash.com/premium_photo-1673460448921-9126847f12b8?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
   },
 ];
+export const fonts = {
+  'sans-serif': 'Sans Serif',
+  sans: 'Sans',
+  poppins: 'Poppins',
+  ubuntu: 'Ubuntu',
+};