Configure KitaBisa API

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

components/card/DonationCard.tsx

@@ -0,0 +1,25 @@
+import axios from "axios";
+import { useState, useEffect } from "react";
+import { LoadingScreen } from "@components";
+import { KitaBisa } from "@models";
+export const DonationCard = () => {
+  const [kitabisa, setKitaBisa] = useState<KitaBisa>();
+  const [kitaBisaLoading, setKitaBisaLoading] = useState(true);
+
+  useEffect(() => {
+    axios.get("/api/kitabisa").then((response) => {
+      setKitaBisa(response.data);
+      setKitaBisaLoading(false);
+    });
+  }, []);
+
+  if (kitaBisaLoading) {
+    return <LoadingScreen className="w-screen h-screen" />;
+  }
+
+  return (
+    <div>
+      <div></div>
+    </div>
+  );
+};

components/card/index.ts

@@ -1 +1,2 @@
 export * from "./Card";
+export * from "./DonationCard";

components/screen/LoadingScreen.tsx

@@ -1,8 +1,13 @@
 import PaperPlane from "@images/paper-plane.svg";
 import Cloud from "@images/cloud.svg";
-export const LoadingScreen = () => {
+type LoadingScreenProps = {
+  className?: string;
+};
+export const LoadingScreen = ({ className }: LoadingScreenProps) => {
   return (
-    <div className="overflow-x-hidden mobile:mt-[15%] tablet:mt-[30%] desktop:mt-[5%] w-full">
+    <div
+      className={`overflow-x-hidden mobile:mt-[15%] tablet:mt-[30%] desktop:mt-[5%] w-full ${className}`}
+    >
       <div className="flex justify-center">
         <Cloud className="animate-slide-out-right absolute mobile:mt-40 tablet:mt-40 desktop:mt-44 mobile:mr-32 tablet:mr-56 desktop:mr-64 mobile:w-10 tablet:w-20 " />
         <Cloud className="animate-slide-out-left absolute mobile:ml-40 tablet:ml-72 desktop:ml-80 mobile:w-10 tablet:w-20 mt-10" />

models/KitaBisa.ts

@@ -0,0 +1,13 @@
+export type KitaBisa = {
+  url: string;
+  title: string;
+  short_description: string;
+  full_description: string;
+  imageUrl: string;
+  donation: number;
+  donation_count: number;
+  donation_target: number;
+  days_running: number;
+  days_remaining: number;
+  seconds_running: number;
+};

models/index.ts

@@ -0,0 +1 @@
+export * from "./KitaBisa";

pages/api/kitabisa/index.ts

@@ -0,0 +1,35 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import axios from "axios";
+
+export default function handler(_: NextApiRequest, res: NextApiResponse) {
+  axios
+    .get(`${process.env.NEXT_PUBLIC_API_KITABISA}`)
+    .then((response) => {
+      try {
+        const result = response.data.data[0];
+        res.status(200).json({
+          url: result.permalink,
+          title: result.title,
+          short_description: result.short_description,
+          full_description: result.description,
+          imageUrl: result.image,
+          donation: result.donation_received,
+          donation_count: result.donation_count,
+          donation_target: result.donation_target,
+          days_running: result.days_running,
+          days_remaining: result.days_remaining,
+          seconds_running: result.seconds_running,
+        });
+      } catch (e) {
+        console.log(e);
+      }
+    })
+    .catch((error) => res.status(500).send(error));
+}
+
+export const config = {
+  api: {
+    externalResolver: true,
+  },
+};

pages/arutala.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import type { NextPage } from "next";
-import { Body, Button, Header, Card } from "@components";
+import { Body, Button, Header, Card, DonationCard } from "@components";
 import Link from "next/link";
 import {
   ChevronRightIcon,
@@ -374,6 +374,9 @@ const Arutala: NextPage = () => {
           to Receive means to be given, presented with, or paid (something).
         </Card>
       </div>
+      <div>
+        <DonationCard />
+      </div>
     </div>
   );
 };

yarn.lock

@@ -9,13 +9,6 @@
   dependencies:
     "@babel/highlight" "^7.16.7"
 
-"@babel/code-frame@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
-  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
-  dependencies:
-    "@babel/highlight" "^7.18.6"
-
 "@babel/generator@^7.18.2":
   version "7.18.2"
   resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.18.2.tgz"
@@ -69,11 +62,6 @@
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz"
   integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
 
-"@babel/helper-validator-identifier@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
-  integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
-
 "@babel/highlight@^7.16.7":
   version "7.17.9"
   resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.17.9.tgz"
@@ -83,25 +71,16 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/highlight@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
-  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.18.6"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
+"@babel/parser@^7.16.7":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.8.tgz#822146080ac9c62dac0823bb3489622e0bc1cbdf"
+  integrity sha512-RSKRfYX20dyH+elbJK2uqAkVyucL+xXzhqlMD5/ZXx+dAAwpyB7HsvnHe/ZUGOF+xLr5Wx9/JoXVTj6BQE2/oA==
 
 "@babel/parser@^7.18.5", "@babel/parser@^7.7.0":
   version "7.18.5"
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.18.5.tgz"
   integrity sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw==
 
-"@babel/parser@^7.18.6":
-  version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.6.tgz#845338edecad65ebffef058d3be851f1d28a63bc"
-  integrity sha512-uQVSa9jJUe/G/304lXspfWVpKpK4euFLgGiMQFOCpM/bgcAdeoHwi/OQz23O9GK2osz26ZiXRRV9aV+Yl1O8tw==
-
 "@babel/plugin-syntax-jsx@^7.12.13":
   version "7.17.12"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.17.12.tgz"
@@ -157,14 +136,6 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.18.6":
-  version "7.18.7"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.7.tgz#a4a2c910c15040ea52cdd1ddb1614a65c8041726"
-  integrity sha512-QG3yxTcTIBoAcQmkCs+wAPYZhu7Dk9rXKacINfNbdJDNERTbLQbHGyVG8q/YGMPeCJRIhSY0+fTc5+xuh6WPSQ==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.18.6"
-    to-fast-properties "^2.0.0"
-
 "@chakra-ui/[email protected]":
   version "1.4.11"
   resolved "https://registry.npmjs.org/@chakra-ui/accordion/-/accordion-1.4.11.tgz"
@@ -1380,7 +1351,7 @@ axe-core@^4.3.5:
 
 axios@^0.27.2:
   version "0.27.2"
-  resolved "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
   integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==
   dependencies:
     follow-redirects "^1.14.9"