From d2fcbef02543fe1d48e8f0b62af3d032f636c67c Mon Sep 17 00:00:00 2001
From: Arxeno <rmfbkw04@gmail.com>
Date: Fri, 8 Dec 2023 04:15:38 +0700
Subject: [PATCH] fix: integrate developer data from github API

---
 .gitignore                              |   1 +
 src/app/components/ContributorsCard.tsx |  51 +++++--
 src/app/components/Modal.tsx            | 192 +++++++++---------------
 src/app/sections/Contributors.tsx       | 133 ++++++++--------
 src/app/type.ts                         |   5 +
 5 files changed, 175 insertions(+), 207 deletions(-)
 create mode 100644 src/app/type.ts

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 (
-        <div className="flex items-start gap-2.5 
+import Image from "next/image";
+import { Contributors } from "../type";
+
+interface Props {
+  contributor: Contributors;
+}
+
+export default function ContributorsCard({ contributor }: Props): JSX.Element {
+  return (
+    <div
+      className="flex w-[376px] items-start gap-2.5 
                         shadow-[0px_4px_8px_0px_rgba(0,0,0,0.20)] sm:px-5 px-3 sm:py-4 py-2.5 rounded-[20px] 
-                        sm:max-w-[376px] max-w-[304px] sm:max-h-[138px] max-h-[100px]">
-            <div className="sm:w-[160px] w-[120px] sm:h-[106px] h-[80px]" style={{background:`url(${url})`}}></div>
-            <div className="flex flex-col max-w-[166px]">
-                <p className="font-bold text-base text-[#45349F]">{name}</p>
-                <p className="font-normal text-base text-[#45349F]">{role}</p>
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
+                        sm:max-w-[376px] max-w-[304px] sm:max-h-[138px] max-h-[100px]"
+    >
+      {/* <div
+        className="sm:w-[160px] w-[120px] sm:h-[106px] h-[80px]"
+        style={{ background: `url(${contributors.avatar_url})` }}
+      ></div> */}
+      {/* <Image
+        src={contributors.avatar_url}
+        alt={`${contributors.login}'s profile picture`}
+        width={460}
+        height={460}
+      /> */}
+
+      <img
+        src={contributor.avatar_url}
+        alt={`${contributor.login}'s profile picture`}
+        className="sm:w-[105px] w-[80px]"
+      ></img>
+
+      <div className="flex flex-col max-w-[166px]">
+        <p className="font-bold text-base text-[#45349F]">
+          {contributor.login}
+        </p>
+        {/* <p className="font-normal text-base text-[#45349F]">{role}</p> */}
+      </div>
+    </div>
+  );
+}
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<Contributors[] | null>(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 (
-        <div className="fade fixed mt-[64px] flex flex-col items-center sm:gap-[20px] md:gap-[40px] gap-[12px] sm:p-[40px] md:p-[60px] p-[20px] w-[90%] sm:max-h-[564px] max-h-[80%] rounded-[20px] bg-white">
-            <div className="flex flex-row w-full justify-between">
-                <img src={"/icons/cross_box.svg"} className="invisible lg:block hidden"></img>
-                <p className="font-bold lg:text-[60px] sm:text-[36px] text-[24px]">
-                    People Behind This Product!
-                </p>
-                <img src={"/icons/cross_box.svg"} onClick={() => props.modal()} className="cursor-pointer"></img>
-            </div>
-            <div className="flex flex-wrap gap-[20px] w-full justify-center overflow-auto 
+  return (
+    <div className="fade fixed mt-[64px] flex flex-col items-center sm:gap-[20px] md:gap-[40px] gap-[12px] sm:p-[40px] md:p-[60px] p-[20px] w-[90%] sm:max-h-[564px] max-h-[80%] rounded-[20px] bg-white">
+      <div className="flex flex-row w-full justify-between">
+        <img
+          src={"/icons/cross_box.svg"}
+          className="invisible lg:block hidden"
+        ></img>
+        <p className="font-bold lg:text-[60px] sm:text-[36px] text-[24px]">
+          People Behind This Product!
+        </p>
+        <img
+          src={"/icons/cross_box.svg"}
+          onClick={() => props.modal()}
+          className="cursor-pointer"
+        ></img>
+      </div>
+      <div
+        className="flex flex-wrap gap-[20px] w-full justify-center overflow-auto 
                             pt-[8px] pb-[8px]
                             sm:pl-0 pl-[8px]
-                            sm:pr-0 pr-[8px]">
-                {app.map((contributors, index) => {
-                    return (
-                    <ContributorsCard url={contributors.url} name={contributors.name} role={contributors.role} key={index}/>
-                    )
-                })}
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
+                            sm:pr-0 pr-[8px]"
+      >
+        {contributors
+          ? contributors.map((contributor, index) => {
+              return (
+                <ContributorsCard
+                  contributor={contributor}
+                  key={index}
+                />
+              );
+            })
+          : null}
+      </div>
+    </div>
+  );
+}
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 (
-        <div className="relative bg-[#F1F5F9] flex items-center">
-
-            <div className="absolute flex flex-col justify-between w-[100%] h-[100%]">
+export default function ContributorsPage() {
+  const [contributors, setContributors] = useState<Contributors[] | null>(null);
 
-                <div className="flex flex-row justify-between w-[100%] justify-center items-center pt-[40px]">
-                    <img src={"/assets/decor-s-1.svg"} className="left-0 max-w-[15%]"></img>
-                    <p className="text-[color:var(--primary-colors-purple-heart,#5038BC)] sm:text-7xl text-2xl text-center font-bold">
-                        The Developers!
-                    </p>
-                    <img src={"/assets/decor-s-2.svg"} className="right-0 max-w-[15%]"></img>
-                </div>
+  useEffect(() => {
+    const options: RequestInit = {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${process.env.NEXT_PUBLIC_AUTH_TOKEN}`,
+      },
+    };
 
-                <div className="flex flex-row sm:justify-between w-[100%] justify-center items-center bottom-0">
-                    <img src={"/assets/decor-m-1.svg"} className="sm:block hidden left-0 "></img>
-                    <img src={"/assets/decor-m-2.svg"} className="sm:right-0"></img>
-                </div>
-    
-            </div>
+    fetch(
+      `${process.env.NEXT_PUBLIC_GITHUB_API_URL}/repos/ristekoss/ristek-oss-frontend/contributors`,
+      options
+    )
+      .then((res) => res.json())
+      .then((resJson) => setContributors(resJson));
+  }, []);
 
-            <div className="relative flex flex-wrap align-center justify-center gap-[30px] sm:mt-[256px] mt-[156px] mb-[300px] pl-[42px] pr-[42px]">
-                    {contributors.map((contributors, index) => {
-                        return (
-                        <ContributorsCard url={contributors.url} name={contributors.name} role={contributors.role} key={index}/>
-                        )
-                    })}
-            </div>
+  return (
+    <div className="relative bg-[#F1F5F9] flex items-center">
+      <div className="absolute flex flex-col justify-between w-[100%] h-[100%]">
+        <div className="flex flex-row w-[100%] justify-center items-center pt-[40px]">
+          <img
+            src={"/assets/decor-s-1.svg"}
+            className="left-0 max-w-[15%]"
+          ></img>
+          <p className="text-[color:var(--primary-colors-purple-heart,#5038BC)] sm:text-7xl text-2xl text-center font-bold">
+            The Developers!
+          </p>
+          <img
+            src={"/assets/decor-s-2.svg"}
+            className="right-0 max-w-[15%]"
+          ></img>
+        </div>
 
+        <div className="flex flex-row sm:justify-between w-[100%] justify-center items-center bottom-0">
+          <img
+            src={"/assets/decor-m-1.svg"}
+            className="sm:block hidden left-0 "
+          ></img>
+          <img
+            src={"/assets/decor-m-2.svg"}
+            className="sm:right-0"
+          ></img>
         </div>
-    )
-}
\ No newline at end of file
+      </div>
+
+      <div className="relative flex flex-wrap align-center justify-center gap-[30px] sm:mt-[256px] mt-[156px] mb-[300px] pl-[42px] pr-[42px]">
+        {contributors
+          ? contributors.map((contributors, index) => {
+              return (
+                <ContributorsCard
+                  contributor={contributors}
+                  key={index}
+                />
+              );
+            })
+          : null}
+      </div>
+    </div>
+  );
+}
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;
+}