Merge branch 'oprava-keycloak' into 'main'

Oprava keycloak

See merge request !2

.env

 REACT_APP_STYLEGUIDE_URL=https://styleguide.pirati.cz/2.11.0
-REACT_APP_API_BASE_URL=https://cf2023.online/api
+REACT_APP_API_BASE_URL=https://cf2024.online/api
 REACT_APP_MATOMO_ID=135
-REACT_APP_SENTRY_DSN=https://aa80453ff4d54b9a9c1b49e79060498a@sentry.pir-test.eu/14
+REACT_APP_SENTRY_DSN=https://aa80453ff4d54b9a9c1b49e79060498a@sentry.pirati.cz/14

.gitlab-ci.yml

-image: node:14.13
+image: node:18.20.4-bullseye
 
 variables:
-  SITE_NAME: cf2021.pirati.cz
+  SITE_NAME: cf2024.online
+
   ARTIFACTS_PATH: build
   REACT_APP_API_BASE_URL: /api
   WEBHOOK_URL: https://ha-web.pirati.cz
@@ -12,7 +13,7 @@ before_script:
 build:
   stage: build
   script:
-    - npm install
+    - npm install --legacy-peer-deps
     - npm run build
   after_script:
     - echo "{\"name\":\"$SITE_NAME\" }" > request.json
@@ -20,5 +21,5 @@ build:
   artifacts:
     expire_in: 30 min
     paths:
-     - $ARTIFACTS_PATH
+      - $ARTIFACTS_PATH
 

.nvmrc

-14.13
\ No newline at end of file
+18.20.4

Dockerfile

-FROM node:14.13-alpine3.12 as build
+FROM node:18.20.4-alpine AS build
 
-ARG BUILD_REACT_APP_STYLEGUIDE_URL
-
-ENV REACT_APP_STYLEGUIDE_URL=${BUILD_REACT_APP_STYLEGUIDE_URL}
+ENV REACT_APP_STYLEGUIDE_URL="https://styleguide.pirati.cz/2.12.1"
+ENV REACT_APP_API_BASE_URL=https://cf2024.online/api
+ENV REACT_APP_MATOMO_ID=135
+ENV REACT_APP_SENTRY_DSN=https://aa80453ff4d54b9a9c1b49e79060498a@sentry.pirati.cz/14
 
 RUN mkdir -p /home/node/cf2021
 
@@ -10,7 +11,7 @@ WORKDIR /home/node/cf2021
 
 COPY package*.json ./
 
-RUN npm ci
+RUN npm ci --legacy-peer-deps
 
 COPY . .
 
@@ -18,7 +19,7 @@ RUN npm run build
 
 # ---
 
-FROM nginx:alpine as production
+FROM nginx:alpine AS production
 
 COPY --from=build /home/node/cf2021/build /usr/share/nginx/html/
 COPY docker/nginx.conf /etc/nginx/conf.d/default.conf

Dockerfile.development

-FROM node:14.13-alpine3.12
+FROM node:18.20.4-alpine
 
 #  libs for development -- most of theme needed for canvas support in tests
 RUN apk add --no-cache \
-    build-base \
-    g++ \
-    libpng \
-    libpng-dev \
-    jpeg-dev \
-    pango-dev \
-    cairo-dev \
-    giflib-dev \
-    python3 \
-    ;
+  build-base \
+  g++ \
+  libpng \
+  libpng-dev \
+  jpeg-dev \
+  pango-dev \
+  cairo-dev \
+  giflib-dev \
+  python3 \
+  ;
 
 WORKDIR /app/cf2021
 
 COPY package*.json ./
 
-RUN npm ci
+RUN npm ci --legacy-peer-deps
 
 COPY . .
 

compose.yaml

+services:
+  app:
+    image: cf-online
+    ports:
+      - "3000:80"
+

eslint.config.mjs

+import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import jestDom from "eslint-plugin-jest-dom";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import testingLibrary from "eslint-plugin-testing-library";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+const eslintConfig = [
+  ...fixupConfigRules(
+    compat.extends(
+      "react-app",
+      "plugin:prettier/recommended",
+      "plugin:testing-library/dom",
+      "plugin:jest-dom/recommended",
+    ),
+  ),
+  {
+    plugins: {
+      "simple-import-sort": simpleImportSort,
+      "testing-library": fixupPluginRules(testingLibrary),
+      "jest-dom": fixupPluginRules(jestDom),
+    },
+
+    rules: {
+      "sort-imports": "off",
+      "prettier/prettier": "warn",
+      "react/no-unknown-property": [1],
+
+      "simple-import-sort/imports": [
+        "warn",
+        {
+          groups: [
+            ["^react", "^@?\\w"],
+            [
+              "^(api|actions|config|hooks|components|containers|pages|utils|stores|keycloak|markdown|ws)(/.*|$)",
+            ],
+            ["^(test-utils)(/.*|$)"],
+            ["^\\u0000"],
+            ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+            ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+            ["^.+\\.s?css$"],
+          ],
+        },
+      ],
+
+      "testing-library/await-async-queries": "error",
+      "testing-library/no-await-sync-queries": "error",
+      "testing-library/no-debugging-utils": "warn",
+      "jest-dom/prefer-checked": "error",
+      "jest-dom/prefer-enabled-disabled": "error",
+      "jest-dom/prefer-required": "error",
+      "jest-dom/prefer-to-have-attribute": "error",
+    },
+  },
+];
+
+export default eslintConfig;

package.json

@@ -3,38 +3,35 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@react-keycloak/web": "^2.1.4",
-    "@rooks/use-interval": "^4.5.0",
-    "@rooks/use-outside-click": "^4.5.0",
-    "@rooks/use-timeout": "^4.5.0",
-    "@rooks/use-window-size": "^4.5.0",
-    "@sentry/integrations": "^5.29.2",
-    "@sentry/react": "^5.29.2",
-    "@sentry/tracing": "^5.29.2",
-    "classnames": "^2.2.6",
-    "crypto-js": "^3.3.0",
-    "date-fns": "^2.16.1",
-    "i": "^0.3.6",
-    "immer": "^7.0.15",
-    "keycloak-js": "^10.0.2",
-    "lodash": "^4.17.20",
-    "npm": "^6.14.10",
-    "pullstate": "^1.20.5",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-helmet-async": "^1.0.7",
-    "react-hint": "^3.2.0",
-    "react-intersection-observer": "^8.31.0",
-    "react-joyride": "^2.3.0",
-    "react-mde": "^11.0.0",
-    "react-modal": "^3.12.1",
-    "react-player": "^2.7.2",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3",
-    "showdown": "^1.9.1",
-    "unfetch": "^4.2.0",
+    "@react-keycloak/web": "^3.4.0",
+    "@rooks/use-interval": "^4.11.2",
+    "@rooks/use-outside-click": "^4.11.2",
+    "@rooks/use-timeout": "^4.11.2",
+    "@rooks/use-window-size": "^4.11.2",
+    "@sentry/integrations": "^7.119.2",
+    "@sentry/react": "^8.34.0",
+    "@sentry/tracing": "^7.119.2",
+    "ajv": "^8.17.1",
+    "classnames": "^2.5.1",
+    "crypto-js": "^4.2.0",
+    "date-fns": "^4.1.0",
+    "keycloak-js": "^26.0.0",
+    "lodash": "^4.17.21",
+    "pullstate": "^1.25.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-helmet-async": "^2.0.5",
+    "react-hint": "^3.2.1",
+    "react-intersection-observer": "^9.13.1",
+    "react-joyride": "^2.9.2",
+    "react-mde": "^11.5.0",
+    "react-modal": "^3.16.1",
+    "react-player": "^2.16.0",
+    "react-router-dom": "^6.27.0",
+    "react-scripts": "^5.0.1",
+    "showdown": "^2.1.0",
     "wait-queue": "^1.1.4",
-    "xss": "^1.0.8"
+    "xss": "^1.0.15"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -45,65 +42,6 @@
     "lint:fix": "eslint --cache --fix 'src/**/*.{js,jsx}'",
     "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "plugin:prettier/recommended",
-      "plugin:testing-library/recommended",
-      "plugin:jest-dom/recommended"
-    ],
-    "plugins": [
-      "simple-import-sort",
-      "testing-library",
-      "jest-dom"
-    ],
-    "rules": {
-      "sort-imports": "off",
-      "prettier/prettier": "warn",
-      "react/no-unknown-property": [
-        1
-      ],
-      "simple-import-sort/sort": [
-        "warn",
-        {
-          "groups": [
-            [
-              "^react",
-              "^@?\\w"
-            ],
-            [
-              "^(api|actions|config|hooks|components|containers|pages|utils|stores|keycloak|markdown|ws)(/.*|$)"
-            ],
-            [
-              "^(test-utils)(/.*|$)"
-            ],
-            [
-              "^\\u0000"
-            ],
-            [
-              "^\\.\\.(?!/?$)",
-              "^\\.\\./?$"
-            ],
-            [
-              "^\\./(?=.*/)(?!/?$)",
-              "^\\.(?!/?$)",
-              "^\\./?$"
-            ],
-            [
-              "^.+\\.s?css$"
-            ]
-          ]
-        }
-      ],
-      "testing-library/await-async-query": "error",
-      "testing-library/no-await-sync-query": "error",
-      "testing-library/no-debug": "warn",
-      "jest-dom/prefer-checked": "error",
-      "jest-dom/prefer-enabled-disabled": "error",
-      "jest-dom/prefer-required": "error",
-      "jest-dom/prefer-to-have-attribute": "error"
-    }
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -117,23 +55,27 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^4.0.0",
-    "@testing-library/react": "^10.4.4",
-    "@testing-library/react-hooks": "^3.4.2",
-    "@testing-library/user-event": "^12.1.7",
+    "@eslint/compat": "^1.2.0",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.12.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jest-dom": "^3.6.3",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-simple-import-sort": "^5.0.3",
-    "eslint-plugin-testing-library": "^3.8.0",
-    "prettier": "^2.1.1",
-    "source-map-explorer": "^2.5.1"
+    "eslint": "^9.12.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest-dom": "^5.4.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-testing-library": "^6.3.0",
+    "prettier": "^3.3.3",
+    "source-map-explorer": "^2.5.3",
+    "typescript": "^5.6.3"
   }
 }

public/index.html

@@ -14,12 +14,12 @@
     <meta name="msapplication-square310x310logo" content="%REACT_APP_STYLEGUIDE_URL%/images/favicons/mstile-310x310.png">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
-    <meta property="og:url" content="https://cf2023.online/" />
+    <meta property="og:url" content="https://cf2024.online/" />
     <meta property="og:type" content="website" />
-    <meta property="og:title" content="CF 2023 | Pirátská strana" />
-    <meta property="og:image" content="https://cf2023.online/img/og.png" />
-    <meta property="og:description" content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 29. 4. 2023." />
-    <meta name="description" content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 29. 4. 2023." />
+    <meta property="og:title" content="CF 2024 | Pirátská strana" />
+    <meta property="og:image" content="https://cf2023.online/img/og2024.png" />
+    <meta property="og:description" content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024." />
+    <meta name="description" content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024." />
 
     <title>CF 2023 | Pirátská strana</title>
     <!--
@@ -37,7 +37,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <link rel="stylesheet" href="%REACT_APP_STYLEGUIDE_URL%/css/styles.css" />
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
+    <!--<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>-->
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/App.jsx

 import React, { Suspense, useEffect } from "react";
 import { Helmet, HelmetProvider } from "react-helmet-async";
 import ReactHintFactory from "react-hint";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import { KeycloakProvider } from "@react-keycloak/web";
-import { ExtraErrorData } from "@sentry/integrations/dist/extraerrordata";
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import { ReactKeycloakProvider as KeycloakProvider } from "@react-keycloak/web";
+import { extraErrorDataIntegration } from "@sentry/integrations";
 import * as Sentry from "@sentry/react";
-import { Integrations } from "@sentry/tracing";
+import { browserTracingIntegration } from "@sentry/browser"
 
 import { loadAnnouncements } from "actions/announcements";
 import { loadConfig } from "actions/global-info";
@@ -33,7 +33,7 @@ if (process.env.REACT_APP_SENTRY_DSN) {
   Sentry.init({
     dsn: process.env.REACT_APP_SENTRY_DSN,
     tracesSampleRate: 0.1,
-    integrations: [new ExtraErrorData(), new Integrations.BrowserTracing()],
+    integrations: [extraErrorDataIntegration(), browserTracingIntegration()],
   });
 }
 
@@ -89,7 +89,7 @@ const LoadingComponent = (
           className="w-16 mb-2"
           alt="Pirátská strana"
         />
-        <h1 className="head-alt-md md:head-alt-lg">Celostátní fórum 2023</h1>
+        <h1 className="head-alt-md md:head-alt-lg">Celostátní fórum 2024</h1>
       </div>
       <p className="text-center head-xs md:head-base">Načítám aplikaci ...</p>
     </div>
@@ -105,25 +105,25 @@ const BaseApp = () => {
     <HelmetProvider>
       <Router>
         <Helmet>
-          <title>CF 2023 | Pirátská strana</title>
+          <title>CF 2024 | Pirátská strana</title>
           <meta
             name="description"
-            content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 29. 4. 2023."
+            content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
           />
-          <meta property="og:title" content="CF 2023 | Pirátská strana" />
+          <meta property="og:title" content="CF 2024 | Pirátská strana" />
           <meta
             property="og:description"
-            content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 29. 4. 2023."
+            content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024."
           />
         </Helmet>
         <Navbar />
-        <Switch>
-          <Route exact path="/" children={<Home />} />
-          <Route exact path="/program" children={<Program />} />
-          <Route exact path="/protocol" children={<Protocol />} />
-          <Route exact path="/about" children={<About />} />
-          <Route component={NotFound} />
-        </Switch>
+        <Routes>
+          <Route exact path="/" element={<Home />} />
+          <Route exact path="/program" element={<Program />} />
+          <Route exact path="/protocol" element={<Protocol />} />
+          <Route exact path="/about" element={<About />} />
+          <Route element={NotFound} />
+        </Routes>
         <Footer />
       </Router>
       <ReactHint autoPosition events attribute="data-tip" className="tooltip" />
@@ -155,7 +155,7 @@ const AuthenticatedApp = () => {
   return (
     <>
       <KeycloakProvider
-        keycloak={keycloak}
+        authClient={keycloak}
         initConfig={keycloakInitConfig}
         LoadingComponent={LoadingComponent}
         onEvent={onKeycloakEvent}

src/App.test.js

 import React from "react";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 
 import App from "./App";
 
 test("renders learn react link", () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
 });

src/actions/announcements.js

@@ -2,7 +2,7 @@ import keyBy from "lodash/keyBy";
 import property from "lodash/property";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
 
-import { fetch } from "api";
+import { fetchApi } from "api";
 import { AnnouncementStore } from "stores";
 import {
   announcementTypeMappingRev,
@@ -15,7 +15,7 @@ import {
 export const loadAnnouncements = createAsyncAction(
   async () => {
     try {
-      const resp = await fetch("/announcements");
+      const resp = await fetchApi("/announcements");
       const data = await resp.json();
       return successResult(data.data);
     } catch (err) {
@@ -33,7 +33,7 @@ export const loadAnnouncements = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 /**
@@ -47,7 +47,7 @@ export const addAnnouncement = createAsyncAction(
         link,
         type: announcementTypeMappingRev[type],
       });
-      const resp = await fetch("/announcements", {
+      const resp = await fetchApi("/announcements", {
         method: "POST",
         body,
         expectedStatus: 201,
@@ -57,7 +57,7 @@ export const addAnnouncement = createAsyncAction(
     } catch (err) {
       return errorResult([], err.toString());
     }
-  }
+  },
 );
 
 /**
@@ -70,7 +70,7 @@ export const deleteAnnouncement = createAsyncAction(
    */
   async (item) => {
     try {
-      await fetch(`/announcements/${item.id}`, {
+      await fetchApi(`/announcements/${item.id}`, {
         method: "DELETE",
         expectedStatus: 204,
       });
@@ -78,7 +78,7 @@ export const deleteAnnouncement = createAsyncAction(
     } catch (err) {
       return errorResult([], err.toString());
     }
-  }
+  },
 );
 
 /**
@@ -93,7 +93,7 @@ export const updateAnnouncement = createAsyncAction(
   async ({ item, payload }) => {
     try {
       const body = JSON.stringify(payload);
-      await fetch(`/announcements/${item.id}`, {
+      await fetchApi(`/announcements/${item.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -102,7 +102,7 @@ export const updateAnnouncement = createAsyncAction(
     } catch (err) {
       return errorResult([], err.toString());
     }
-  }
+  },
 );
 
 const { markSeen: storeSeen } = createSeenWriter(seenAnnouncementsLSKey);

src/actions/global-info.js

 import isArray from "lodash/isArray";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
-import baseFetch from "unfetch";
 
-import { fetch } from "api";
+import { fetchApi } from "api";
 import { markdownConverter } from "markdown";
 import { GlobalInfoStore } from "stores";
 
 export const loadConfig = createAsyncAction(
   async () => {
     try {
-      const resp = await fetch("/config");
+      const resp = await fetchApi("/config");
       const payload = await resp.json();
 
       if (!isArray(payload)) {
@@ -39,7 +38,7 @@ export const loadConfig = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 export const loadProtocol = createAsyncAction(
@@ -47,7 +46,7 @@ export const loadProtocol = createAsyncAction(
     const { protocolUrl } = GlobalInfoStore.getRawState();
 
     try {
-      const resp = await baseFetch(protocolUrl);
+      const resp = await fetch(protocolUrl);
 
       if (resp.status !== 200) {
         return errorResult([], `Unexpected status code ${resp.status}`);
@@ -66,5 +65,5 @@ export const loadProtocol = createAsyncAction(
         });
       }
     },
-  }
+  },
 );

src/actions/posts.js

@@ -2,7 +2,7 @@ import keyBy from "lodash/keyBy";
 import property from "lodash/property";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
 
-import { fetch } from "api";
+import { fetchApi } from "api";
 import { AuthStore, PostStore } from "stores";
 import {
   createSeenWriter,
@@ -16,7 +16,7 @@ import {
 export const loadPosts = createAsyncAction(
   async () => {
     try {
-      const resp = await fetch("/posts", { expectedStatus: 200 });
+      const resp = await fetchApi("/posts", { expectedStatus: 200 });
       const data = await resp.json();
       return successResult(data.data);
     } catch (err) {
@@ -40,7 +40,7 @@ export const loadPosts = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 export const like = createAsyncAction(
@@ -49,7 +49,7 @@ export const like = createAsyncAction(
    */
   async (post) => {
     try {
-      await fetch(`/posts/${post.id}/like`, {
+      await fetchApi(`/posts/${post.id}/like`, {
         method: "PATCH",
         expectedStatus: 204,
       });
@@ -69,7 +69,7 @@ export const like = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 export const dislike = createAsyncAction(
@@ -78,7 +78,7 @@ export const dislike = createAsyncAction(
    */
   async (post) => {
     try {
-      await fetch(`/posts/${post.id}/dislike`, {
+      await fetchApi(`/posts/${post.id}/dislike`, {
         method: "PATCH",
         expectedStatus: 204,
       });
@@ -98,7 +98,7 @@ export const dislike = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 /**
@@ -110,7 +110,7 @@ export const addPost = createAsyncAction(async ({ content }) => {
       content,
       type: postsTypeMappingRev["post"],
     });
-    await fetch(`/posts`, { method: "POST", body, expectedStatus: 201 });
+    await fetchApi(`/posts`, { method: "POST", body, expectedStatus: 201 });
     return successResult();
   } catch (err) {
     return errorResult([], err.toString());
@@ -126,7 +126,7 @@ export const addProposal = createAsyncAction(async ({ content }) => {
       content,
       type: postsTypeMappingRev["procedure-proposal"],
     });
-    await fetch(`/posts`, { method: "POST", body, expectedStatus: 201 });
+    await fetchApi(`/posts`, { method: "POST", body, expectedStatus: 201 });
     return successResult();
   } catch (err) {
     return errorResult([], err.toString());
@@ -142,7 +142,7 @@ export const hide = createAsyncAction(
    */
   async (post) => {
     try {
-      await fetch(`/posts/${post.id}`, {
+      await fetchApi(`/posts/${post.id}`, {
         method: "DELETE",
         expectedStatus: 204,
       });
@@ -150,7 +150,7 @@ export const hide = createAsyncAction(
     } catch (err) {
       return errorResult([], err.toString());
     }
-  }
+  },
 );
 
 /**
@@ -165,7 +165,7 @@ export const edit = createAsyncAction(
       const body = JSON.stringify({
         content: newContent,
       });
-      await fetch(`/posts/${post.id}`, {
+      await fetchApi(`/posts/${post.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -189,7 +189,7 @@ export const edit = createAsyncAction(
 
       return false;
     },
-  }
+  },
 );
 
 /**
@@ -204,7 +204,7 @@ export const archive = createAsyncAction(
       const body = JSON.stringify({
         is_archived: true,
       });
-      await fetch(`/posts/${post.id}`, {
+      await fetchApi(`/posts/${post.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -213,7 +213,7 @@ export const archive = createAsyncAction(
     } catch (err) {
       return errorResult([], err.toString());
     }
-  }
+  },
 );
 
 /**
@@ -226,7 +226,7 @@ const updateProposalState = async (proposal, state, additionalPayload) => {
     state: postsStateMappingRev[state],
     ...(additionalPayload || {}),
   });
-  await fetch(`/posts/${proposal.id}`, {
+  await fetchApi(`/posts/${proposal.id}`, {
     method: "PUT",
     body,
     expectedStatus: 204,
@@ -256,7 +256,7 @@ export const announceProposal = createAsyncAction(
 
       return false;
     },
-  }
+  },
 );
 
 /**
@@ -281,7 +281,7 @@ export const acceptProposal = createAsyncAction(
 
       return false;
     },
-  }
+  },
 );
 
 /**
@@ -306,7 +306,7 @@ export const rejectProposal = createAsyncAction(
 
       return false;
     },
-  }
+  },
 );
 
 /**
@@ -333,7 +333,7 @@ export const rejectProposalByChairman = createAsyncAction(
 
       return false;
     },
-  }
+  },
 );
 
 const { markSeen: storeSeen } = createSeenWriter(seenPostsLSKey);

src/actions/program.js

@@ -4,7 +4,7 @@ import pick from "lodash/pick";
 import property from "lodash/property";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
 
-import { fetch } from "api";
+import { fetchApi } from "api";
 import { markdownConverter } from "markdown";
 import { ProgramStore } from "stores";
 
@@ -13,7 +13,7 @@ import { loadPosts } from "./posts";
 export const loadProgram = createAsyncAction(
   async () => {
     try {
-      const resp = await fetch("/program");
+      const resp = await fetchApi("/program");
       const mappings = await resp.json();
       return successResult(mappings);
     } catch (err) {
@@ -49,17 +49,17 @@ export const loadProgram = createAsyncAction(
                 expectedStartAt: parse(
                   entry.expected_start_at,
                   "yyyy-MM-dd HH:mm:ss",
-                  new Date()
+                  new Date(),
                 ),
                 expectedFinishAt: entry.expected_finish_at
                   ? parse(
                       entry.expected_finish_at,
                       "yyyy-MM-dd HH:mm:ss",
-                      new Date()
+                      new Date(),
                     )
                   : undefined,
               };
-            }
+            },
           )
           .sort((a, b) => a.expectedStartAt - b.expectedStartAt);
 
@@ -75,7 +75,7 @@ export const loadProgram = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 /**
@@ -87,7 +87,7 @@ export const renameProgramPoint = createAsyncAction(
       const body = JSON.stringify({
         title: newTitle,
       });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -108,7 +108,7 @@ export const renameProgramPoint = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 /**
@@ -124,7 +124,7 @@ export const endProgramPoint = createAsyncAction(
       const body = JSON.stringify({
         is_live: false,
       });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -142,7 +142,7 @@ export const endProgramPoint = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 /**
@@ -158,7 +158,7 @@ export const activateProgramPoint = createAsyncAction(
       const body = JSON.stringify({
         is_live: true,
       });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -179,7 +179,7 @@ export const activateProgramPoint = createAsyncAction(
         loadPosts.run({}, { respectCache: false });
       }
     },
-  }
+  },
 );
 
 /**
@@ -195,7 +195,7 @@ export const openDiscussion = createAsyncAction(
       const body = JSON.stringify({
         discussion_opened: true,
       });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -215,7 +215,7 @@ export const openDiscussion = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 /**
@@ -227,7 +227,7 @@ export const closeDiscussion = createAsyncAction(
       const body = JSON.stringify({
         discussion_opened: false,
       });
-      await fetch(`/program/${programEntry.id}`, {
+      await fetchApi(`/program/${programEntry.id}`, {
         method: "PUT",
         body,
         expectedStatus: 204,
@@ -247,5 +247,5 @@ export const closeDiscussion = createAsyncAction(
         });
       }
     },
-  }
+  },
 );

src/actions/users.js

 import * as Sentry from "@sentry/react";
 import { createAsyncAction, errorResult, successResult } from "pullstate";
 
-import { fetch } from "api";
+import { fetchApi } from "api";
 import keycloak from "keycloak";
 import { AuthStore, PostStore } from "stores";
 import { updateWindowPosts } from "utils";
@@ -12,7 +12,7 @@ export const loadMe = createAsyncAction(
    */
   async () => {
     try {
-      const response = await fetch(`/users/me`, {
+      const response = await fetchApi(`/users/me`, {
         method: "GET",
         expectedStatus: 200,
       });
@@ -35,7 +35,7 @@ export const loadMe = createAsyncAction(
         });
       }
     },
-  }
+  },
 );
 
 export const ban = createAsyncAction(
@@ -44,7 +44,7 @@ export const ban = createAsyncAction(
    */
   async (user) => {
     try {
-      await fetch(`/users/${user.id}/ban`, {
+      await fetchApi(`/users/${user.id}/ban`, {
         method: "PATCH",
         expectedStatus: 204,
       });
@@ -52,7 +52,7 @@ export const ban = createAsyncAction(
     } catch (err) {
       return errorResult([], err.toString());
     }
-  }
+  },
 );
 
 export const unban = createAsyncAction(
@@ -61,7 +61,7 @@ export const unban = createAsyncAction(
    */
   async (user) => {
     try {
-      await fetch(`/users/${user.id}/unban`, {
+      await fetchApi(`/users/${user.id}/unban`, {
         method: "PATCH",
         expectedStatus: 204,
       });
@@ -69,7 +69,7 @@ export const unban = createAsyncAction(
     } catch (err) {
       return errorResult([], err.toString());
     }
-  }
+  },
 );
 
 export const inviteToJitsi = createAsyncAction(
@@ -81,7 +81,7 @@ export const inviteToJitsi = createAsyncAction(
       const body = JSON.stringify({
         allowed: true,
       });
-      await fetch(`/users/${user.id}/jitsi`, {
+      await fetchApi(`/users/${user.id}/jitsi`, {
         method: "PATCH",
         body,
         expectedStatus: 204,
@@ -90,7 +90,7 @@ export const inviteToJitsi = createAsyncAction(
     } catch (err) {
       return errorResult([], err.toString());
     }
-  }
+  },
 );
 
 export const refreshAccessToken = async () => {
@@ -105,7 +105,7 @@ export const refreshAccessToken = async () => {
     console.info("[auth] access token refreshed");
   } catch (exc) {
     console.warn(
-      "[auth] could not refresh the access token, refresh token possibly expired, logging out"
+      "[auth] could not refresh the access token, refresh token possibly expired, logging out",
     );
 
     Sentry.setUser(null);

src/api.js

-import baseFetch from "unfetch";
-
 import { AuthStore } from "./stores";
 
-export const fetch = async (
+export const fetchApi = async (
   url,
-  { headers = {}, expectedStatus = 200, method = "GET", body = null } = {}
+  { headers = {}, expectedStatus = 200, method = "GET", body = null } = {},
 ) => {
   const { isAuthenticated, user } = AuthStore.getRawState();
 
@@ -16,7 +14,7 @@ export const fetch = async (
     headers["Content-Type"] = "application/json";
   }
 
-  const response = await baseFetch(process.env.REACT_APP_API_BASE_URL + url, {
+  const response = await fetch(process.env.REACT_APP_API_BASE_URL + url, {
     body,
     method,
     headers,