Merge pull request #262 from os2display/feature/redux-toolkit-upgrade

Redux toolkit upgrade and fixed RTK Query caching setup

Author: tuj

CHANGELOG.md

@@ -11,6 +11,9 @@ All notable changes to this project will be documented in this file.
 * Updated PHP dependencies.
 * Added Playwright github action.
 * Changed how templates are imported.
+* Removed propTypes.
+* Upgraded redux-toolkit and how api slices are generated.
+* Fixed redux-toolkit cache handling.
 
 ### NB! Prior to 3.x the project was split into separate repositories
 

README.md

@@ -3,7 +3,7 @@
 ## Development
 
 ```bash
-docker compose pull                      
+docker compose pull
 docker compose up --detach
 docker compose exec phpfpm composer install
 docker compose run --rm node npm install
@@ -25,15 +25,46 @@ The fixtures have the image-text template, and two screen layouts: full screen a
 
 TODO
 
-## Documentation
+## API specification and generated code
+
+When the API is changed a new OpenAPI specification should be generated that reflects the changes to the API.
+
+To generate the updated API specification, run the following command:
+
+```shell
+docker compose exec phpfpm composer update-api-spec
+```
+
+This will generate `public/api-spec-v2.json` and `public/api-spec-v2.yaml`.
+
+This generated API specification is used to generate
+[Redux Toolkit RTK Query](https://redux-toolkit.js.org/rtk-query/overview) code for interacting with the API.
+
+To generate the Redux Toolkit RTK Query code, run the following command:
+
+```shell
+docker compose exec node npx @rtk-query/codegen-openapi /app/assets/shared/redux/openapi-config.js
+```
+
+This will generate `assets/shared/redux/generated-api.ts`. This generated code is enhanced by the custom file
+`assets/shared/redux/enhanced-api.ts`.
+
+### Important
+
+If new endpoints are added to the API, `assets/shared/redux/enhanced-api.ts` should be modified to reflect changes in
+Redux-Toolkit cache invalidation and new hooks should be added.
+
+See
+[https://redux-toolkit.js.org/rtk-query/usage/code-generation](https://redux-toolkit.js.org/rtk-query/usage/code-generation)
+for information about the code generation.
 
 ## Tests
 
 ### API tests
 
 TODO
 
-### Admin / Client tests
+### Admin and Client tests
 
 To run tests, use the script:
 

assets/admin/components/activation-code/activation-code-activate.jsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import Form from "react-bootstrap/Form";
 import { Button } from "react-bootstrap";
-import { usePostV2UserActivationCodesActivateMutation } from "../../redux/api/api.generated.ts";
+import { usePostV2UserActivationCodesActivateMutation } from "../../../shared/redux/enhanced-api.ts";
 import {
   displaySuccess,
   displayError,

assets/admin/components/activation-code/activation-code-create.jsx

@@ -1,7 +1,7 @@
 import { React, useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { usePostV2UserActivationCodesMutation } from "../../redux/api/api.generated.ts";
+import { usePostV2UserActivationCodesMutation } from "../../../shared/redux/enhanced-api.ts";
 import ActivationCodeForm from "./activation-code-form";
 import {
   displaySuccess,
@@ -64,7 +64,7 @@ function ActivationCodeCreate() {
     };
 
     PostV2UserActivationCode({
-      userActivationCodeUserActivationCodeInput: JSON.stringify(saveData),
+      userActivationCodeUserActivationCodeInputJsonld: JSON.stringify(saveData),
     });
   };
 

assets/admin/components/activation-code/activation-code-form.jsx

@@ -2,7 +2,6 @@ import { React } from "react";
 import { useNavigate } from "react-router-dom";
 import { Button, Col, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import PropTypes from "prop-types";
 import Form from "react-bootstrap/Form";
 import LoadingComponent from "../util/loading-component/loading-component";
 import ContentBody from "../util/content-body/content-body";
@@ -107,16 +106,4 @@ function ActivationCodeForm({
   );
 }
 
-ActivationCodeForm.propTypes = {
-  activationCode: PropTypes.shape({
-    displayName: PropTypes.string.isRequired,
-    role: PropTypes.string.isRequired,
-  }).isRequired,
-  handleInput: PropTypes.func.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-  headerText: PropTypes.string.isRequired,
-  isLoading: PropTypes.bool,
-  loadingMessage: PropTypes.string,
-};
-
 export default ActivationCodeForm;

assets/admin/components/activation-code/activation-code-list.jsx

@@ -15,10 +15,10 @@ import {
   displayError,
 } from "../util/list/toast-component/display-toast";
 import {
-  api,
+  enhancedApi,
   useDeleteV2UserActivationCodesByIdMutation,
   useGetV2UserActivationCodesQuery,
-} from "../../redux/api/api.generated.ts";
+} from "../../../shared/redux/enhanced-api.ts";
 
 /**
  * The Activation Code list component.
@@ -135,7 +135,7 @@ function ActivationCodeList() {
     }
 
     dispatch(
-      api.endpoints.postV2UserActivationCodesRefresh.initiate({
+      enhancedApi.endpoints.postV2UserActivationCodesRefresh.initiate({
         userActivationCodeActivationCode: JSON.stringify({
           activationCode: item[0].code,
         }),

assets/admin/components/auth-handler.jsx

@@ -1,5 +1,4 @@
 import { React, useContext } from "react";
-import PropTypes from "prop-types";
 import Login from "./user/login";
 import UserContext from "../context/user-context";
 
@@ -20,8 +19,4 @@ function AuthHandler({ children }) {
   return children;
 }
 
-AuthHandler.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
 export default AuthHandler;

assets/admin/components/error-boundary.jsx

@@ -1,5 +1,4 @@
 import React, { Component } from "react";
-import PropTypes from "prop-types";
 import "./error-boundary.scss";
 
 class ErrorBoundary extends Component {
@@ -38,10 +37,4 @@ class ErrorBoundary extends Component {
   }
 }
 
-ErrorBoundary.propTypes = {
-  children: PropTypes.node.isRequired,
-  errorText: PropTypes.string.isRequired,
-  errorHandler: PropTypes.func,
-};
-
 export default ErrorBoundary;

assets/admin/components/feed-sources/feed-source-edit.jsx

@@ -1,6 +1,6 @@
 import { React } from "react";
 import { useParams } from "react-router-dom";
-import { useGetV2FeedSourcesByIdQuery } from "../../redux/api/api.generated.ts";
+import { useGetV2FeedSourcesByIdQuery } from "../../../shared/redux/enhanced-api.ts";
 import FeedSourceManager from "./feed-source-manager";
 
 /**

assets/admin/components/feed-sources/feed-source-form.jsx

@@ -2,7 +2,6 @@ import { React } from "react";
 import { Alert, Button, Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import PropTypes from "prop-types";
 import Form from "react-bootstrap/Form";
 import LoadingComponent from "../util/loading-component/loading-component";
 import FormInputArea from "../util/forms/form-input-area";
@@ -185,30 +184,4 @@ function FeedSourceForm({
   );
 }
 
-FeedSourceForm.propTypes = {
-  feedSource: PropTypes.shape({
-    title: PropTypes.string,
-    description: PropTypes.string,
-    feedType: PropTypes.string,
-    supportedFeedOutputType: PropTypes.string,
-  }),
-  handleInput: PropTypes.func.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
-  handleSaveNoClose: PropTypes.func.isRequired,
-  handleSecretInput: PropTypes.func.isRequired,
-  onFeedTypeChange: PropTypes.func.isRequired,
-  headerText: PropTypes.string.isRequired,
-  isLoading: PropTypes.bool,
-  loadingMessage: PropTypes.string,
-  feedSourceTypeOptions: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      title: PropTypes.string,
-      key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-      template: PropTypes.element,
-    })
-  ).isRequired,
-  mode: PropTypes.string,
-};
-
 export default FeedSourceForm;