Make reusable page template component

Author: Daniel Fjeldstad

components/PageTemplate/PageTemplate.component.jsx

@@ -0,0 +1,35 @@
+import Header from 'components/Header/Header.component';
+import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
+import PageTitle from 'components/Title/PageTitle.component';
+
+/**
+ *
+ * Reusable template for pages
+ *
+ */
+
+const PageTemplate = ({ input, title, children }) => {
+  const error = false;
+
+  return (
+    <>
+      <Header title={title} />
+      <PageTitle title={title} />
+      {children}
+      {!input && !error && (
+        <div className="h-64 mt-8 text-2xl text-center">
+          Laster ...
+          <LoadingSpinner />
+        </div>
+      )}
+      {/* Display error message if error occured */}
+      {error && (
+        <div className="h-12 mt-20 text-2xl text-center">
+          Feil under lasting av produkter ...
+        </div>
+      )}
+    </>
+  );
+};
+
+export default PageTemplate;

pages/kategorier.js

@@ -1,7 +1,5 @@
-import Header from 'components/Header/Header.component';
 import Categories from 'components/Category/Categories.component';
-import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
-import PageTitle from 'components/Title/PageTitle.component';
+import PageTemplate from 'components/PageTemplate/PageTemplate.component';
 
 import client from 'utils/apollo/ApolloClient.js';
 
@@ -11,29 +9,11 @@ import { FETCH_ALL_CATEGORIES_QUERY } from 'utils/gql/GQL_QUERIES';
  * Category page displays all of the categories
  */
 const CategoryPage = ({ categories }) => {
-  const error = false;
-
   return (
     <>
-      <Header title="- Kategorier" />
-      <PageTitle title="Kategorier" />
-
-      {categories && <Categories categories={categories} />}
-
-      {!categories && !error && (
-        <div className="h-64 mt-8 text-2xl text-center">
-          Laster ...
-          <br />
-          <LoadingSpinner />
-        </div>
-      )}
-
-      {/* Display error message if error occured */}
-      {error && (
-        <div className="h-12 mt-20 text-2xl text-center">
-          Feil under lasting av kategorier ...
-        </div>
-      )}
+      <PageTemplate title="Kategorier" input={categories}>
+        {categories && <Categories categories={categories} />}
+      </PageTemplate>
     </>
   );
 };

pages/produkter.js

@@ -1,7 +1,5 @@
-import Header from 'components/Header/Header.component';
 import IndexProducts from 'components/Product/IndexProducts.component';
-import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
-import PageTitle from 'components/Title/PageTitle.component';
+import PageTemplate from 'components/PageTemplate/PageTemplate.component';
 
 import { FETCH_ALL_PRODUCTS_QUERY } from 'utils/gql/GQL_QUERIES';
 
@@ -14,29 +12,11 @@ import client from 'utils/apollo/ApolloClient.js';
  * Shows an error if the server is down or unreachable.
  */
 const Produkter = ({ products }) => {
-  const error = false;
-
   return (
     <>
-      <Header title="- Produkter" />
-      <PageTitle title="Produkter" />
-
-      {products && <IndexProducts products={products} />}
-
-      {!products && !error && (
-        <div className="h-64 mt-8 text-2xl text-center">
-          Laster ...
-          <br />
-          <LoadingSpinner />
-        </div>
-      )}
-
-      {/* Display error message if error occured */}
-      {error && (
-        <div className="h-12 mt-20 text-2xl text-center">
-          Feil under lasting av produkter ...
-        </div>
-      )}
+      <PageTemplate title="Produkter" input={products}>
+        {products && <IndexProducts products={products} />}
+      </PageTemplate>
     </>
   );
 };