systemseed · blakenetz · Oct 3, 2024 · Oct 3, 2024 · Oct 3, 2024 · Oct 3, 2024
diff --git a/.docker/docker-compose.yml b/.docker/docker-compose.yml
@@ -1,4 +1,3 @@
-version: '3'
 services:
 
   node:

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["nprogress"]
+}
diff --git a/react/.nvmrc b/react/.nvmrc
@@ -0,0 +1 @@
+v14.21.3
diff --git a/react/api/article.js b/react/api/article.js
diff --git a/react/api/article.ts b/react/api/article.ts
@@ -0,0 +1,38 @@
+import * as transforms from "../utils/transforms";
+import request from "../utils/request";
+
+/**
+ * Returns articles list from backend.
+ *
+ */
+export const getAll = (): Promise<{
+  articles: { title: string; id: string }[];
+  statusCode: number;
+}> =>
+  new Promise((resolve, reject) => {
+    request
+      .get("/api/articles")
+      .query({
+        "fields[node--article]": "id",
+      })
+      // Tell superagent to consider any valid Drupal response as successful.
+      // Later we can capture error codes if needed.
+      .ok((resp: any) => resp.statusCode)
+      .then((response: any) => {
+        resolve({
+          // eslint-disable-next-line max-len
+          articles:
+            response.statusCode === 200
+              ? response.body.data.map((article: any) =>
+                  transforms.article(article)
+                )
+              : [],
+          statusCode: response.statusCode,
+        });
+      })
+      .catch((error: any) => {
+        // eslint-disable-next-line no-console
+        console.error("Could not fetch the articles.", error);
+        reject(error);
+      });
+  });
diff --git a/react/components/01_atoms/ErrorMessage/index.js b/react/components/01_atoms/ErrorMessage/index.js
diff --git a/react/components/01_atoms/ErrorMessage/index.tsx b/react/components/01_atoms/ErrorMessage/index.tsx
@@ -0,0 +1,19 @@
+import "./_style.scss";
+import React from "react";
+import PropTypes from "prop-types";
+import { Link } from "../../../routes";
+
+const ErrorMessage = ({ statusCode }: any) => (
+  <div className="error-message">
+    {statusCode} error. <br />
+    <Link route="/">
+      <a>To the Homepage</a>
+    </Link>
+  </div>
+);
+
+ErrorMessage.propTypes = {
+  statusCode: PropTypes.number.isRequired,
+};
+
+export default ErrorMessage;
diff --git a/react/components/01_atoms/HtmlHead/index.js → react/components/01_atoms/HtmlHead/index.tsx b/react/components/01_atoms/HtmlHead/index.js → react/components/01_atoms/HtmlHead/index.tsx
@@ -1,13 +1,21 @@
-import React from 'react';
-import Head from 'next/head';
+import React from "react";
+import Head from "next/head";
 
 const HtmlHead = () => (
   <Head>
     <title>SystemSeed&apos;s Decoupled boilerplate</title>
+
     <meta charSet="utf-8" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+
     <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-    <link rel="shortcut icon" href="/static/favicon.ico" type="image/vnd.microsoft.icon" />
+
+    <link
+      rel="shortcut icon"
+      href="/static/favicon.ico"
+      type="image/vnd.microsoft.icon"
+    />
   </Head>
 );
 

diff --git a/react/components/01_atoms/MainMenu/index.js → react/components/01_atoms/MainMenu/index.tsx b/react/components/01_atoms/MainMenu/index.js → react/components/01_atoms/MainMenu/index.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
-import { Link } from '../../../routes';
+import React from "react";
+
+import { Link } from "../../../routes";
 
 const MainMenu = () => (
-  <Link to="/">
+  <Link route="/">
     <a className="nav-link">Home</a>
   </Link>
 );

diff --git a/react/components/01_atoms/PageProgressBar/index.js b/react/components/01_atoms/PageProgressBar/index.js
diff --git a/react/components/01_atoms/PageProgressBar/index.ts b/react/components/01_atoms/PageProgressBar/index.ts
@@ -0,0 +1,15 @@
+import "./_style.scss";
+import NProgress from "nprogress";
+import Router from "next/router";
+
+Router.events.on("onRouteChangeStart", () => {
+  NProgress.start();
+});
+
+Router.events.on("onRouteChangeComplete", () => {
+  NProgress.done();
+});
+
+Router.events.on("onRouteChangeError", () => {
+  NProgress.done();
+});
diff --git a/...onents/03_organisms/GlobalFooter/index.js → ...nents/03_organisms/GlobalFooter/index.tsx b/...onents/03_organisms/GlobalFooter/index.js → ...nents/03_organisms/GlobalFooter/index.tsx
diff --git a/...onents/03_organisms/GlobalHeader/index.js → ...nents/03_organisms/GlobalHeader/index.tsx b/...onents/03_organisms/GlobalHeader/index.js → ...nents/03_organisms/GlobalHeader/index.tsx
@@ -1,6 +1,6 @@
-import './_style.scss';
-import React from 'react';
-import MainMenu from '../../01_atoms/MainMenu';
+import "./_style.scss";
+import React from "react";
+import MainMenu from "../../01_atoms/MainMenu";
 
 const GlobalHeader = () => (
   <header>

diff --git a/react/components/04_templates/GlobalLayout/index.js b/react/components/04_templates/GlobalLayout/index.js
diff --git a/react/components/04_templates/GlobalLayout/index.tsx b/react/components/04_templates/GlobalLayout/index.tsx
@@ -0,0 +1,19 @@
+import "./_style.scss";
+import React from "react";
+import PropTypes from "prop-types";
+import GlobalHeader from "../../03_organisms/GlobalHeader";
+import GlobalFooter from "../../03_organisms/GlobalFooter";
+
+const GlobalLayout = ({ children }: any) => (
+  <>
+    <GlobalHeader />
+    <div className="content">{children}</div>
+    <GlobalFooter />
+  </>
+);
+
+GlobalLayout.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default GlobalLayout;
diff --git a/react/next-env.d.ts b/react/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="next" />
		/// <reference types="next/types/global" />