diff --git a/.gitignore b/.gitignore index 8f322f0..9b1913e 100644 --- a/.gitignore +++ b/.gitignore @@ -25,6 +25,7 @@ yarn-debug.log* yarn-error.log* # local env files +.env .env*.local # vercel diff --git a/src/app/components/ContributorsCard.tsx b/src/app/components/ContributorsCard.tsx index 5124b93..fcd9c6c 100644 --- a/src/app/components/ContributorsCard.tsx +++ b/src/app/components/ContributorsCard.tsx @@ -1,13 +1,40 @@ -export default function ContributorsCard({url, name, role} : any) : JSX.Element { - return ( -
-
-
-

{name}

-

{role}

-
-
- ) -} \ No newline at end of file + sm:max-w-[376px] max-w-[304px] sm:max-h-[138px] max-h-[100px]" + > + {/*
*/} + {/* {`${contributors.login}'s */} + + {`${contributor.login}'s + +
+

+ {contributor.login} +

+ {/*

{role}

*/} +
+ + ); +} diff --git a/src/app/components/Modal.tsx b/src/app/components/Modal.tsx index c8d715d..71178cf 100644 --- a/src/app/components/Modal.tsx +++ b/src/app/components/Modal.tsx @@ -1,131 +1,77 @@ +import { useEffect, useState } from "react"; import ContributorsCard from "./ContributorsCard"; +import { Contributors } from "../type"; -interface Contributors { - url : string, - name : string, - role : string -} - -export default function Modal(props : any) : JSX.Element { - - const susunJadwal : Contributors[] = [ - { - url:"/images/placeholder.png", - name:"Tukang Susun Jadwal", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Susun Jadwal", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Susun Jadwal", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Susun Jadwal", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Susun Jadwal", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Susun Jadwal", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Susun Jadwal", - role:"Designer" - } - ] - - const bikunTracker : Contributors[] = [ - { - url:"/images/placeholder.png", - name:"Tukang Bikun Tracker", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Bikun Tracker", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Bikun Tracker", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Bikun Tracker", - role:"Designer" - } - ] +export default function Modal(props: any): JSX.Element { + const [contributors, setContributors] = useState(null); - const ristekLink : Contributors[] = [ - { - url:"/images/placeholder.png", - name:"Tukang Ristek Link", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Ristek Link", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Ristek Link", - role:"Designer" - } - ] + useEffect(() => { + const options: RequestInit = { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${process.env.NEXT_PUBLIC_AUTH_TOKEN}`, + }, + }; - const ulasKelas : Contributors[] = [ - { - url:"/images/placeholder.png", - name:"Tukang Ulas Kelas", - role:"Designer" - } - ] - - let app; - - if (props.modalApp === 'Susun Jadwal') { - app = susunJadwal - } else if (props.modalApp === 'Bikun Tracker') { - app = bikunTracker - } else if (props.modalApp === 'Ristek Link') { - app = ristekLink - } else { - app = ulasKelas + if (props.modalApp === "Susun Jadwal") { + fetch( + `${process.env.NEXT_PUBLIC_GITHUB_API_URL}/repos/ristekoss/susunjadwal-frontend/contributors`, + options + ) + .then((res) => res.json()) + .then(async (resJson) => setContributors(resJson)); + } else if (props.modalApp === "Bikun Tracker") { + } else if (props.modalApp === "Ristek Link") { + fetch( + `${process.env.NEXT_PUBLIC_GITHUB_API_URL}/repos/ristekoss/ristek-link/contributors`, + options + ) + .then((res) => res.json()) + .then((resJson) => setContributors(resJson)); + } else if (props.modalApp === "Ulas Kelas") { + fetch( + `${process.env.NEXT_PUBLIC_GITHUB_API_URL}/repos/ristekoss/ulaskelas-frontend/contributors`, + options + ) + .then((res) => res.json()) + .then((resJson) => setContributors(resJson)); } + }, [props.modalApp]); - return ( -
-
- -

- People Behind This Product! -

- props.modal()} className="cursor-pointer"> -
-
+
+ +

+ People Behind This Product! +

+ props.modal()} + className="cursor-pointer" + > +
+
- {app.map((contributors, index) => { - return ( - - ) - })} -
-
- ) -} \ No newline at end of file + sm:pr-0 pr-[8px]" + > + {contributors + ? contributors.map((contributor, index) => { + return ( + + ); + }) + : null} +
+ + ); +} diff --git a/src/app/sections/Contributors.tsx b/src/app/sections/Contributors.tsx index f1cd3ad..b7e47a8 100644 --- a/src/app/sections/Contributors.tsx +++ b/src/app/sections/Contributors.tsx @@ -1,79 +1,68 @@ +import { useEffect, useState } from "react"; import ContributorsCard from "../components/ContributorsCard"; +import { Contributors } from "../type"; -interface Contributors { - url : string, - name : string, - role : string -} - -export default function Contributors() { - - const contributors : Contributors[] = [ - { - url:"/images/placeholder.png", - name:"Tukang Ulas Kelas", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Ulas Kelas", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Ulas Kelas", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Ulas Kelas", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Ulas Kelas", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Ulas Kelas", - role:"Designer" - }, - { - url:"/images/placeholder.png", - name:"Tukang Ulas Kelas", - role:"Designer" - } - ] - - return ( -
- -
+export default function ContributorsPage() { + const [contributors, setContributors] = useState(null); -
- -

- The Developers! -

- -
+ useEffect(() => { + const options: RequestInit = { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${process.env.NEXT_PUBLIC_AUTH_TOKEN}`, + }, + }; -
- - -
- -
+ fetch( + `${process.env.NEXT_PUBLIC_GITHUB_API_URL}/repos/ristekoss/ristek-oss-frontend/contributors`, + options + ) + .then((res) => res.json()) + .then((resJson) => setContributors(resJson)); + }, []); -
- {contributors.map((contributors, index) => { - return ( - - ) - })} -
+ return ( +
+
+
+ +

+ The Developers! +

+ +
+
+ +
- ) -} \ No newline at end of file +
+ +
+ {contributors + ? contributors.map((contributors, index) => { + return ( + + ); + }) + : null} +
+
+ ); +} diff --git a/src/app/type.ts b/src/app/type.ts new file mode 100644 index 0000000..1dae43f --- /dev/null +++ b/src/app/type.ts @@ -0,0 +1,5 @@ +export interface Contributors { + login: string; + avatar_url: string; + html_url: string; +}