feat: instant image creation (#91)

QuiiBz · May 19, 2024 · 702ce9d · 702ce9d
1 parent c29f196
commit 702ce9d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 17 deletions.
diff --git a/apps/dashboard/src/components/Splash/HomeSplashMyImages.tsx b/apps/dashboard/src/components/Splash/HomeSplashMyImages.tsx
@@ -2,14 +2,16 @@
 import { Button, Flex, Text } from "@radix-ui/themes";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { useImagesStore } from "../../stores/imagesStore";
+import { type OGImage, useImagesStore } from "../../stores/imagesStore";
 import { OgImage } from "../OgImage";
 import { AddIcon } from "../icons/AddIcon";
 import type { OGElement } from "../../lib/types";
 import { ArrowRightIcon } from "../icons/ArrowRightIcon";
+import { createElementId } from "../../lib/elements";
 
 export function HomeSplashMyImages() {
-  const { images, createEmptyImage, copyImage, deleteImage } = useImagesStore();
+  const { images, createImage, copyImage, deleteImage } = useImagesStore();
+
   const router = useRouter();
 
   return (
@@ -26,8 +28,12 @@ export function HomeSplashMyImages() {
       <Flex gap="2">
         <OgImage
           onClick={() => {
-            const { id } = createEmptyImage();
-            router.push(`/editor/${id}`);
+            const image: OGImage = {
+              name: "New Image",
+              id: createElementId(),
+            };
+            router.push(`/editor/${image.id}`);
+            createImage(image);
           }}
         >
           <Flex align="center" gap="1">

diff --git a/apps/dashboard/src/components/Splash/MyImagesSplash.tsx b/apps/dashboard/src/components/Splash/MyImagesSplash.tsx
@@ -4,12 +4,13 @@ import { Button, Flex, Grid, Text } from "@radix-ui/themes";
 import Link from "next/link";
 import { ArrowLeftIcon } from "../icons/ArrowLeftIcon";
 import { AddIcon } from "../icons/AddIcon";
-import { useImagesStore } from "../../stores/imagesStore";
+import { type OGImage, useImagesStore } from "../../stores/imagesStore";
 import type { OGElement } from "../../lib/types";
 import { OgImage } from "../OgImage";
+import { createElementId } from "../../lib/elements";
 
 export function MyImagesSplash() {
-  const { images, createEmptyImage, copyImage, deleteImage } = useImagesStore();
+  const { images, createImage, copyImage, deleteImage } = useImagesStore();
   const router = useRouter();
 
   return (
@@ -30,8 +31,12 @@ export function MyImagesSplash() {
       >
         <OgImage
           onClick={() => {
-            const { id } = createEmptyImage();
-            router.push(`/editor/${id}`);
+            const image: OGImage = {
+              name: "New Image",
+              id: createElementId(),
+            };
+            router.push(`/editor/${image.id}`);
+            createImage(image);
           }}
         >
           <Flex align="center" gap="1">

diff --git a/apps/dashboard/src/stores/imagesStore.ts b/apps/dashboard/src/stores/imagesStore.ts
@@ -13,7 +13,7 @@ interface ImagesState {
   images: OGImage[];
   selectedImageId: string | null;
   setSelectedImageId: (id: string | null) => void;
-  createEmptyImage: () => OGImage;
+  createImage: (image: OGImage) => void;
   copyTemplate: (template: Template) => OGImage;
   copyImage: (image: OGImage) => OGImage;
   updateImage: (image: OGImage) => void;
@@ -28,16 +28,9 @@ export const useImagesStore = create(
       setSelectedImageId: (id) => {
         set({ selectedImageId: id });
       },
-      createEmptyImage: () => {
-        const image: OGImage = {
-          name: "New Image",
-          id: createElementId(),
-        };
-
+      createImage: (image) => {
         localStorage.setItem(image.id, JSON.stringify(INITIAL_ELEMENTS));
         set((state) => ({ images: [image, ...state.images] }));
-
-        return image;
       },
       copyTemplate: (template) => {
         const image: OGImage = {