Merge pull request #98 from SashenJayathilaka/myNewBranchg

🐛 Bug Fixes

components/BodyContent.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 
 import { gitBadge } from "@/atom/displayBadges";
@@ -203,6 +204,12 @@ function BodyContent({}: Props) {
               setIsShow={setIsShow}
               setIsMdPreview={setIsMdPreview}
               isMdPreview={isMdPreview}
+              gitHubDetail={gitHubDetail}
+              readmeRow={readmeRow}
+              gitHubTechStack={gitHubTechStack}
+              images={images}
+              size={size}
+              displayBadges={displayBadges}
             />
             {isMdPreview ? (
               <motion.div

components/ButtonActions.tsx

@@ -1,78 +1,137 @@
 "use client";
 
-import { useState } from "react";
+import {
+  GitBadges,
+  GitHubDetail,
+  GitHubImages,
+  GitHubImagesSize,
+  GitHubTechStack,
+  ReadmeRow,
+} from "@/type";
+import { FormEvent, useCallback, useState } from "react";
 import {
   AiOutlineDownload,
   AiOutlineEye,
   AiOutlineFileDone,
 } from "react-icons/ai";
 import { BiArrowBack, BiCopy } from "react-icons/bi";
+import { BsFiletypeJson } from "react-icons/bs";
 import { toast } from "react-toastify";
 
 type Props = {
   setIsShow: (value: boolean) => void;
   setIsMdPreview: (value: boolean) => void;
   isMdPreview: boolean;
+  gitHubDetail: GitHubDetail;
+  gitHubTechStack: GitHubTechStack;
+  readmeRow: ReadmeRow;
+  images: GitHubImages;
+  size: GitHubImagesSize;
+  displayBadges: GitBadges;
 };
 
-function ButtonActions({ setIsShow, setIsMdPreview, isMdPreview }: Props) {
+function ButtonActions({
+  setIsShow,
+  setIsMdPreview,
+  isMdPreview,
+  gitHubDetail,
+  gitHubTechStack,
+  readmeRow,
+  images,
+  size,
+  displayBadges,
+}: Props) {
   const [isCopy, setIsCopy] = useState(false);
 
-  const handleDownloadMarkdown = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+  const handleDownloadMarkdown = useCallback(
+    (event: FormEvent) => {
+      event.preventDefault();
+
+      if (isMdPreview) {
+        const markdownContent: any =
+          document.getElementById("markdown-content");
+        const tempElement = document.createElement("a");
+        tempElement.setAttribute(
+          "href",
+          `data:text/markdown;charset=utf-8,${encodeURIComponent(
+            markdownContent.innerText
+          )}`
+        );
+        tempElement.setAttribute("download", "README.md");
+        tempElement.style.display = "none";
+        document.body.appendChild(tempElement);
+        tempElement.click();
+        document.body.removeChild(tempElement);
+      } else {
+        toast.warn("Please Switch Preview Mode");
+      }
+    },
+    [isMdPreview]
+  );
+
+  const handleDownloadJson = useCallback(
+    (event: FormEvent) => {
+      event.preventDefault();
 
-    if (isMdPreview) {
-      const markdownContent: any = document.getElementById("markdown-content");
       const tempElement = document.createElement("a");
       tempElement.setAttribute(
         "href",
-        `data:text/markdown;charset=utf-8,${encodeURIComponent(
-          markdownContent.innerText
+        `data:text/json;charset=utf-8,${encodeURIComponent(
+          JSON.stringify({
+            gitHubDetail,
+            gitHubTechStack,
+            readmeRow,
+            images,
+            size,
+            displayBadges,
+          })
         )}`
       );
-      tempElement.setAttribute("download", "README.md");
+      tempElement.setAttribute("download", "data.json");
       tempElement.style.display = "none";
       document.body.appendChild(tempElement);
       tempElement.click();
       document.body.removeChild(tempElement);
-    } else {
-      toast.warn("Please Switch Preview Mode");
-    }
-  };
+    },
+    [displayBadges, gitHubDetail, gitHubTechStack, images, readmeRow, size]
+  );
 
-  const handleCopyToClipboard = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+  const handleCopyToClipboard = useCallback(
+    (event: FormEvent) => {
+      event.preventDefault();
 
-    if (isMdPreview) {
-      setIsCopy(true);
+      if (isMdPreview) {
+        setIsCopy(true);
 
-      const range = document.createRange();
-      range.selectNode(document.getElementById("markdown-content") as any);
-      window.getSelection()?.removeAllRanges();
-      window.getSelection()?.addRange(range);
-      document.execCommand("copy");
-      window.getSelection()?.removeAllRanges();
+        const range = document.createRange();
+        range.selectNode(document.getElementById("markdown-content") as any);
+        window.getSelection()?.removeAllRanges();
+        window.getSelection()?.addRange(range);
+        document.execCommand("copy");
+        window.getSelection()?.removeAllRanges();
 
-      setTimeout(() => {
-        setIsCopy(false);
-      }, 1000);
-    } else {
-      toast.warn("Please Switch Preview Mode");
-    }
-  };
+        setTimeout(() => {
+          setIsCopy(false);
+        }, 1000);
+      } else {
+        toast.warn("Please Switch Preview Mode");
+      }
+    },
+    [isMdPreview]
+  );
 
   return (
     <div className="flex justify-between items-center py-2.5">
       <button
         onClick={() => setIsShow(true)}
-        className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center gap-2"
+        className="bg-gray-700 text-gray-300 hover:bg-slate-600 dark:bg-gray-300 dark:hover:bg-gray-400 dark:text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center gap-2"
       >
         <BiArrowBack size={20} />
         <span>Back To Edit</span>
       </button>
       <button
-        onClick={(e: any) => handleCopyToClipboard(e)}
-        className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center gap-2"
+        onClick={handleCopyToClipboard}
+        className="bg-gray-700 text-gray-300 hover:bg-slate-600 dark:bg-gray-300 dark:hover:bg-gray-400 dark:text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center gap-2"
       >
         {isCopy ? (
           <>
@@ -87,24 +146,24 @@ function ButtonActions({ setIsShow, setIsMdPreview, isMdPreview }: Props) {
         )}
       </button>
       <button
-        onClick={(e: any) => handleDownloadMarkdown(e)}
-        className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center gap-2"
+        onClick={handleDownloadMarkdown}
+        className="bg-gray-700 text-gray-300 hover:bg-slate-600 dark:bg-gray-300 dark:hover:bg-gray-400 dark:text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center gap-2"
       >
         <AiOutlineDownload size={20} />
         <span>Download Markdown</span>
       </button>
-      {/*       <button
-        onClick={() => toast.info("This feature will be coming soon")}
-        className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center gap-2"
+      <button
+        onClick={handleDownloadJson}
+        className="bg-gray-700 text-gray-300 hover:bg-slate-600 dark:bg-gray-300 dark:hover:bg-gray-400 dark:text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center gap-2"
       >
-        <AiOutlineSave size={20} />
-        <span>Save Markdown</span>
-      </button> */}
+        <BsFiletypeJson size={20} />
+        <span>Download Backup</span>
+      </button>
       <button
         onClick={() =>
           isMdPreview ? setIsMdPreview(false) : setIsMdPreview(true)
         }
-        className="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center gap-2"
+        className="bg-gray-700 text-gray-300 hover:bg-slate-600 dark:bg-gray-300 dark:hover:bg-gray-400 dark:text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center gap-2"
       >
         {isMdPreview ? (
           <>
@@ -123,18 +182,3 @@ function ButtonActions({ setIsShow, setIsMdPreview, isMdPreview }: Props) {
 }
 
 export default ButtonActions;
-
-/*   const handleDownloadJson = () => {
-    const tempElement = document.createElement("a");
-    tempElement.setAttribute(
-      "href",
-      `data:text/json;charset=utf-8,${encodeURIComponent(
-        JSON.stringify({ gitHubTechStack })
-      )}`
-    );
-    tempElement.setAttribute("download", "data.json");
-    tempElement.style.display = "none";
-    document.body.appendChild(tempElement);
-    tempElement.click();
-    document.body.removeChild(tempElement);
-  }; */

components/process/ConfigOptions.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+type Props = {};
+
+function ConfigOptions({}: Props) {
+  return <div>ConfigOptions</div>;
+}
+
+export default ConfigOptions;

components/profile/ProfileButtonAction.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 
 import convertJsonProcess from "@/hook/convertJsonProcess";

components/profile/ProfileContent.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 
 import { profileAtomDetail } from "@/atom/profileDetailsAtom";
@@ -67,7 +68,7 @@ function ProfileContent({}: Props) {
       setIsShow(false);
       setAction(false);
       toast.success("Generate Successfully");
-    }, 3000);
+    }, 2000);
   };
 
   const updateAtom = () => {

components/profile/process/ConfigOptions.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 
 import { profileAtomDetail } from "@/atom/profileDetailsAtom";
@@ -22,25 +23,28 @@ function ConfigOptions({}: Props) {
   const { updateStateValue, currentValue } = readJson(files!);
   const { updateProfileStore } = updateProfileValue();
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const fileReader = new FileReader();
-
-    const fileType = event.target.files && event.target.files[0];
-
-    if (!fileType) return;
-
-    if (fileType.type === "application/json") {
-      setFileName(fileType.name);
-      fileReader.readAsText(fileType, "UTF-8");
-      fileReader.onload = (event) => {
-        const jasonData = JSON.parse(event.target?.result as string);
-        setFiles(jasonData);
-      };
-    } else {
-      toast.error("This File Type Not Supported");
-      setFileName(fileType.name);
-    }
-  };
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const fileReader = new FileReader();
+
+      const fileType = event.target.files && event.target.files[0];
+
+      if (!fileType) return;
+
+      if (fileType.type === "application/json") {
+        setFileName(fileType.name);
+        fileReader.readAsText(fileType, "UTF-8");
+        fileReader.onload = (event) => {
+          const jasonData = JSON.parse(event.target?.result as string);
+          setFiles(jasonData);
+        };
+      } else {
+        toast.error("This File Type Not Supported");
+        setFileName(fileType.name);
+      }
+    },
+    []
+  );
 
   const handleProcess = useCallback(
     (e: FormEvent) => {

hook/convertJsonProcess.ts

@@ -1,3 +1,5 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+
 import { profileAtomDetail } from "@/atom/profileDetailsAtom";
 import { ProfileAtomDetails } from "@/type";
 import { useCallback, useEffect, useState } from "react";

type.d.ts

@@ -163,7 +163,7 @@ export interface ProfileAtomDetails {
   endWelcomeSection: boolean;
 }
 
-export interface GitHubRepoDetails {
+/* export interface GitHubRepoDetails {
   websiteUpDown: string;
   websiteLink: string;
   maintained: string;
@@ -207,3 +207,4 @@ export interface GitHubRepoDetails {
   faqSection: string[]; //done
   acknowledgements: string[]; // done
 }
+ */