implemented github service

dc7devs · dc7devs · commit 5dc0025b58a2 · 2022-12-18T19:57:20.000-03:00
diff --git a/.env.example b/.env.example
@@ -0,0 +1,2 @@
+GH_API_URL=
+GH_AUTH_TOKEN=
diff --git a/.gitignore b/.gitignore
@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
diff --git a/next.config.js b/next.config.js
@@ -1,7 +1,19 @@
+// const nextEnv = require('next-env');
+// const dotenvLoad = require('dotenv-load');
+ 
+// dotenvLoad();
+ 
+// const withNextEnv = nextEnv();
+ 
+// module.exports = withNextEnv({
+//   // Your Next.js config.
+// });
+
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
 }
 
-module.exports = nextConfig
+module.exports = nextConfig
diff --git a/package.json b/package.json
@@ -12,10 +12,13 @@
     "@types/node": "18.11.11",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
+    "axios": "^1.2.1",
     "clsx": "^1.2.1",
+    "dotenv-load": "^2.0.1",
     "eslint": "8.29.0",
     "eslint-config-next": "13.0.6",
     "next": "13.0.6",
+    "next-env": "^1.1.1",
     "next-progress": "^2.2.0",
     "next-themes": "^0.2.1",
     "phosphor-react": "^1.4.1",
diff --git a/src/@Types/api.github.d.ts b/src/@Types/api.github.d.ts
@@ -0,0 +1,10 @@
+export type PropsCardBox = {
+    id?: number
+    repoTitle: string
+    vercelURL?: string
+    repoDescription: string
+    amountStars: number
+    language: string
+    lastEdition: string
+    githubUrl: string
+}
diff --git a/src/@Types/useeffectprops.d.ts b/src/@Types/useeffectprops.d.ts
@@ -0,0 +1,6 @@
+import { Dispatch, SetStateAction } from "react";
+
+export type useEffectProps = {
+    isOpenedModal: boolean
+    setIsOpenedModal: Dispatch<SetStateAction<boolean>>
+}
diff --git a/src/api/github/repos.ts b/src/api/github/repos.ts
@@ -0,0 +1,32 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+import { PropsCardBox } from '../../@Types/api.github';
+
+import api from '../../service/api';
+
+const handler = async (
+  req: NextApiRequest,
+  res: NextApiResponse<PropsCardBox>
+) => {
+    // const [ repos, setRepos ] = useState<PropsRepository[]>([]);
+
+    // await fetch('https://api.github.com/users/dc7devs/repos')
+    // .then((repositories) => {
+    //     console.log(repositories.json())
+        // .map((repo: any) => {
+        //     const data: PropsRepository = {
+        //         nameRepo: repo.data.name,
+        //         descriptionRepo: repo.description,
+        //         starsCount: repo.stargazers_count,
+        //         language: repo.language,
+        //         lastEdition: repo.updated_at,
+        //         githubRepositoryUrl: repo.html_url
+        //     }
+
+        // })
+    // })
+    
+    // res.status(200).json(repos);
+}
+
+export default handler;
diff --git a/src/api/hello.ts b/src/api/hello.ts
@@ -9,5 +9,5 @@ export default function handler (
   req: NextApiRequest,
   res: NextApiResponse<Data>
 ) {
-  res.status(200).json({ name: 'John Doe' })
+  res.status(200).json({ name: '' })
 }
diff --git a/src/components/card-project.tsx b/src/components/card-project.tsx
@@ -1,46 +1,49 @@
 import Link from "next/link";
-import cx from "clsx";
 import { Star } from "phosphor-react";
+import { PropsCardBox } from "../@Types/api.github";
+
+import cx from "clsx";
+
+export default function CardBox({
+    repoTitle,
+    vercelURL,
+    repoDescription,
+    amountStars,
+    language,
+    lastEdition,
+    githubUrl,
+}: PropsCardBox) {
 
-interface PropsCardButton {
-    repoTitle: string
-    vercelURL: string
-    repoDescription: string
-    amountStars: Number
-    highlightLanguage: string
-    lastEdition: string
-    githubRepositoryUrl: string
-}
-
-export default function CardButton() {
     return (
-        <div className={"w-full sm:w-96 md:w-96 lg:w-[350px] h-48 dark:bg-black/45 bg-white/45 flex flex-col px-4 py-2.5 rounded backdrop-blur-sm ring-1 dark:ring-white/25 ring-black/25"}>
-            <div className={"flex justify-between items-center px-1"}>
-                <div className={"text-2xl text-black dark:text-white"}>ui-notion.so</div>
-                <Link href={cx("")} className={"text-4xl text-zinc-500 hover:text-black dark:hover:text-zinc-100 hover:transition-colors ease-in select-none"}>▲</Link>
+        <div className="w-full sm:w-96 md:w-96 lg:w-[350px] h-48 dark:bg-black/45 bg-white/45 flex flex-col px-4 py-2.5 rounded backdrop-blur-sm ring-1 dark:ring-white/25 ring-black/25">
+            <div className="flex justify-between items-center px-1">
+                <div className="text-2xl text-black dark:text-white">{repoTitle}</div>
+                <Link
+                    href={cx(vercelURL)}
+                    className="text-4xl text-zinc-500 hover:text-black dark:hover:text-zinc-100 hover:transition-colors ease-in select-none"
+                    target="__blank"
+                >▲</Link>
             </div>
 
-            <div className={"flex-1 overflow-hidden text-ellipsis py-3 pl-2"}>
-                Notion's product interface, a project developed as a way of retaining knowledge acquired in the discipline of programming for the web
-            </div>
+            <div className="flex-1 overflow-hidden text-ellipsis py-3 pl-2">{repoDescription}</div>
 
-            <div className={"flex justify-between items-center"}>
+            <div className="flex justify-between items-center text-zinc-500">
                 <div className="flex justify-items-stretch items-center">
-                    <span className={cx("w-3 h-3 bg-blue-600 rounded-full mr-1")}></span>
+                    <span className="w-3 h-3 bg-blue-600 rounded-full mr-1"></span>
                     
-                    <div className="text-xs">TypeScript</div>
+                    <div className="text-xs">{language}</div>
 
                     <span className="w-1 h-1 rounded-full dark:bg-white bg-black rounded-full mx-2"></span>
                     <div className="text-xs flex">
                         <Star size={15} />
-                        <div className="ml-px">120</div>
+                        <div className="ml-px">{cx(amountStars ?? "0")}</div>
                     </div>
                     <span className="w-1 h-1 rounded-full dark:bg-white bg-black rounded-full mx-2"></span>
 
                     <div className="text-xs">Update {cx("49 min")} ago</div>
                 </div>
 
-                <Link href={cx("")}>
+                <Link href={githubUrl} target="__blank">
                     <svg viewBox="0 0 24 24" aria-hidden="true" className="h-6 w-6 fill-zinc-500 hover:transition hover:fill-zinc-600 dark:fill-zinc-400 dark:hover:fill-zinc-300"><path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.475 2 2 6.588 2 12.253c0 4.537 2.862 8.369 6.838 9.727.5.09.687-.218.687-.487 0-.243-.013-1.05-.013-1.91C7 20.059 6.35 18.957 6.15 18.38c-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.538 1.051.9 1.551 2.338 1.116 2.912.846.088-.666.35-1.115.638-1.371-2.225-.256-4.55-1.14-4.55-5.062 0-1.115.387-2.038 1.025-2.756-.1-.256-.45-1.307.1-2.717 0 0 .837-.269 2.75 1.051.8-.23 1.65-.346 2.5-.346.85 0 1.7.115 2.5.346 1.912-1.333 2.75-1.05 2.75-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.562 5.062.362.32.675.936.675 1.897 0 1.371-.013 2.473-.013 2.82 0 .268.188.589.688.486a10.039 10.039 0 0 0 4.932-3.74A10.447 10.447 0 0 0 22 12.253C22 6.588 17.525 2 12 2Z"></path></svg>
                 </Link>
             </div>
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -1,14 +1,10 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { CirclesFour, CirclesThreePlus, X } from "phosphor-react";
-import { Dispatch, SetStateAction, useState } from "react";
-import cx from "clsx";
+import { useState } from "react";
+import { useEffectProps } from "../@Types/useeffectprops";
 import ToggleThemeBtn from "./toggle-dark-theme-btn";
-
-type useEffectProps = {
-    isOpenedModal: boolean
-    setIsOpenedModal: Dispatch<SetStateAction<boolean>>
-}
+import cx from "clsx";
 
 export default function NavBar({
     isOpenedModal,
diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx
@@ -1,14 +1,52 @@
 import Layout from "../components/layout";
-import CardButton from "../components/card-project";
+import CardBox from "../components/card-project";
+import { useEffect, useState } from "react";
+import api from "../service/api";
+
+import { PropsCardBox } from "../@Types/api.github";
 
 export default function Projects() {
+    const [repositories, setRepositories] = useState<PropsCardBox[]>([]);
+
+    useEffect(() => {
+        api.get("/users/dc7devs/repos")
+        .then((repos: any) => {
+            setRepositories(
+                repos.data.map((repo: any) => {
+                    const nowDataFormat: PropsCardBox = {
+                        id: repo.id,
+                        repoTitle: repo.name,
+                        repoDescription: repo.description,
+                        amountStars: repo.stargazers_count,
+                        language: repo.language,
+                        lastEdition: repo.updated_at,
+                        githubUrl: repo.html_url,
+                    };
+
+                    return nowDataFormat;
+                })
+            );
+        }).catch((err) => {
+            console.error("ops! ocorreu um erro" + err);
+        })
+    }, [])
+
     return (
         <Layout>
-            <div className="w-full h-auto flex flex-wrap justify-center lg:justify-start gap-1 sm:gap-1.5">
-                <CardButton />
-                <CardButton />
-                <CardButton />
-            </div>
+            <div className="w-full h-auto flex flex-wrap justify-center lg:justify-start gap-1 sm:gap-1.5">{
+                repositories.map((dataProps: PropsCardBox) => (
+                    <CardBox
+                        key={dataProps.id}
+                        repoTitle={dataProps.repoTitle}
+                        vercelURL={dataProps.vercelURL}
+                        repoDescription={dataProps.repoDescription}
+                        amountStars={dataProps.amountStars}
+                        language={dataProps.language}
+                        lastEdition={dataProps.lastEdition}
+                        githubUrl={dataProps.githubUrl}
+                    />
+                ))
+            }</div>
         </Layout>
     )
 }
diff --git a/src/service/api.ts b/src/service/api.ts
@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const api = axios.create({
+    baseURL: 'https://api.github.com',
+});
+
+export default api;
diff --git a/styles/globals.css b/styles/globals.css
@@ -15,6 +15,11 @@
         width: 0;
     }
 
+    ::selection {
+        color: white;
+        background-color: rgb(139 92 246);
+    }
+
     body {
         @apply bg-gray/[.7]
         dark:bg-black 
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -9,5 +9,5 @@ export default function handler (`
`9`	`9`	`req: NextApiRequest,`
`10`	`10`	`res: NextApiResponse<Data>`
`11`	`11`	`) {`
`12`		`- res.status(200).json({ name: 'John Doe' })`
	`12`	`+ res.status(200).json({ name: '' })`
`13`	`13`	`}`