Merge pull request #99 from AshishBarvaliya/dev

Feat: like bug fix + isdark removed mode added

__tests__/api/feedback.test.ts

@@ -85,7 +85,6 @@ describe("Feedback API Endpoint", () => {
       color_3_reason: "Reason 3",
       color_4_reason: "Reason 4",
       prompt: "Prompt",
-      isDark: false,
       feedback: "Feedback",
     };
 
@@ -109,7 +108,6 @@ describe("Feedback API Endpoint", () => {
       color_3_reason: "Reason 3",
       color_4_reason: "Reason 4",
       prompt: "Prompt",
-      isDark: false,
       feedback: "Feedback",
     };
 

__tests__/api/generate.test.ts

@@ -75,7 +75,7 @@ describe("Generate API Endpoint", () => {
   it("should return 400 if details are missing", async () => {
     req.body = {
       details: null,
-      isDark: false,
+      mode: "Dark",
     };
 
     await handler(req, res);
@@ -89,7 +89,7 @@ describe("Generate API Endpoint", () => {
   it("should return 404 if user is not found", async () => {
     req.body = {
       details: "test details",
-      isDark: false,
+      mode: "Dark",
     };
     (db.query.users.findFirst as jest.Mock).mockResolvedValue(null);
 
@@ -104,7 +104,7 @@ describe("Generate API Endpoint", () => {
   it("should return 400 if pupa is insufficient", async () => {
     req.body = {
       details: "test details",
-      isDark: false,
+      mode: "Dark",
     };
     (db.query.users.findFirst as jest.Mock).mockResolvedValue({
       pupa: 0,
@@ -122,7 +122,7 @@ describe("Generate API Endpoint", () => {
   it("should return 400 if content is flagged by OpenAI", async () => {
     req.body = {
       details: "test details",
-      isDark: false,
+      mode: "Dark",
     };
     (db.query.users.findFirst as jest.Mock).mockResolvedValue({
       pupa: 1,
@@ -142,7 +142,7 @@ describe("Generate API Endpoint", () => {
   it("should return 500 for GPT response error", async () => {
     req.body = {
       details: "test details",
-      isDark: false,
+      mode: "Dark",
     };
     (db.query.users.findFirst as jest.Mock).mockResolvedValue({
       pupa: 1,
@@ -171,7 +171,7 @@ describe("Generate API Endpoint", () => {
   it("should return 500 for json parse error", async () => {
     req.body = {
       details: "test details",
-      isDark: false,
+      mode: "Dark",
     };
     (db.query.users.findFirst as jest.Mock).mockResolvedValue({
       pupa: 1,
@@ -200,7 +200,7 @@ describe("Generate API Endpoint", () => {
   it("should return 500 for server error", async () => {
     req.body = {
       details: "test details",
-      isDark: false,
+      mode: "Dark",
     };
     (db.query.users.findFirst as jest.Mock).mockResolvedValue({
       pupa: 1,
@@ -233,7 +233,7 @@ describe("Generate API Endpoint", () => {
     };
     req.body = {
       details: "test details",
-      isDark: false,
+      mode: "Dark",
     };
     (db.query.users.findFirst as jest.Mock).mockResolvedValue({
       pupa: 1,

__tests__/api/theme/inappropriate.test.ts

@@ -94,7 +94,6 @@ describe("Theme Inappropriate API Endpoint", () => {
 
     await handler(req, res);
 
-    console.log(res.json);
     expect(db.insert).toHaveBeenCalled();
     expect(res.status).toHaveBeenCalledWith(500);
     expect(res.json).toHaveBeenCalledWith({

src/components/generate-theme-dialog.tsx

@@ -11,7 +11,6 @@ import {
 } from "./ui/dialog";
 import { Label } from "./ui/label";
 import { useEffect, useState } from "react";
-import { Switch } from "./ui/switch";
 import axios from "axios";
 import { Cross2Icon, ReloadIcon } from "@radix-ui/react-icons";
 import { Textarea } from "./ui/textarea";
@@ -20,13 +19,16 @@ import { cn } from "@/lib/utils";
 import { useRouter } from "next/router";
 import { useHelpers } from "@/hooks/useHelpers";
 import { useSession } from "next-auth/react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "./ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 import { INPUT_LIMIT } from "@/constants/website";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import { GeneratedThemeProps } from "@/interfaces/theme";
 
 interface GenerateThemeDialogProps {
   open: boolean;
@@ -35,7 +37,7 @@ interface GenerateThemeDialogProps {
 
 interface FormDataProps {
   prompt: string;
-  isDark: boolean;
+  mode: GeneratedThemeProps["mode"];
 }
 
 export const GenerateThemeDialog: React.FC<GenerateThemeDialogProps> = ({
@@ -55,7 +57,7 @@ export const GenerateThemeDialog: React.FC<GenerateThemeDialogProps> = ({
   const [isPromptError, setIsPromptError] = useState(false);
   const [data, setData] = useState<FormDataProps>({
     prompt: "",
-    isDark: false,
+    mode: "Default",
   });
 
   const isAuthenticatedIsActived =
@@ -66,21 +68,21 @@ export const GenerateThemeDialog: React.FC<GenerateThemeDialogProps> = ({
     e.preventDefault();
     axios
       .post("/api/generate", {
-        isDark: data.isDark,
+        mode: data.mode,
         details: data.prompt,
       })
       .then((res) => {
         setGeneratedTheme({
           ...res.data,
-          isDark: data.isDark,
+          mode: data.mode,
           prompt: data.prompt,
         });
         setOpen(false);
         setGenerateDialogDefaultValues(undefined);
         setIsPromptError(false);
         router.push("/themes/generated");
         setLoading(false);
-        setData({ prompt: "", isDark: false });
+        setData({ prompt: "", mode: "Default" });
       })
       .catch((error) => {
         addToast({
@@ -99,7 +101,7 @@ export const GenerateThemeDialog: React.FC<GenerateThemeDialogProps> = ({
     if (generateDialogDefaultValues) {
       setData(generateDialogDefaultValues);
     } else {
-      setData({ prompt: "", isDark: false });
+      setData({ prompt: "", mode: "Default" });
       setIsPromptError(false);
     }
   }, [generateDialogDefaultValues]);
@@ -171,26 +173,33 @@ export const GenerateThemeDialog: React.FC<GenerateThemeDialogProps> = ({
                     }
                   }}
                 />
-                <div className="flex items-center space-x-2 mt-5">
-                  <Switch
-                    id="isDark"
-                    name="isDark"
-                    className="border border-border cursor-pointer"
-                    checked={data.isDark}
-                    onCheckedChange={() =>
-                      setData((prev) => ({
-                        ...prev,
-                        isDark: !data.isDark,
-                      }))
-                    }
-                  />
-                  <Label
-                    htmlFor="isDark"
-                    className="cursor-pointer flex items-center"
-                  >
-                    Dark mode
-                  </Label>
-                </div>
+                <Label htmlFor="mode" className="mt-4 mb-2">
+                  Mode
+                </Label>
+                <Select
+                  value={data.mode}
+                  onValueChange={(value) =>
+                    setData((prev) => ({
+                      ...prev,
+                      mode: value as FormDataProps["mode"],
+                    }))
+                  }
+                >
+                  <SelectTrigger className="md:w-[150px] h-9 text-sm">
+                    <SelectValue placeholder="Select" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value={"Default"} className="text-sm">
+                      Default
+                    </SelectItem>
+                    <SelectItem value={"Light"} className="text-sm">
+                      Light
+                    </SelectItem>
+                    <SelectItem value={"Dark"} className="text-sm">
+                      Dark
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
               </div>
               <div className="mt-8 flex justify-end gap-4">
                 <Button

src/components/header-menu.tsx

@@ -67,7 +67,7 @@ export const HeaderMenu: React.FC<HeaderMenuProps> = () => {
               {session?.user.name}
             </p>
             <p className="text-xs leading-none text-muted-foreground">
-              {session?.user.email}
+              {session?.user?.email}
             </p>
           </div>
         </DropdownMenuLabel>

src/components/profile-purchases.tsx

@@ -75,7 +75,7 @@ export default function ProfilePurchases() {
             <span className="text-primary-foreground font-bold px-1">
               {e.pupa}
             </span>
-            promts was made on
+            credits was made on
             <span className="text-secondary-foreground px-1">
               {moment().format("MMMM Do YYYY, h:mm a")}
             </span>

src/components/profile-themes.tsx

@@ -190,7 +190,7 @@ export default function ProfileThemes() {
           <SortThemes setSortItem={setSortItem} />
         </div>
       </div>
-      <div className="flex gap-4 px-4 h-full lg:h-auto flex-col md:flex-row md:flex-wrap pb-4 min-h-[300px] md:justify-start">
+      <div className="flex gap-4 px-4 h-full lg:h-auto flex-col md:flex-row md:flex-wrap pb-4 min-h-[300px] items-center md:justify-start">
         {tabs.find((tab) => tab.id === selectedTab)?.getThemes()}
       </div>
     </>
@@ -352,7 +352,7 @@ const CreatedTheme: React.FC<CreatedThemeProps> = ({
       : sortedThemes;
 
   return isLoadingCreatedThemes ? (
-    <div className="flex justify-center items-center flex-1 h-full">
+    <div className="flex justify-center md:justify-start items-center flex-1 h-full gap-4 flex-wrap">
       {new Array(6).fill(0).map((_, index) => (
         <ThemeTileSkeleton key={index} />
       ))}
@@ -538,7 +538,7 @@ const LikedTheme: React.FC<CreatedThemeProps> = ({
   });
 
   return isLoadingLikedThemes ? (
-    <div className="flex justify-center items-center flex-1 h-full">
+    <div className="flex justify-center md:justify-start items-center flex-1 h-full gap-4 flex-wrap">
       {new Array(6).fill(0).map((_, index) => (
         <ThemeTileSkeleton key={index} />
       ))}
@@ -723,7 +723,7 @@ const SavedTheme: React.FC<CreatedThemeProps> = ({
   });
 
   return isLoadingSavedThemes ? (
-    <div className="flex justify-center items-center flex-1 h-full">
+    <div className="flex justify-center md:justify-start items-center flex-1 h-full gap-4 flex-wrap">
       {new Array(6).fill(0).map((_, index) => (
         <ThemeTileSkeleton key={index} />
       ))}

src/components/save-generated-theme-dialog.tsx

@@ -45,7 +45,6 @@ interface RegisterDialogProps {
     primary: string;
     secondary: string;
     prompt: string;
-    isDark: boolean;
   };
 }
 

src/components/save-theme-dialog.tsx

@@ -39,7 +39,6 @@ interface RegisterDialogProps {
     color_2_reason: string;
     color_3_reason: string;
     color_4_reason: string;
-    isDark: boolean;
     prompt: string;
   };
   isDirty: boolean;

src/components/tag-picker.tsx

@@ -56,15 +56,10 @@ export default function TagPicker({
   }, []);
 
   useEffect(() => {
-    axios
-      .get("/api/tags")
-      .then((res) => {
-        setTags(res.data);
-        setFilteredTags(res.data);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
+    axios.get("/api/tags").then((res) => {
+      setTags(res.data);
+      setFilteredTags(res.data);
+    });
   }, []);
 
   useEffect(() => {

src/components/theme-view.tsx

@@ -4,7 +4,12 @@ import { ExportThemeDialog } from "@/components/export-theme-dialog";
 import { Button } from "@/components/ui/button";
 import Typography from "@/components/ui/typography";
 import { FontProps, GOOGLE_FONTS } from "@/constants/fonts";
-import { ColorsProps, FontObjProps, ShadesProps } from "@/interfaces/theme";
+import {
+  ColorsProps,
+  FontObjProps,
+  GeneratedThemeProps,
+  ShadesProps,
+} from "@/interfaces/theme";
 import { cn, generateAllShades, getLuminance } from "@/lib/utils";
 import {
   ArrowLeftIcon,
@@ -75,14 +80,14 @@ export interface ThemeVeiwProps {
   };
   type?: "view" | "generated";
   prompt?: string;
-  isDark?: boolean;
+  mode?: GeneratedThemeProps["mode"];
 }
 
 export const ThemeView: React.FC<ThemeVeiwProps> = ({
   theme,
   type = "view",
   prompt = "",
-  isDark = false,
+  mode = "Default",
 }) => {
   const router = useRouter();
   const { addToast } = useToast();
@@ -299,7 +304,7 @@ export const ThemeView: React.FC<ThemeVeiwProps> = ({
                   onClick={() => {
                     setGenerateDialogDefaultValues({
                       prompt,
-                      isDark,
+                      mode,
                     });
                     setGenerateThemeDialog(true);
                   }}
@@ -511,7 +516,6 @@ export const ThemeView: React.FC<ThemeVeiwProps> = ({
               color_2_reason: theme.color_2_reason,
               color_3_reason: theme.color_3_reason,
               color_4_reason: theme.color_4_reason,
-              isDark: isDark,
               prompt: prompt,
             }}
           />

src/constants/openai.ts

@@ -1,16 +1,23 @@
+import { GeneratedThemeProps } from "@/interfaces/theme";
+
 export const getPrompt = ({
-  isDark,
+  mode,
   description,
 }: {
-  isDark: boolean;
+  mode: GeneratedThemeProps["mode"];
   description: string;
 }) => `Design a color scheme for a website based on the provided description. The color choices must be justified based on relevance to the website's content and the cultural context of the color. Adhere to the following guidelines:
 
 - Follow the 60-30-10 rule for color distribution.
 - Ensure color combinations comply with WCAG 2 Level AAA standards for contrast.
-- Design for ${isDark ? "Dark" : "Light"} theme mode.
+${
+  mode === "Default"
+    ? `- Represent colors in HEX code format (ex. #FFFFFF).
+- Reason should at least 20 words and not have more than 30 words.`
+    : `- Design for ${mode === "Dark" ? "Dark" : "Light"} theme mode.
 - Represent colors in HEX code format (ex. #FFFFFF).
-- Reason should at least 20 words and not have more than 30 words.
+- Reason should at least 20 words and not have more than 30 words.`
+}
 
 Description: ${description}