Add Chuck Norris Facts

koldakov · Nov 19, 2023 · f15c06f · f15c06f
1 parent c387ccf
commit f15c06f
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 0 deletions.
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,4 +1,6 @@
+import { useState } from 'react';
 import { Badge, Button, ButtonGroup, Card, Col, Row } from "react-bootstrap";
+import Modal from 'react-bootstrap/Modal';
 import { saveAs } from "file-saver";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -10,6 +12,8 @@ import "./Home.css";
 
 export const Home = () => {
   const { t } = useTranslation();
+  const [showChuckNorrisFact, setShowChuckNorrisFact] = useState(false);
+  const [chuckNorrisFact, setChuckNorrisFact] = useState("...");
 
   const saveCV = () => {
     saveAs(cv, "Koldakov_Ivan_CV.pdf");
@@ -182,6 +186,26 @@ export const Home = () => {
     }
   ];
 
+  const getChuckNorrisFact = () => {
+    fetch("https://api.chucknorris.io/jokes/random")
+      .then(response => response.json())
+      .then(json => setChuckNorrisFact(json["value"]))
+      .catch(error => {
+        console.error(error);
+        setChuckNorrisFact(t("UnknownHTTPError.text"))
+      });
+  }
+
+  const handleCloseChuckNorrisFact = () => {
+    setShowChuckNorrisFact(false);
+    setChuckNorrisFact("...");
+  }
+
+  const handleShowChuckNorrisFact = () => {
+    getChuckNorrisFact();
+    setShowChuckNorrisFact(true);
+  }
+
   return(
     <>
       <Row>
@@ -202,6 +226,13 @@ export const Home = () => {
               >
                 {t("DownloadCV.text")}
               </Button>
+              <Button
+                className="mt-2"
+                variant="success"
+                onClick={handleShowChuckNorrisFact}
+              >
+                {t("GetChuckNorrisFact.text")}
+              </Button>
             </ButtonGroup>
           </Card>
         </Col>
@@ -365,6 +396,14 @@ export const Home = () => {
           </Card>
         </Col>
       </Row>
+      <Modal show={showChuckNorrisFact} onHide={handleCloseChuckNorrisFact}>
+        <Modal.Body>{chuckNorrisFact}</Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={handleCloseChuckNorrisFact}>
+            {t("Close.text")}
+          </Button>
+        </Modal.Footer>
+      </Modal>
     </>
   );
 }
diff --git a/src/translations/resources.json b/src/translations/resources.json
@@ -165,6 +165,15 @@
       },
       "CookieButton": {
         "text": "Got it"
+      },
+      "GetChuckNorrisFact": {
+        "text": "Get Chuck Norris fact"
+      },
+      "Close": {
+        "text": "Close"
+      },
+      "UnknownHTTPError": {
+        "text": "Something went wrong. Try again later."
       }
     }
   },
@@ -313,6 +322,15 @@
       },
       "CookieButton": {
         "text": "Понимаю"
+      },
+      "GetChuckNorrisFact": {
+        "text": "Быстрый факт о Чаке Норрисе"
+      },
+      "Close": {
+        "text": "Закрыть"
+      },
+      "UnknownHTTPError": {
+        "text": "Что-то пошло не так, попробуйте повторить запрос."
       }
     }
   }