Merge pull request #85 from AshishBarvaliya/ghano/bugs

Fix: Ghano bugs - notifications, api stuff

src/components/header-menu.tsx

@@ -27,7 +27,10 @@ export const HeaderMenu: React.FC<HeaderMenuProps> = () => {
 
   const { data: notificationStatus } = useQuery(
     ["user", "notification", "new"],
-    () => getHasNewNotifications(session?.user.id)
+    () => getHasNewNotifications(),
+    {
+      enabled: !!router.query.id && !!session,
+    }
   );
   return (
     <DropdownMenu>

src/components/header-searchbar.tsx

@@ -8,7 +8,7 @@ import { Switch } from "./ui/switch";
 import { Label } from "./ui/label";
 import { INPUT_LIMIT } from "@/constants/website";
 
-const HeaderSearchBar = () => {
+const HeaderSearchBar = ({ forMobile = false }: { forMobile?: boolean }) => {
   const {
     setThemeSearchQuery,
     filterTags,
@@ -28,8 +28,8 @@ const HeaderSearchBar = () => {
   return (
     <>
       <SeachBar
-        id="font-search"
-        name="font-search"
+        id={forMobile ? "mobile-search" : "main-search"}
+        name={forMobile ? "mobile-search" : "main-search"}
         placeholder="Search by font, theme, user, or description"
         autoComplete="off"
         maxLength={INPUT_LIMIT.NAME_MAX}

src/components/notification-tile.tsx

@@ -5,9 +5,9 @@ import Typography from "./ui/typography";
 import moment from "moment";
 import { Button } from "./ui/button";
 import Link from "next/link";
-import LearningTemplate from "@/assets/templates/learning/learning-mini";
 import { generateAllShades } from "@/lib/utils";
 import { useRouter } from "next/router";
+import { getMiniTemplate } from "@/lib/templates";
 
 interface INotificationTileProps {
   notification: INotification;
@@ -62,6 +62,15 @@ export const NotificationTile: React.FC<INotificationTileProps> = ({
 }) => {
   const router = useRouter();
 
+  const colors = notification.theme
+    ? {
+        bg: notification?.theme?.color_1,
+        primary: notification?.theme?.color_2,
+        accent: notification?.theme?.color_3,
+        extra: notification?.theme?.color_4,
+      }
+    : null;
+
   return (
     <div
       key={notification.id}
@@ -110,31 +119,23 @@ export const NotificationTile: React.FC<INotificationTileProps> = ({
           </div>
         ) : (
           <div className="w-20 mr-2">
-            <LearningTemplate
-              id={`notification-${notification?.theme?.id}`}
-              colors={{
-                bg: "#ffffff",
-                primary: "#000000",
-                accent: "#eb4034",
-                extra: "#4334eb",
-              }}
-              shades={generateAllShades({
-                bg: "#ffffff",
-                primary: "#000000",
-                accent: "#eb4034",
-                extra: "#4334eb",
-              })}
-              fonts={{
-                primary: {
-                  fontFamily: "Poppins",
-                  weights: [],
-                },
-                secondary: {
-                  fontFamily: "Advent Pro",
-                  weights: [],
-                },
-              }}
-            />
+            {notification.theme && colors
+              ? getMiniTemplate(notification.theme.template, {
+                  id: `notification-${notification?.theme?.id}`,
+                  colors: colors,
+                  shades: generateAllShades(colors),
+                  fonts: {
+                    primary: {
+                      fontFamily: "Roboto",
+                      weights: [],
+                    },
+                    secondary: {
+                      fontFamily: "Poppins",
+                      weights: [],
+                    },
+                  },
+                })
+              : null}
           </div>
         )}
       </div>

src/components/profile-following.tsx

@@ -118,13 +118,13 @@ export const UserTile = ({
         <div className="flex flex-col ml-3 justify-between">
           <div className="flex items-center gap-2">
             {user.name}
-            {user?.level && (
+            {user?.level ? (
               <AwardIcon
                 className="h-3 w-3"
                 level={user.level}
                 info={USER_LEVELS[user.level].name}
               />
-            )}
+            ) : null}
           </div>
           <div className="flex items-center gap-2">
             <Typography element={"p"} as="p" className="text-xs">

src/components/profile-themes.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { getTags, getThemesByUserAndType } from "@/services/theme";
-import { GetThemeTileProps, TagProps } from "@/interfaces/theme";
+import { GetThemeTileProps } from "@/interfaces/theme";
 import { ThemeTile } from "@/components/theme-tile";
 import { useSession } from "next-auth/react";
 import { useHelpers } from "@/hooks/useHelpers";

src/components/sidebar.tsx

@@ -22,21 +22,30 @@ const Sidebar = ({
     {
       id: "explore",
       label: "Explore",
-      icon: <ZapIcon className="w-5 h-5" />,
+      getIcon: (isActive: boolean) => (
+        <ZapIcon className="w-4 h-4" strokeWidth={isActive ? 2.5 : 2} />
+      ),
     },
     ...(status === "authenticated"
       ? [
           {
             id: "foryou",
             label: "For you",
-            icon: <PartyPopper className="w-5 h-5" />,
+            getIcon: (isActive: boolean) => (
+              <PartyPopper
+                className="w-4 h-4"
+                strokeWidth={isActive ? 2.5 : 2}
+              />
+            ),
           },
         ]
       : []),
     {
       id: "popular",
       label: "Popular",
-      icon: <BarChart4 className="w-5 h-5" />,
+      getIcon: (isActive: boolean) => (
+        <BarChart4 className="w-4 h-4" strokeWidth={isActive ? 2.5 : 2} />
+      ),
     },
   ];
 
@@ -56,7 +65,7 @@ const Sidebar = ({
       ) : (
         <>
           <div className="flex md:hidden px-2 gap-1 py-1 pt-2">
-            <HeaderSearchBar />
+            <HeaderSearchBar forMobile />
           </div>
           <div className="flex overflow-y-auto md:flex-col flex-1 gap-2 py-2 md:py-4">
             {tabs.map((tab) => (
@@ -66,12 +75,12 @@ const Sidebar = ({
                   setThemeType(tab.id as "explore" | "foryou" | "popular")
                 }
                 className={cn(
-                  "flex gap-2.5 items-center py-2 px-2 md:px-8 mx-3 text-lg cursor-pointer hover:bg-primary/20",
+                  "flex gap-2.5 items-center py-2 px-2 md:px-9 mx-3 text-base cursor-pointer hover:bg-primary/20",
                   themeType === tab.id &&
-                    "bg-primary/60 shadow-md hover:bg-primary/60"
+                    "bg-primary/60 shadow-inset hover:bg-primary/60 font-[500]"
                 )}
               >
-                {tab.icon}
+                {tab.getIcon(themeType === tab.id)}
                 {tab.label}
               </div>
             ))}

src/components/ui/button.tsx

@@ -28,7 +28,7 @@ const buttonVariants = cva(
         default: "h-8 text-xs lg:h-10 px-4 lg:text-sm py-2",
         sm: "h-6 text-xs border-[0.5px] px-3",
         md: "h-8 px-4 text-xs border-[0.5px]",
-        lg: "h-10 text-sm px-6 lg:h-12 lg:px-8 lg:border lg:text-sm",
+        lg: "h-10 text-sm px-6 lg:h-12 lg:px-8 lg:border lg:text-base",
         icon: "h-10 w-10",
         circle: "p-3",
       },

src/interfaces/notification.ts

@@ -1,3 +1,5 @@
+import { TemplateType } from "./templates";
+
 export interface INotification {
   id: string;
   createdAt: Date;
@@ -7,6 +9,11 @@ export interface INotification {
   theme?: {
     id: string;
     name: string;
+    template: TemplateType;
+    color_1: string;
+    color_2: string;
+    color_3: string;
+    color_4: string;
   };
   notifier: {
     id: string;

src/pages/api/notifications.ts

@@ -52,6 +52,11 @@ export default async function handler(
             columns: {
               id: true,
               name: true,
+              template: true,
+              color_1: true,
+              color_2: true,
+              color_3: true,
+              color_4: true,
             },
           },
           notifier: {

src/pages/api/themes.ts

@@ -190,6 +190,8 @@ export default async function handler(
                 LEFT JOIN 
                     tag ON tag.id = themes_to_tags."tagId"
                 WHERE 
+                    theme."isPrivate" = false
+                  AND
                     theme."userId" = ${userId}
                 GROUP BY 
                     theme.id, "user".id
@@ -314,8 +316,7 @@ export default async function handler(
               LEFT JOIN 
                   tag ON tag.id = themes_to_tags."tagId"
               WHERE 
-                  theme."isPrivate" = false
-                  AND users_to_liked_themes."userId" = ${userId}
+                  users_to_liked_themes."userId" = ${userId}
               GROUP BY 
                   theme.id, "user".id
               ORDER BY 

src/pages/user/[id].tsx

@@ -57,9 +57,9 @@ export default function User() {
   );
   const { data: notificationStatus } = useQuery(
     ["user", "notification", "new"],
-    () => getHasNewNotifications(session?.user?.id),
+    () => getHasNewNotifications(),
     {
-      enabled: !!router.query.id,
+      enabled: !!router.query.id && !!session,
     }
   );
   const { mutate: mutateUserFollow, isLoading: isLoadingFollow } = useMutation({
@@ -221,11 +221,11 @@ export default function User() {
   ];
 
   const renderStats = () => (
-    <div className="flex flex-col w-full py-4 border-t border-border/20">
+    <div className="flex flex-col w-full py-3 border-t border-border/20">
       <Typography
         element="p"
         as="p"
-        className="text-primary-foreground/90 font-bold mb-2"
+        className="text-primary-foreground/90 font-bold mb-1"
       >
         Community Stats
       </Typography>
@@ -307,7 +307,7 @@ export default function User() {
               {user?.name || "-"}
             </Typography>
             {user && user.level !== undefined ? (
-              <div className="flex items-center">
+              <div className="flex items-center justify-center">
                 <Typography
                   element="p"
                   as="p"
@@ -328,7 +328,7 @@ export default function User() {
               />
             )}
           {renderButton(session, user)}
-          <div className="flex flex-col py-3 w-full px-4 text-sm">
+          <div className="flex flex-col py-2 w-full px-4 text-sm">
             <Typography
               element="p"
               as="p"
@@ -393,7 +393,7 @@ export default function User() {
             </div>
           </div>
         </div>
-        <div className="flex flex-col lg:mt-[56px] overflow-y-auto flex-1">
+        <div className="flex flex-col lg:mt-[56px] overflow-y-auto flex-1 mb-2">
           {navigations.find((tab) => tab.title === selectedNav)?.component}
         </div>
       </div>

src/services/user.ts

@@ -79,8 +79,7 @@ export const markNotificationAsRead = async () => {
   return response.data;
 };
 
-export const getHasNewNotifications = async (id?: string) => {
-  if (!id) return new Promise((_, reject) => reject());
+export const getHasNewNotifications = async () => {
   const apiUrl = `/api/notifications?new=1`;
   const response = await axios.get(apiUrl);
 

src/styles/globals.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Nosifer&display=swap');
 @tailwind base;
 @tailwind components;