upgrade to react 18

nginx.conf

@@ -17,6 +17,9 @@ http {
         server_tokens off;
 
         root /app/static;
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
         gzip_static on;
     }
 }

package.json

@@ -12,7 +12,7 @@
     "mock": "vite-node -w  -c ./src/mocks/vite.config.ts ./src/mocks/index.ts"
   },
   "dependencies": {
-    "@preact/signals-react": "^2.1.0",
+    "@preact/signals-react": "^1.3.8",
     "bootstrap": "^5.1.3",
     "date-fns": "^2.30.0",
     "express": "^4.18.1",

src/enhancers/index.tsx

@@ -29,7 +29,9 @@ export function withNoData<P extends Props, K extends keyof P>(
 ) {
   return function (Component: React.FC<P>): React.FC<WithNoData<P, K>> {
     return (props: WithNoData<P, K>) =>
-      getter(props) === null ? null : (
+      getter(props) === null ? (
+        <>data missing</>
+      ) : (
         <Component {...(props as unknown as P)} />
       );
   };

src/main.tsx

@@ -1,15 +1,17 @@
 import "bootstrap/dist/css/bootstrap.min.css";
-import React from "react";
-import ReactDOM from "react-dom";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
 import { App } from "./components/App";
 
 import "./style/main.scss";
 
-ReactDOM.render(
-  <React.StrictMode>
+const container = document.getElementById("root");
+const root = createRoot(container!);
+
+root.render(
+  <StrictMode>
     <div className="container">
       <App />
     </div>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </StrictMode>
 );

src/screens/CharacterScreen.tsx

@@ -6,6 +6,7 @@ import { Character } from "../components/Character";
 export const CharacterScreen: React.FC = () => {
   const { character } = useContext(StoreContext);
   const { id = 1 } = useParams();
+
   useEffect(() => {
     character.load(+id);
   }, [character, id]);

src/screens/FilmScreen.tsx

@@ -5,8 +5,8 @@ import { Film } from "../components/Film";
 
 export const FilmScreen: React.FC = () => {
   const { film } = useContext(StoreContext);
-
   const { id = 1 } = useParams();
+
   useEffect(() => {
     film.load(+id);
   }, [film, id]);

src/service/fetch.ts

@@ -1,6 +1,7 @@
+import { ap } from "fp-ts/lib/Identity";
 import { chain } from "fp-ts/lib/Task";
 import { tryCatch } from "fp-ts/lib/TaskEither";
-import { pipe } from "fp-ts/lib/function";
+import { pipe, tupled } from "fp-ts/lib/function";
 import { AppError, genericError } from "../domain/error";
 import { Action, Nullable } from "../domain/util";
 
@@ -18,15 +19,23 @@ export const createFetch =
     url: string,
     body: Nullable<T> = null
   ): Action<unknown> => {
-    const fetchTask = pipe(
-      () => fetch(url, { method, body }),
-      chain((resp) => () => resp.json())
-    );
-    return tryCatch<AppError, unknown>(fetchTask, (e) =>
-      genericError((e as Error).message)
+    return tryCatch<AppError, unknown>(
+      pipe(
+        () =>
+          fetch(url, { method, body: body ? JSON.stringify(body) : undefined }),
+        chain((resp) => () => resp.json())
+      ),
+      (e) => genericError((e as Error).message)
     );
   };
 
-export const createGet = (url: string) => createFetch(HttpMethod.Get)(url);
+export const createGet = (url: string) =>
+  pipe(HttpMethod.Get, createFetch, ap(url));
+
 export const createPost = <T extends BodyInit>(url: string, body: T) =>
-  createFetch(HttpMethod.Post)(url, body);
+  pipe(
+    HttpMethod.Post,
+    createFetch,
+    tupled,
+    ap<[string, Nullable<T>]>([url, body])
+  );

src/stores/base.ts

@@ -23,16 +23,16 @@ export const createStoreBase = <T>(data: Signal<T>): StoreBase<T> => {
         error.value = null;
       }),
       chain(() => action),
-      chainFirstIOK((d) => () => {
+      chainFirstIOK((value) => () => {
         fetching.value = false;
-        data.value = d;
+        data.value = value;
       }),
-      orElseW((err) =>
-        fromIO(() => {
+      orElseW((err) => {
+        return fromIO(() => {
           fetching.value = false;
           error.value = err;
-        })
-      )
+        });
+      })
     )();
   };