Merge pull request #89 from opendata-mvcr/feature/83-empty-term

[#83 #84] Empty term component + meta description
datagov-cz · Nov 19, 2021 · eeb3e29 · eeb3e29
2 parents d274bc1 + bf52b01
commit eeb3e29
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 26 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,29 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+<head>
+    <meta charset="utf-8"/>
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
     <meta
-      name="viewport"
-      content="minimum-scale=1, initial-scale=1, width=device-width"
+            name="viewport"
+            content="minimum-scale=1, initial-scale=1, width=device-width"
     />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <meta name="theme-color" content="#000000"/>
+    <meta name="description" content="Browsing Semantic Government Vocabulary"/>
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
+    <link rel="preconnect" href="https://fonts.googleapis.com"/>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
     <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"
-      rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"
+            rel="stylesheet"
     />
     <title>ShowIt</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+</body>
 </html>
diff --git a/src/assets/no_data.svg b/src/assets/no_data.svg
diff --git a/src/components/EmptyTerm.tsx b/src/components/EmptyTerm.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import { ReactComponent as NoData } from "../assets/no_data.svg";
+
+const EmptyTerm: React.FC = () => {
+  return (
+    <Box style={{ textAlign: "center" }} mt={4}>
+      <NoData style={{ maxHeight: 280, maxWidth: "80%", marginBottom: 30 }} />
+      <Box>
+        <Typography variant="h4">
+          Víc informací bohužel není k dispozici
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+export default EmptyTerm;
diff --git a/src/components/Hierarchy.tsx b/src/components/Hierarchy.tsx
@@ -19,7 +19,7 @@ export const Hierarchy: React.FC<HierarchyProps> = ({ term }) => {
   const currIndex = term.parentTerms ? 1 : 0;
   return (
     <Container>
-      <Box py={2} mb={10} px={2} mt={4}>
+      <Box py={2} mb={2} px={2} mt={4}>
         <Box borderLeft={4} pr={6} borderColor="primary.main">
           <Box pl={4}>
             <Typography variant="h5">Související pojmy</Typography>

diff --git a/src/components/TermPage.tsx b/src/components/TermPage.tsx
@@ -8,6 +8,8 @@ import { Hierarchy } from "./Hierarchy";
 import useURLTerm from "../hooks/useURLTerm";
 import Loader from "./Loader";
 import ErrorPage from "./ErrorPage";
+import EmptyTerm from "./EmptyTerm";
+import { isTermEmpty } from "../utils/TermUtils";
 
 const TermPage: React.FC = () => {
   const term = useURLTerm();
@@ -18,15 +20,22 @@ const TermPage: React.FC = () => {
   if (isError || !data) return <ErrorPage />;
 
   if (isSuccess) {
-    return (
-      <Box mb={2}>
-        <TermHeader term={data} />
+    const content = isTermEmpty(data) ? (
+      <EmptyTerm />
+    ) : (
+      <>
         <TermDefinition term={data} />
         <Hierarchy term={data} />
+      </>
+    );
+    return (
+      <Box>
+        <TermHeader term={data} />
+        {content}
       </Box>
     );
   }
+
   return <NoResults />;
 };
-
 export default TermPage;
diff --git a/src/utils/TermUtils.ts b/src/utils/TermUtils.ts
@@ -0,0 +1,11 @@
+import { TermInterface } from "../api/data/terms";
+
+//Checks whether term consists only of information which is displayed in the header (TermPage)
+export const isTermEmpty = (term: TermInterface) => {
+  return (
+    !term.parentTerms.length &&
+    !term.subTerms.length &&
+    !term.definition &&
+    !term.source
+  );
+};