using createProject state to handle background and profile images

PotLock · Jul 3, 2024 · 914c3dd · 914c3dd
1 parent daff81b
commit 914c3dd
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 24 deletions.
diff --git a/src/app/_store/models.ts b/src/app/_store/models.ts
@@ -2,6 +2,7 @@ import { Models } from "@rematch/core";
 
 import { auth } from "@/modules/auth/state";
 import { core } from "@/modules/core/state";
+import { createProject } from "@/modules/create-project/state";
 import { donationModel } from "@/modules/donation";
 import { navModel, profilesModel } from "@/modules/profile/models";
 
@@ -11,6 +12,7 @@ export interface RootModel extends Models<RootModel> {
   profiles: typeof profilesModel;
   nav: typeof navModel;
   core: typeof core;
+  createProject: typeof createProject;
 }
 
 export const models: RootModel = {
@@ -19,4 +21,5 @@ export const models: RootModel = {
   profiles: profilesModel,
   nav: navModel,
   core,
+  createProject,
 };
diff --git a/src/modules/create-project/components/Profile.tsx b/src/modules/create-project/components/Profile.tsx
@@ -1,15 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 // https://www.npmjs.com/package/react-files
 import Files from "react-files";
 
+import { dispatch, useTypedSelector } from "@/app/_store";
 import CameraIcon from "@/common/assets/svgs/CameraIcon";
-import { IPFS_NEAR_SOCIAL_URL } from "@/common/constants";
 import { Button } from "@/common/ui/components";
 import Spinner from "@/modules/core/components/Spinner";
 import useStatus from "@/modules/core/hooks/usStatus";
-import uploadFileToIPFS from "@/modules/core/services/uploadFileToIPFS";
 import useProfileData from "@/modules/profile/hooks/useProfileData";
 
 type Props = {
@@ -18,44 +17,40 @@ type Props = {
 
 const Profile = ({ accountId }: Props) => {
   const profileData = useProfileData(accountId);
-  const [backgroundImage, setBackgroundImage] = useState("");
-  const [profileImage, setProfileImage] = useState("");
   const bgImageStatus = useStatus();
   const profileImageStatus = useStatus();
 
+  const { backgroundImage, profileImage } = useTypedSelector(
+    (state) => state.createProject,
+  );
+
   // Bg and Profile Images Effect
   useEffect(() => {
-    setProfileImage(profileData.profileImages.image);
-    setBackgroundImage(profileData.profileImages.backgroundImage);
-  }, [profileData.profileImages]);
+    if (!backgroundImage) {
+      dispatch.createProject.setProfileImage(profileData.profileImages.image);
+      dispatch.createProject.setBackgroundImage(
+        profileData.profileImages.backgroundImage,
+      );
+    }
+  }, [profileData.profileImages, backgroundImage]);
 
   if (!accountId) {
     return "";
   }
 
-  const onBgImageChange = (files: File[]) => {
+  const onBgImageChange = async (files: File[]) => {
     if (files) {
       bgImageStatus.setStatus("loading");
-      uploadFileToIPFS(files[0], async (res) => {
-        bgImageStatus.setStatus("ready");
-        if (res.ok) {
-          const data = await res.json();
-          setBackgroundImage(`${IPFS_NEAR_SOCIAL_URL}${data.cid}`);
-        }
-      });
+      await dispatch.createProject.uploadBackgroundImage(files);
+      bgImageStatus.setStatus("ready");
     }
   };
 
-  const onAvatarImageChange = (files: File[]) => {
+  const onAvatarImageChange = async (files: File[]) => {
     if (files) {
       profileImageStatus.setStatus("loading");
-      uploadFileToIPFS(files[0], async (res) => {
-        profileImageStatus.setStatus("ready");
-        if (res.ok) {
-          const data = await res.json();
-          setProfileImage(`${IPFS_NEAR_SOCIAL_URL}${data.cid}`);
-        }
-      });
+      await dispatch.createProject.uploadProfileImage(files);
+      profileImageStatus.setStatus("ready");
     }
   };
 

diff --git a/src/modules/create-project/models/schemas.ts b/src/modules/create-project/models/schemas.ts
@@ -4,4 +4,6 @@ export const createProjectSchema = z.object({
   isDao: z.boolean().default(false),
   daoAddress: z.string().min(3, "Invalid NEAR account ID"),
   projectName: z.string().min(3, "Name must be at least 3 characters"),
+  backgroundImage: z.string(),
+  profileImage: z.string(),
 });
diff --git a/src/modules/create-project/state.ts b/src/modules/create-project/state.ts
@@ -0,0 +1,77 @@
+import { createModel } from "@rematch/core";
+
+import { RootModel } from "@/app/_store/models";
+import { IPFS_NEAR_SOCIAL_URL } from "@/common/constants";
+
+import { CreateProjectInputs } from "./models/types";
+import uploadFileToIPFS from "../core/services/uploadFileToIPFS";
+
+type CreateProjectState = CreateProjectInputs;
+
+/**
+ * Create Project State
+ */
+const initialState: CreateProjectState = {
+  isDao: false,
+  daoAddress: "",
+  projectName: "",
+  backgroundImage: "",
+  profileImage: "",
+};
+
+export const createProject = createModel<RootModel>()({
+  state: initialState,
+
+  reducers: {
+    UPDATE_BACKGROUND_IMAGE(state: CreateProjectState, backgroundUrl: string) {
+      state.backgroundImage = backgroundUrl;
+    },
+
+    UPDATE_PROFILE_IMAGE(state: CreateProjectState, profileImageUrl: string) {
+      state.profileImage = profileImageUrl;
+    },
+
+    // Rese t to the initial state
+    RESET() {
+      return initialState;
+    },
+  },
+
+  effects: (dispatch) => ({
+    uploadBackgroundImage(files: File[]) {
+      return new Promise((resolve) => {
+        uploadFileToIPFS(files[0], async (res) => {
+          if (res.ok) {
+            const data = await res.json();
+            dispatch.createProject.UPDATE_BACKGROUND_IMAGE(
+              `${IPFS_NEAR_SOCIAL_URL}${data.cid}`,
+            );
+            resolve(`${IPFS_NEAR_SOCIAL_URL}${data.cid}`);
+          }
+        });
+      });
+    },
+
+    setBackgroundImage(backgroundUrl: string) {
+      dispatch.createProject.UPDATE_BACKGROUND_IMAGE(backgroundUrl);
+    },
+
+    async uploadProfileImage(files: File[]) {
+      return new Promise((resolve) => {
+        uploadFileToIPFS(files[0], async (res) => {
+          if (res.ok) {
+            const data = await res.json();
+            dispatch.createProject.UPDATE_PROFILE_IMAGE(
+              `${IPFS_NEAR_SOCIAL_URL}${data.cid}`,
+            );
+            resolve(`${IPFS_NEAR_SOCIAL_URL}${data.cid}`);
+          }
+        });
+      });
+    },
+
+    setProfileImage(profileImageUrl: string) {
+      dispatch.createProject.UPDATE_PROFILE_IMAGE(profileImageUrl);
+    },
+  }),
+});