add feature - random company

src/contributor/index.js

@@ -15,6 +15,7 @@ import RandomKanji from "./random-kanji";
 import RandomPixelMonstersImage from "./random-pixel-monsters-image";
 import RandomAiArtImage from "./random-ai-art";
 import RandomQuotesApi from "./random-quote";
+import RandomCompany from "./random-company";
 
 export const data_contributor = [
   RandomFoxImage,
@@ -34,4 +35,5 @@ export const data_contributor = [
   RandomPixelMonstersImage,
   RandomAiArtImage,
   RandomQuotesApi,
+  RandomCompany,
 ];

src/contributor/random-company.js

@@ -0,0 +1,55 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+// components
+import { Card } from "../components";
+// baseurl api's
+const BASE_URL = "https://random-data-api.com/api/company/random_company";
+
+const RandomCompany = () => {
+  const [dispatching, setDispatching] = useState(false);
+  const [data, setData] = useState();
+
+  const getRandomCompany = async () => {
+    setDispatching(true);
+    const response = await axios.get(BASE_URL);
+    if (response.status !== 200) {
+      throw new Error("Fetching err");
+    }
+    setData(response.data);
+    setDispatching(false);
+  };
+
+  useEffect(() => {
+    getRandomCompany();
+    return () => {
+      setDispatching(false);
+    };
+  }, []);
+
+  return (
+    <Card
+      data={{
+        username: "anggaalfiansah",
+        avatar: "https://avatars.githubusercontent.com/u/70573978?v=4",
+        apiUrl: `https://random-data-api.com/api/company/random_company`,
+        apiName: "Random Company",
+        apiDescription: "generating random company.",
+      }}
+    >
+      {dispatching ? (
+        <p className="text-m my-3 text-center">Loading...</p>
+      ) : data && (
+        <div className="border p-2">
+          <img className="rounded-sm pt-2 pl-5 pr-5 pb-1" src={data.logo} alt="techImage" />
+          <div className="mt-1 text-lg text-center font-bold">{data.business_name}</div>
+          <div className="text-center">{data.bs_company_statement}</div>
+          <hr />
+          <div className="mt-2 text-center">{data.full_address}</div>
+          <div className="text-center font-bold">{data.phone_number}</div>
+        </div>
+      )}
+    </Card>
+  );
+};
+
+export default RandomCompany;