Feature/XW-127/api-changes

.github/workflows/woo-page-deploy.yml

@@ -9,13 +9,18 @@ env: # Change these to your preferences any image url can also be a base encoded
   GITHUB_REPOSITORY_NAME: ${{ github.event.repository.name }}
   API_BASE_URL: "https://api.gateway.commonground.nu/api"
   NL_DESIGN_THEME_CLASSNAME: "conduction-theme"
+  DEV_ENVIRONMENT: "true"
+  SHOW_CATEGORY: "true"
+  SHOW_ORGANIZATION: "true"
   FAVICON_URL: "https://conduction.nl/wp-content/uploads/2021/07/cropped-favicon-32x32.png"
   HEADER_LOGO_URL: "https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png"
   ORGANISATION_NAME: "Conduction"
   JUMBOTRON_IMAGE_URL: "https://www.conduction.nl/wp-content/uploads/2021/07/cropped-Conduction_HOME_0000_afb1-1.png"
   FOOTER_LOGO_URL: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgd2lkdGg9IjcxLjAwMDAwMHB0IiBoZWlnaHQ9IjcwLjAwMDAwMHB0IiB2aWV3Qm94PSIwIDAgNzEuMDAwMDAwIDcwLjAwMDAwMCIKICAgICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4KCiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCw3MC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCiAgICAgICBmaWxsPSIjNDM3NkZDIiBzdHJva2U9Im5vbmUiPgogICAgICAgIDxwYXRoIGQ9Ik0yMTggNTkyIGwtMTM3IC03NyAwIC0xNjUgMCAtMTY1IDEzMSAtNzQgYzcyIC00MSAxMzcgLTc0IDE0MyAtNzQgNgowIDcwIDMzIDE0MyA3NCBsMTMxIDc0IDEgMTY1IDAgMTY1IC02OCAzNyBjLTM3IDIxIC05OSA1NiAtMTM3IDc3IGwtNzEgNDAKLTEzNiAtNzd6IG0yOTUgLTg1IGw1NyAtMzIgMCAtMTI1IDAgLTEyNSAtMTA2IC02MCBjLTU4IC0zMyAtMTA4IC02MCAtMTExCi01OSAtMyAwIC01MiAyNyAtMTA5IDYwIGwtMTAzIDU5IDAgMTI1IDAgMTI1IDEwNyA2MSAxMDcgNjIgNTAgLTI5IGMyNyAtMTYKNzYgLTQ0IDEwOCAtNjJ6Ii8+CiAgICAgICAgPHBhdGggZD0iTTI3OCA0NzIgbC02OCAtMzcgMCAtODUgMCAtODUgNzMgLTM5IDczIC0zOSA2MiAzNCBjMzQgMTggNjIgMzcgNjIKNDEgMCA0IC0xNCAxNSAtMzEgMjMgLTI4IDE1IC0zMyAxNSAtNTQgMSAtMzEgLTIwIC00NiAtMjAgLTg0IDIgLTI3IDE1IC0zMQoyMiAtMzEgNjIgMCA0MCA0IDQ3IDMxIDYzIDM4IDIxIDUzIDIxIDg0IDEgMjEgLTE0IDI2IC0xNCA1NCAxIDE3IDggMzEgMTkgMzEKMjMgMCA4IC0xMTMgNzIgLTEyNiA3MiAtNSAwIC0zOSAtMTcgLTc2IC0zOHoiLz4KICAgIDwvZz4KPC9zdmc+Cg=="
-  FOOTER_LOGO_HREF: "https://conduction.nl/"
+  FOOTER_LOGO_HREF: "https://conduction.nl/",
+  FOOTER_CONTENT: "https://raw.githubusercontent.com/ConductionNL/woo-website-template/main/pwa/src/templates/templateParts/footer/FooterContent.json"
   # OIDN_NUMBER: " "
+  ENV_VARS_SET: "true"
 
 on:
   push:
@@ -41,13 +46,18 @@ jobs:
           envkey_USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX: ${{ env.USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX }}
           envkey_GATSBY_API_BASE_URL: ${{ env.API_BASE_URL }}
           envkey_GATSBY_NL_DESIGN_THEME_CLASSNAME: ${{ env.NL_DESIGN_THEME_CLASSNAME }}
+          envkey_GATSBY_DEV_ENVIRONMENT: ${{ env.DEV_ENVIRONMENT }}
+          envkey_GATSBY_SHOW_CATEGORY: ${{ env.SHOW_CATEGORY }}
+          envkey_GATSBY_SHOW_ORGANIZATION: ${{ env.SHOW_ORGANIZATION }}
           envkey_GATSBY_FAVICON_URL: ${{ env.FAVICON_URL }}
           envkey_GATSBY_HEADER_LOGO_URL: ${{ env.HEADER_LOGO_URL }}
           envkey_GATSBY_ORGANISATION_NAME: ${{ env.ORGANISATION_NAME }}
           envkey_GATSBY_JUMBOTRON_IMAGE_URL: ${{ env.JUMBOTRON_IMAGE_URL }}
           envkey_GATSBY_FOOTER_LOGO_URL: ${{ env.FOOTER_LOGO_URL }}
           envkey_GATSBY_FOOTER_LOGO_HREF: ${{ env.FOOTER_LOGO_HREF }}
+          envkey_GATSBY_FOOTER_CONTENT: ${{ env.FOOTER_CONTENT }}
           # envkey_GATSBY_OIDN_NUMBER: ${{ env.OIDN_NUMBER }}
+          envkey_GATSBY_ENV_VARS_SET: ${{ env.ENV_VARS_SET }}
           directory: pwa/static
           file_name: .env.production
           fail_on_empty: true
@@ -56,11 +66,14 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 18
 
       - name: Install dependencies
         run: cd pwa && npm install
 
+      - name: Install parcel/watcher
+        run: cd pwa && npm install @parcel/watcher
+
       - name: Remove old Gatsby cache
         run: rm -rf pwa/.cache
 

pwa/package.json

@@ -23,11 +23,11 @@
   },
   "dependencies": {
     "@conduction/components": "2.2.36",
-    "@conduction/theme": "1.0.55",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-brands-svg-icons": "6.4.2",
-    "@fortawesome/free-regular-svg-icons": "6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@conduction/theme": "1.0.56",
+    "@fortawesome/fontawesome-svg-core": "^6.5.0",
+    "@fortawesome/free-brands-svg-icons": "6.5.0",
+    "@fortawesome/free-regular-svg-icons": "6.5.0",
+    "@fortawesome/free-solid-svg-icons": "^6.5.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@nl-design-system-unstable/amsterdam-design-tokens": "^1.0.0-alpha.128",
     "@nl-design-system-unstable/bodegraven-reeuwijk-design-tokens": "^1.0.0-alpha.121",
@@ -69,7 +69,7 @@
     "gatsby-plugin-breadcrumb": "^12.3.2",
     "gatsby-plugin-layout": "^4.12.0",
     "html-react-parser": "^5.0.6",
-    "i18next": "^23.7.6",
+    "i18next": "^23.7.7",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "qs": "^6.11.2",

pwa/src/apiService/resources/availableFilters.ts

@@ -11,10 +11,10 @@ export default class AvailableFilters {
   }
 
   public getCategories = async (): Promise<any> => {
-    let endpoint = "/openWOO?_queries[]=categorie";
+    let endpoint = "/publicaties?_queries[]=categorie";
 
     if (window.sessionStorage.getItem("OIDN_NUMBER")) {
-      endpoint += `&embedded.behandelendBestuursorgaan.oidn=${window.sessionStorage.getItem("OIDN_NUMBER")}`;
+      endpoint += `&organisatie.oin=${window.sessionStorage.getItem("OIDN_NUMBER")}`;
     }
 
     const { data } = await this._send(this._instance, "GET", endpoint);

pwa/src/apiService/resources/openWoo.ts

@@ -15,12 +15,12 @@ export default class OpenWoo {
   }
 
   public getAll = async (filters: IFiltersContext, currentPage: number, limit: number): Promise<any> => {
-    let endpoint = `/openWOO?extend[]=all${filtersToQueryParams(
+    let endpoint = `/publicaties?extend[]=all${filtersToQueryParams(
       filters,
     )}&_order[publicatiedatum]=desc&_limit=${limit}&_page=${currentPage}`;
 
     if (window.sessionStorage.getItem("OIDN_NUMBER")) {
-      endpoint += `&embedded.behandelendBestuursorgaan.oidn=${window.sessionStorage.getItem("OIDN_NUMBER")}`;
+      endpoint += `&organisatie.oin=${window.sessionStorage.getItem("OIDN_NUMBER")}`;
     }
 
     const { data } = await this._send(this._instance, "GET", endpoint);
@@ -29,7 +29,7 @@ export default class OpenWoo {
   };
 
   public getOne = async (id: string): Promise<any> => {
-    const { data } = await this._send(this._instance, "GET", `/openWOO/${id}`);
+    const { data } = await this._send(this._instance, "GET", `/publicaties/${id}`);
 
     return data;
   };

pwa/src/templates/landing/LandingTemplate.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import * as styles from "./LandingTemplate.module.css";
+import Skeleton from "react-loading-skeleton";
 import { Page, PageContent } from "@utrecht/component-library-react/dist/css-module";
 import { FiltersTemplate } from "../templateParts/filters/FiltersTemplate";
 import { ResultsDisplayTemplate } from "../templateParts/resultsDisplayTemplate/ResultsDisplayTemplate";
 import { JumbotronTemplate } from "../jumbotronTemplate/JumbotronTemplate";
 import { useOpenWoo } from "../../hooks/openWoo";
 import { useFiltersContext } from "../../context/filters";
-import Skeleton from "react-loading-skeleton";
 import { QueryClient } from "react-query";
 import { Pagination } from "@conduction/components";
 import { usePaginationContext } from "../../context/pagination";

pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx

@@ -19,16 +19,14 @@ export const CardsResultsTemplate: React.FC<CardsResultsTemplateProps> = ({ requ
       <div className={styles.componentsGrid}>
         {requests.map((request) => (
           <CardWrapper
-            key={request._self.id}
+            key={request._id}
             className={styles.cardContainer}
-            onClick={() => navigate(request._self.id)}
+            onClick={() => navigate(request._id)}
             tabIndex={0}
             aria-label={`${
               request.publicatiedatum ? translateDate(i18n.language, request.publicatiedatum) : t("N/A")
             }, ${request.titel}, ${request.samenvatting} ${
-              window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true"
-                ? `,${request.embedded?.behandelendBestuursorgaan?.naam}`
-                : ""
+              window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true" ? `,${request.organisatie?.naam}` : ""
             } ${
               window.sessionStorage.getItem("SHOW_CATEGORY") === "true"
                 ? `, ${t("Category")}, ${request.categorie}`
@@ -52,7 +50,7 @@ export const CardsResultsTemplate: React.FC<CardsResultsTemplateProps> = ({ requ
                 {window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true" && (
                   <CardHeaderDate>
                     <span data-tooltip-id={TOOLTIP_ID} data-tooltip-content={t("Municipality")}>
-                      {request.embedded?.behandelendBestuursorgaan?.naam}
+                      {request.organisatie?.naam}
                     </span>
                   </CardHeaderDate>
                 )}

pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx

@@ -51,15 +51,13 @@ export const TableResultsTemplate: React.FC<TableResultsTemplateProps> = ({ requ
           {requests.map((request) => (
             <TableRow
               className={styles.tableRow}
-              key={request._self.id}
-              onClick={() => navigate(request._self.id)}
+              key={request._id}
+              onClick={() => navigate(request._id)}
               tabIndex={0}
               aria-label={`${request.titel},  ${
                 request.publicatiedatum ? translateDate(i18n.language, request.publicatiedatum) : t("N/A")
               } ${
-                window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true"
-                  ? `,${request.embedded?.behandelendBestuursorgaan?.naam}`
-                  : ""
+                window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true" ? `,${request.organisatie?.naam}` : ""
               } ${window.sessionStorage.getItem("SHOW_CATEGORY") === "true" ? `, ${request.categorie}` : ""}, ${
                 request.samenvatting
               }`}
@@ -75,7 +73,7 @@ export const TableResultsTemplate: React.FC<TableResultsTemplateProps> = ({ requ
                 <>
                   {window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true" && (
                     <TableCell className={styles.categoryAndMunicipality}>
-                      {request.embedded?.behandelendBestuursorgaan?.naam ?? t("No municipality available")}
+                      {request.organisatie?.naam ?? t("No municipality available")}
                     </TableCell>
                   )}
                   {window.sessionStorage.getItem("SHOW_CATEGORY") === "true" && (