Skip to content

Commit 15b2eda

Browse files
SashenJayathilakaSashenJayathilaka
authored
Merge pull request #99 from SashenJayathilaka/myNewBranchtt
⚙️ Release AGRG v1.2.0 (#99)
2 parents f6958f5 + c26d1b4 commit 15b2eda

7 files changed

Lines changed: 265 additions & 8 deletions

File tree

‎components/BodyContent.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,12 @@ import ActionLode from "./ActionLode";
2727
import ButtonActions from "./ButtonActions";
2828
import ConfettiSection from "./ConfettiSection";
2929
import SmallHeader from "./Contents/SmallHeader";
30+
import DividerLine from "./DividerLine";
3031
import FeedBackForm from "./FeedBackForm";
3132
import FormContainer from "./FormContainer";
3233
import Markdown from "./markdown/Markdown";
3334
import MarkdownPreview from "./markdown/MarkdownPreview";
35+
import ConfigOptions from "./process/ConfigOptions";
3436

3537
type Props = {};
3638

@@ -194,6 +196,8 @@ function BodyContent({}: Props) {
194196
<AiOutlineDownload size={25} />
195197
</button>
196198
</div>
199+
<DividerLine />
200+
<ConfigOptions />
197201
</>
198202
)}
199203
</>

‎components/Contents/Contact.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable react-hooks/exhaustive-deps */
12
"use client";
23

34
import { gitHubDetails } from "@/atom/gitHubDetails";
@@ -11,12 +12,13 @@ import InputField from "../InputField";
1112
type Props = {};
1213

1314
function Contact({}: Props) {
15+
const [details, setDetails] = useRecoilState(gitHubDetails);
16+
1417
const [contactValues, setContactsValue] = useState({
15-
name: "",
16-
twitter: "",
17-
email: "",
18+
name: details.name,
19+
twitter: details.twitter,
20+
email: details.email,
1821
});
19-
const [details, setDetails] = useRecoilState(gitHubDetails);
2022

2123
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
2224
setContactsValue((prev) => ({

‎components/Contents/Contributing.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ function Contributing({}: Props) {
4848

4949
useEffect(() => {
5050
updateState();
51+
// eslint-disable-next-line react-hooks/exhaustive-deps
5152
}, [contributingValue]);
5253

5354
return (
@@ -57,7 +58,7 @@ function Contributing({}: Props) {
5758
<Heading label="Contributing" icon={MdWavingHand} />
5859
<div className="flex justify-start gap-20 items-center">
5960
<div>
60-
<p className="text-lg font-medium text-gray-300">
61+
<p className="text-lg font-medium dark:text-gray-300 text-gray-600">
6162
If you want add Contributions section
6263
</p>
6364
</div>
@@ -93,7 +94,7 @@ function Contributing({}: Props) {
9394
<Heading label="Code of Conduct" icon={HiClipboardDocumentList} />
9495
<div className="flex justify-start gap-20 items-center">
9596
<div>
96-
<p className="text-lg font-medium text-gray-300">
97+
<p className="text-lg font-medium dark:text-gray-300 text-gray-600">
9798
If you want add Code of Conduct section
9899
</p>
99100
</div>

‎components/process/ConfigOptions.tsx‎

Lines changed: 106 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,114 @@
11
"use client";
22

3+
import { gitBadge } from "@/atom/displayBadges";
4+
import { gitHubDetails } from "@/atom/gitHubDetails";
5+
import { gitImages } from "@/atom/images";
6+
import { readmeRows } from "@/atom/readmeRow";
7+
import { gitImagesSizes } from "@/atom/size";
8+
import { gitTechStack } from "@/atom/techStack";
9+
import updateCurrentStateValue from "@/hook/updateCurrentStateValue";
10+
import { JsonDataType } from "@/type";
11+
import { FormEvent, useCallback, useState } from "react";
12+
import { toast } from "react-toastify";
13+
import { useRecoilState } from "recoil";
14+
import Options from "./components/Options";
15+
316
type Props = {};
417

518
function ConfigOptions({}: Props) {
6-
return <div>ConfigOptions</div>;
19+
const [files, setFiles] = useState<JsonDataType | null>(null);
20+
const [fileName, setFileName] = useState("");
21+
const [isLoading, setIsLoading] = useState(false);
22+
23+
const [gitHubDetail, setGitHubDetail] = useRecoilState(gitHubDetails);
24+
const [readmeRow, setIsReadmeRow] = useRecoilState(readmeRows);
25+
const [gitHubTechStack, setGitHubTechStack] = useRecoilState(gitTechStack);
26+
const [images, setImages] = useRecoilState(gitImages);
27+
const [size, setSize] = useRecoilState(gitImagesSizes);
28+
const [displayBadges, setDisplayBadges] = useRecoilState(gitBadge);
29+
30+
const {
31+
updateFirstElement,
32+
updateSecondElement,
33+
updateThirdElement,
34+
updateFourthElement,
35+
updateFifthElement,
36+
updateSixthElement,
37+
} = updateCurrentStateValue();
38+
39+
const handleChange = useCallback(
40+
(event: React.ChangeEvent<HTMLInputElement>) => {
41+
const fileReader = new FileReader();
42+
43+
const fileType = event.target.files && event.target.files[0];
44+
45+
if (!fileType) return;
46+
47+
if (fileType.type === "application/json") {
48+
setFileName(fileType.name);
49+
fileReader.readAsText(fileType, "UTF-8");
50+
fileReader.onload = (event) => {
51+
const jasonData = JSON.parse(event.target?.result as string);
52+
setFiles(jasonData);
53+
};
54+
} else {
55+
toast.error("This File Type Not Supported");
56+
setFileName(fileType.name);
57+
}
58+
},
59+
[]
60+
);
61+
62+
const handleProcess = useCallback(
63+
(e: FormEvent) => {
64+
e.preventDefault();
65+
66+
if (!files) return;
67+
68+
setIsLoading(true);
69+
70+
updateFirstElement(files.gitHubTechStack, setGitHubTechStack);
71+
updateSecondElement(files.gitHubDetail, setGitHubDetail);
72+
updateThirdElement(files.readmeRow, setIsReadmeRow);
73+
updateFourthElement(files.images, setImages);
74+
updateFifthElement(files.size, setSize);
75+
updateSixthElement(files.displayBadges, setDisplayBadges);
76+
77+
setTimeout(() => {
78+
setIsLoading(false);
79+
toast.success("JSON Text Restore Successfully");
80+
}, 1000);
81+
},
82+
[
83+
files,
84+
setDisplayBadges,
85+
setGitHubDetail,
86+
setGitHubTechStack,
87+
setImages,
88+
setIsReadmeRow,
89+
setSize,
90+
updateFifthElement,
91+
updateFirstElement,
92+
updateFourthElement,
93+
updateSecondElement,
94+
updateSixthElement,
95+
updateThirdElement,
96+
]
97+
);
98+
99+
return (
100+
<div className="w-full pt-12">
101+
<Options
102+
files={files}
103+
fileName={fileName}
104+
isLoading={isLoading}
105+
setFiles={setFiles}
106+
setFileName={setFileName}
107+
handleProcess={handleProcess}
108+
handleChange={handleChange}
109+
/>
110+
</div>
111+
);
7112
}
8113

9114
export default ConfigOptions;

‎components/process/components/Options.tsx‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
/* eslint-disable @next/next/no-img-element */
2+
"use client";
3+
4+
import { JsonDataType } from "@/type";
5+
import { motion } from "framer-motion";
6+
import { FormEvent } from "react";
7+
import { AiOutlineLoading3Quarters } from "react-icons/ai";
8+
9+
type Props = {
10+
files: JsonDataType | null;
11+
fileName: string;
12+
isLoading: boolean;
13+
setFiles: (value: JsonDataType | null) => void;
14+
setFileName: (value: string) => void;
15+
handleProcess: (event: FormEvent) => void;
16+
handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
17+
};
18+
19+
function Options({
20+
files,
21+
fileName,
22+
isLoading,
23+
setFiles,
24+
setFileName,
25+
handleProcess,
26+
handleChange,
27+
}: Props) {
28+
return (
29+
<div className="w-full p-10 bg-gradient-to-r from-gray-100 via-gray-200 to-gray-100 dark:bg-gradient-to-r dark:from-[#191a47] dark:via-[#0d0d37] dark:to-[#06375f] rounded-xl z-10">
30+
<div className="text-center">
31+
<h2 className="mt-5 text-3xl font-bold text-gray-900 dark:text-gray-100">
32+
Config options
33+
</h2>
34+
<p className="mt-2 text-sm text-gray-400">
35+
Enter the downloaded JSON text to restore
36+
</p>
37+
</div>
38+
<form className="mt-8 space-y-3" action="#" method="POST">
39+
<div className="grid grid-cols-1 space-y-2">
40+
<label className="text-sm font-bold text-gray-500 tracking-wide">
41+
Attach Json Document
42+
</label>
43+
<div className="flex items-center justify-center w-full">
44+
{files || fileName ? (
45+
<div className="flex flex-col rounded-lg border-4 border-dashed w-full h-60 p-10 group text-center cursor-pointer overflow-hidden items-center">
46+
<div
47+
onClick={() => {
48+
setFiles(null);
49+
setFileName("");
50+
}}
51+
>
52+
{fileName.includes("json") ? (
53+
<motion.img
54+
initial={{ opacity: 0, scale: 0.5 }}
55+
animate={{ opacity: 1, scale: 1 }}
56+
transition={{
57+
duration: 0.8,
58+
delay: 0.5,
59+
ease: [0, 0.71, 0.2, 1.01],
60+
}}
61+
src="https://cdn2.iconfinder.com/data/icons/document-file-fill-outline-1/64/File_Document_Doc_Folder_JSON-512.png"
62+
alt="img"
63+
className="w-36 items-center"
64+
/>
65+
) : (
66+
<motion.img
67+
initial={{ opacity: 0, scale: 0.5 }}
68+
animate={{ opacity: 1, scale: 1 }}
69+
transition={{
70+
duration: 0.8,
71+
delay: 0.5,
72+
ease: [0, 0.71, 0.2, 1.01],
73+
}}
74+
src="https://cdn3.iconfinder.com/data/icons/file-management/32/5_forbidden_ban_no_file_document-512.png"
75+
alt="img"
76+
className="w-36 items-center"
77+
/>
78+
)}
79+
<p>{fileName}</p>
80+
</div>
81+
</div>
82+
) : (
83+
<label className="flex flex-col rounded-lg border-4 border-dashed dark:border-gray-500 border-gray-300 w-full h-60 p-10 group text-center cursor-pointer">
84+
<motion.div
85+
initial={{ opacity: 0, scale: 0.5 }}
86+
animate={{ opacity: 1, scale: 1 }}
87+
transition={{
88+
duration: 0.8,
89+
delay: 0.5,
90+
ease: [0, 0.71, 0.2, 1.01],
91+
}}
92+
className="h-full w-full text-center flex flex-col justify-center items-center"
93+
>
94+
<div className="flex flex-auto max-h-48 w-2/5 -mt-10 justify-center">
95+
<img
96+
className="has-mask h-36 object-center"
97+
src="https://cosmoindia.in/wp-content/uploads/2020/08/businessgrowth.png"
98+
alt="freepik image"
99+
/>
100+
</div>
101+
<p className="pointer-none text-gray-500 ">
102+
<span className="text-sm">Drag and drop</span> files here{" "}
103+
<br /> or{" "}
104+
<span id="" className="text-blue-600 hover:underline">
105+
select a file
106+
</span>{" "}
107+
from your computer
108+
</p>
109+
</motion.div>
110+
<input type="file" className="hidden" onChange={handleChange} />
111+
</label>
112+
)}
113+
</div>
114+
</div>
115+
<p className="text-sm text-gray-700 dark:text-gray-300">
116+
<span>File type: json</span>
117+
</p>
118+
<div>
119+
<button
120+
onClick={handleProcess}
121+
className="my-5 w-full flex justify-center bg-blue-500 text-gray-100 p-4 rounded-full tracking-wide font-semibold focus:outline-none focus:shadow-outline hover:bg-blue-600 cursor-pointer transition ease-in duration-300"
122+
>
123+
{isLoading ? (
124+
<AiOutlineLoading3Quarters size={25} className="animate-spin" />
125+
) : (
126+
"Process"
127+
)}
128+
</button>
129+
</div>
130+
</form>
131+
</div>
132+
);
133+
}
134+
135+
export default Options;

‎components/profile/process/components/Options.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
/* eslint-disable @next/next/no-img-element */
12
"use client";
23

3-
import { ProfileAtomDetails } from "@/type";
4+
import { JsonDataType, ProfileAtomDetails } from "@/type";
45
import { motion } from "framer-motion";
56
import { FormEvent } from "react";
67
import { AiOutlineLoading3Quarters } from "react-icons/ai";

‎type.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,15 @@ export interface ProfileAtomDetails {
163163
endWelcomeSection: boolean;
164164
}
165165

166+
export interface JsonDataType {
167+
gitHubDetail: GitHubDetail;
168+
gitHubTechStack: GitHubTechStack;
169+
readmeRow: ReadmeRow;
170+
images: GitHubImages;
171+
size: GitHubImagesSize;
172+
displayBadges: GitBadges;
173+
}
174+
166175
/* export interface GitHubRepoDetails {
167176
websiteUpDown: string;
168177
websiteLink: string;

0 commit comments

Comments
 (0)