From 00c8090cbd410ec680c9467f238b97b238bac8da Mon Sep 17 00:00:00 2001 From: marcellinuselbert11 Date: Sat, 9 Jul 2022 20:58:54 +0700 Subject: [PATCH] Configure KitaBisa API --- .gitignore | 1 + components/card/DonationCard.tsx | 25 ++++++++++++++++++ components/card/index.ts | 1 + components/screen/LoadingScreen.tsx | 9 +++++-- models/KitaBisa.ts | 13 ++++++++++ models/index.ts | 1 + pages/api/kitabisa/index.ts | 35 ++++++++++++++++++++++++++ pages/arutala.tsx | 5 +++- yarn.lock | 39 ++++------------------------- 9 files changed, 92 insertions(+), 37 deletions(-) create mode 100644 components/card/DonationCard.tsx create mode 100644 models/KitaBisa.ts create mode 100644 models/index.ts create mode 100644 pages/api/kitabisa/index.ts diff --git a/.gitignore b/.gitignore index 737d872..6590750 100644 --- a/.gitignore +++ b/.gitignore @@ -27,6 +27,7 @@ yarn-error.log* # local env files .env*.local +.env # vercel .vercel diff --git a/components/card/DonationCard.tsx b/components/card/DonationCard.tsx new file mode 100644 index 0000000..ba23482 --- /dev/null +++ b/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(); + const [kitaBisaLoading, setKitaBisaLoading] = useState(true); + + useEffect(() => { + axios.get("/api/kitabisa").then((response) => { + setKitaBisa(response.data); + setKitaBisaLoading(false); + }); + }, []); + + if (kitaBisaLoading) { + return ; + } + + return ( +
+
+
+ ); +}; diff --git a/components/card/index.ts b/components/card/index.ts index 24d3212..b668ec0 100644 --- a/components/card/index.ts +++ b/components/card/index.ts @@ -1 +1,2 @@ export * from "./Card"; +export * from "./DonationCard"; diff --git a/components/screen/LoadingScreen.tsx b/components/screen/LoadingScreen.tsx index 66429bf..1719e30 100644 --- a/components/screen/LoadingScreen.tsx +++ b/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 ( -
+
diff --git a/models/KitaBisa.ts b/models/KitaBisa.ts new file mode 100644 index 0000000..31c7b76 --- /dev/null +++ b/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; +}; diff --git a/models/index.ts b/models/index.ts new file mode 100644 index 0000000..d741959 --- /dev/null +++ b/models/index.ts @@ -0,0 +1 @@ +export * from "./KitaBisa"; diff --git a/pages/api/kitabisa/index.ts b/pages/api/kitabisa/index.ts new file mode 100644 index 0000000..c5985ed --- /dev/null +++ b/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, + }, +}; diff --git a/pages/arutala.tsx b/pages/arutala.tsx index c3fd457..6f6cd74 100644 --- a/pages/arutala.tsx +++ b/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).
+
+ +
); }; diff --git a/yarn.lock b/yarn.lock index 6b7ffe0..ad8006b 100644 --- a/yarn.lock +++ b/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/accordion@1.4.11": 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"