⚙️ eslint-disable

atom/repositoryAtom.ts

@@ -0,0 +1,96 @@
+import { atom } from "recoil";
+
+export type GitHubRepoDetails = {
+  websiteUpDown: string;
+  websiteLink: string;
+  maintained: string;
+  forks: string;
+  stars: string;
+  issues: string;
+  lastCommit: string;
+  gitUserName: string;
+  gitRepoName: string;
+  gitRepoUrl: string;
+  name: string;
+  twitter: string;
+  email: string;
+  isTable: string;
+  mainImage: string;
+  demoImage: string[]; // done
+  updatedStateTechnology: string[]; // done
+  firstRow: string;
+  secondRow: string;
+  primaryColor: string;
+  secondaryColor: string;
+  accentColor: string;
+  textColor: string;
+  contributing: string;
+  codeOfConduct: string;
+  licenseValue: string;
+  mainImageWidth: string;
+  mainImageHeight: string;
+  client: string[]; // done
+  server: string[]; // done
+  database: string[]; // done
+  devOps: string[]; // done
+  features: string[]; // done
+  environmentVariables: string[]; //done
+  prerequisites: string[]; // done
+  installation: string[]; // done
+  runningTests: string[]; // done
+  runLocally: string[]; // done
+  deployment: string[]; // done
+  roadMap: string[]; // done
+  faqSection: string[]; //done
+  acknowledgements: string[]; // done
+};
+
+const defaultPostState: GitHubRepoDetails = {
+  websiteUpDown: "",
+  websiteLink: "",
+  maintained: "",
+  forks: "",
+  stars: "",
+  issues: "",
+  lastCommit: "",
+  gitRepoName: "",
+  gitRepoUrl: "",
+  gitUserName: "",
+  name: "",
+  twitter: "",
+  email: "",
+  isTable: "",
+  mainImage: "",
+  demoImage: [],
+  updatedStateTechnology: [],
+  firstRow: "",
+  secondRow: "",
+  primaryColor: "",
+  secondaryColor: "",
+  accentColor: "",
+  textColor: "",
+  contributing: "",
+  codeOfConduct: "",
+  licenseValue: "",
+  mainImageWidth: "",
+  mainImageHeight: "",
+  client: [],
+  server: [],
+  database: [],
+  devOps: [],
+  features: [],
+  environmentVariables: [],
+  prerequisites: [],
+  installation: [],
+  runningTests: [],
+  runLocally: [],
+  deployment: [],
+  roadMap: [],
+  faqSection: [],
+  acknowledgements: [],
+};
+
+export const gitRepoDetails = atom<GitHubRepoDetails>({
+  key: "GitHubRepoDetails",
+  default: defaultPostState,
+});

components/BodyContent.tsx

@@ -1,20 +1,8 @@
 "use client";
 
-import { gitBadge } from "@/atom/displayBadges";
-import { gitHubDetails } from "@/atom/gitHubDetails";
-import { gitImages } from "@/atom/images";
-import { readmeRows } from "@/atom/readmeRow";
-import { gitImagesSizes } from "@/atom/size";
-import { gitTechStack } from "@/atom/techStack";
+import { gitRepoDetails } from "@/atom/repositoryAtom";
 import updateCurrentStateValue from "@/hook/updateCurrentStateValue";
-import {
-  GitBadges,
-  GitHubDetail,
-  GitHubImages,
-  GitHubImagesSize,
-  GitHubTechStack,
-  ReadmeRow,
-} from "@/type";
+import { GitHubRepoDetails } from "@/type";
 import { Divider } from "@mui/material";
 import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
@@ -38,48 +26,22 @@ function BodyContent({}: Props) {
   const [isMdPreview, setIsMdPreview] = useState(true);
   const [action, setAction] = useState(false);
 
-  const [gitHubDetail, setGitHubDetail] = useRecoilState(gitHubDetails);
-  const [readmeRow, setIsReadmeRow] = useRecoilState(readmeRows);
-  const [gitHubTechStack, setGitHubTechStack] = useRecoilState(gitTechStack);
-  const [images, setImages] = useRecoilState(gitImages);
-  const [size, setSize] = useRecoilState(gitImagesSizes);
-  const [displayBadges, setDisplayBadges] = useRecoilState(gitBadge);
-
-  const {
-    updateFirstElement,
-    updateSecondElement,
-    updateThirdElement,
-    updateFourthElement,
-    updateFifthElement,
-    updateSixthElement,
-  } = updateCurrentStateValue();
-
-  const [firstElement, setFirstElement] =
-    useState<GitHubTechStack>(gitHubTechStack);
-  const [secondElement, setSecondElement] =
-    useState<GitHubDetail>(gitHubDetail);
-  const [thirdElement, setThirdElement] = useState<ReadmeRow>(readmeRow);
-  const [fourthElement, setFourthElement] = useState<GitHubImages>(images);
-  const [fifthElement, setFifthElement] = useState<GitHubImagesSize>(size);
-  const [sixthElement, setSixthElement] = useState<GitBadges>(displayBadges);
-
-  const KeepCacheUpdated = (
-    firstStore: GitHubTechStack,
-    secondStore: GitHubDetail,
-    thirdStore: ReadmeRow,
-    fourthStore: GitHubImages,
-    fifthStore: GitHubImagesSize,
-    sixthStore: GitBadges
-  ) => {
+  const [gitHubDetail, setGitHubDetail] = useRecoilState(gitRepoDetails);
+
+  const [readmeRow, setIsReadmeRow] = useRecoilState(gitRepoDetails);
+  const [images, setImages] = useRecoilState(gitRepoDetails);
+  const [size, setSize] = useRecoilState(gitRepoDetails);
+  const [displayBadges, setDisplayBadges] = useRecoilState(gitRepoDetails);
+
+  const { updateRepoDetailsLocalCash } = updateCurrentStateValue();
+
+  const [allElement, setAllElement] = useState(gitHubDetail);
+
+  const KeepCacheUpdated = (repoDetailsElement: GitHubRepoDetails) => {
     localStorage.setItem(
       "repoCache",
       JSON.stringify({
-        firstStore,
-        secondStore,
-        thirdStore,
-        fourthStore,
-        fifthStore,
-        sixthStore,
+        repoDetailsElement,
       })
     );
 
@@ -93,47 +55,15 @@ function BodyContent({}: Props) {
       return;
     }
 
-    setFirstElement(
-      cache.firstStore
-        ? { ...gitHubTechStack, ...cache.firstStore }
-        : gitHubTechStack
-    );
-    setSecondElement(
-      cache.secondStore
-        ? { ...gitHubTechStack, ...cache.secondStore }
-        : gitHubTechStack
-    );
-    setThirdElement(
-      cache.thirdStore
-        ? { ...gitHubTechStack, ...cache.thirdStore }
-        : gitHubTechStack
-    );
-    setFourthElement(
-      cache.fourthStore
-        ? { ...gitHubTechStack, ...cache.fourthStore }
-        : gitHubTechStack
-    );
-    setFifthElement(
-      cache.fifthStore
-        ? { ...gitHubTechStack, ...cache.fifthStore }
-        : gitHubTechStack
-    );
-    setSixthElement(
-      cache.sixthStore
-        ? { ...gitHubTechStack, ...cache.sixthStore }
-        : gitHubTechStack
+    setAllElement(
+      cache.repoDetailsElement
+        ? { ...gitHubDetail, ...cache.repoDetailsElement }
+        : gitHubDetail
     );
   };
 
   const OnChangeAction = () => {
-    KeepCacheUpdated(
-      gitHubTechStack,
-      gitHubDetail,
-      readmeRow,
-      images,
-      size,
-      displayBadges
-    );
+    KeepCacheUpdated(gitHubDetail);
 
     setAction(true);
 
@@ -145,16 +75,12 @@ function BodyContent({}: Props) {
   };
 
   const updateAtom = () => {
-    updateFirstElement(firstElement, setGitHubTechStack);
-    updateSecondElement(secondElement, setGitHubDetail);
-    updateThirdElement(thirdElement, setIsReadmeRow);
-    updateFourthElement(fourthElement, setImages);
-    updateFifthElement(fifthElement, setSize);
-    updateSixthElement(sixthElement, setDisplayBadges);
+    updateRepoDetailsLocalCash(allElement, setGitHubDetail);
   };
 
   useEffect(() => {
     updateAtom();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShow]);
 
   return (

components/Contents/AboutProject.tsx

@@ -1,9 +1,10 @@
+/* eslint-disable @next/next/no-img-element */
 "use client";
 
-import { gitImages } from "@/atom/images";
+import { gitRepoDetails } from "@/atom/repositoryAtom";
 import { onlyUnique } from "@/hook/onlyUniqueOne";
 import { motion } from "framer-motion";
-import { FormEvent, useEffect, useState } from "react";
+import { FormEvent, useCallback, useEffect, useState } from "react";
 import { AiFillStar } from "react-icons/ai";
 import { HiPhotograph } from "react-icons/hi";
 import { useRecoilState } from "recoil";
@@ -17,7 +18,7 @@ type Props = {};
 function AboutProject({}: Props) {
   const [demoImageLink, setDemoImageLink] = useState("");
   const [listOfDemoImages, setListOfDemoImage] = useState([]);
-  const [images, setImages] = useRecoilState(gitImages);
+  const [images, setImages] = useRecoilState(gitRepoDetails);
 
   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setDemoImageLink(event.target.value);
@@ -35,39 +36,45 @@ function AboutProject({}: Props) {
     }
   };
 
-  const updateCurrentState = (value: string[]) => {
-    if (!value) return;
+  const updateCurrentState = useCallback(
+    (value: string[]) => {
+      if (!value) return;
 
-    const unique = value.filter(onlyUnique).flat();
-
-    setImages((prev) => ({
-      ...prev,
-      demoImage: unique,
-    }));
-  };
-
-  const removeElement = (label: any) => {
-    if (images.demoImage.length > 0) {
-      const removeCurrentState = listOfDemoImages.filter(
-        (element: any) => element.demoImageLink !== label.demoImageLink
-      );
-
-      setListOfDemoImage(removeCurrentState);
-
-      const removeItem = images.demoImage.filter(
-        (element: any) => element.demoImageLink !== label.demoImageLink
-      );
+      const unique = value.filter(onlyUnique).flat();
 
       setImages((prev) => ({
         ...prev,
-        demoImage: removeItem,
+        demoImage: unique,
       }));
-    }
-  };
+    },
+    [setImages]
+  );
+
+  const removeElement = useCallback(
+    (label: any) => {
+      if (images.demoImage.length > 0) {
+        const removeCurrentState = listOfDemoImages.filter(
+          (element: any) => element.demoImageLink !== label.demoImageLink
+        );
+
+        setListOfDemoImage(removeCurrentState);
+
+        const removeItem = images.demoImage.filter(
+          (element: any) => element.demoImageLink !== label.demoImageLink
+        );
+
+        setImages((prev) => ({
+          ...prev,
+          demoImage: removeItem,
+        }));
+      }
+    },
+    [images.demoImage, listOfDemoImages, setImages]
+  );
 
   useEffect(() => {
     updateCurrentState(listOfDemoImages);
-  }, [listOfDemoImages]);
+  }, [listOfDemoImages, updateCurrentState]);
 
   return (
     <div className="mb-15 py-8">