Small optimizations / alignments with the react version

chubbyts · Mar 10, 2024 · 8a3e1da · 8a3e1da
1 parent ee01329
commit 8a3e1da
Show file tree

Hide file tree

Showing 15 changed files with 112 additions and 66 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -50,7 +50,7 @@ module.exports = {
   settings: {
     'import/resolver': {
       node: {
-        extensions: ['.cjs', '.js', '.jsx', '.mjs', '.ts', '.tsx'],
+        extensions: ['.cjs', '.d.ts', '.js', '.jsx', '.mjs', '.ts', '.tsx'],
       },
     },
   },

diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,19 @@
+Copyright (c) 2024 Dominik Zogg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished
+to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/src/app.tsx b/src/app.tsx
@@ -6,14 +6,14 @@ import { A } from '@solidjs/router';
 const App: Component<RouteSectionProps> = (props: RouteSectionProps) => {
   const [getDisplayMenu, setDisplayMenu] = createSignal<boolean>(false);
 
+  const toggleMenu = () => {
+    setDisplayMenu(!getDisplayMenu());
+  };
+
   return (
     <div class="relative flex min-h-full flex-col md:flex-row">
       <nav class="absolute flow-root h-16 w-full bg-gray-900 px-4 py-3 text-2xl font-semibold uppercase leading-relaxed text-gray-100">
-        <button
-          class="float-right block border-2 p-2 md:hidden"
-          data-testid="navigation-toggle"
-          onClick={() => setDisplayMenu((displayMenu) => !displayMenu)}
-        >
+        <button class="float-right block border-2 p-2 md:hidden" data-testid="navigation-toggle" onClick={toggleMenu}>
           <span class="block h-2 w-6 border-t-2" />
           <span class="block h-2 w-6 border-t-2" />
           <span class="block h-0 w-6 border-t-2" />

diff --git a/src/component/button.tsx b/src/component/button.tsx
@@ -36,7 +36,7 @@ export const Button: Component<JSX.ButtonHTMLAttributes<HTMLButtonElement> & { c
   return (
     <button
       {...props}
-      class={`inline-block px-5 py-2 text-white ${getColorThemeClasses(props.colorTheme)}  ${props.class ?? ''}`}
+      class={`inline-block px-5 py-2 text-white ${getColorThemeClasses(props.colorTheme)} ${props.class ?? ''}`}
     >
       {props.children}
     </button>

diff --git a/src/component/form/form.tsx b/src/component/form/form.tsx
@@ -22,7 +22,7 @@ export type TextFieldProps = {
 
 export const TextField: Component<TextFieldProps> = (props: TextFieldProps) => {
   return (
-    <label class="block">
+    <label class={`block ${props.getInvalidParameters().length > 0 ? 'text-red-600' : ''} `}>
       {props.label}
       <input
         data-testid={props['data-testid']}
@@ -41,7 +41,7 @@ export const TextField: Component<TextFieldProps> = (props: TextFieldProps) => {
         value={props.getValue()}
       />
       <Show when={props.getInvalidParameters().length > 0}>
-        <ul class="mb-3 text-red-600">
+        <ul class="mb-3">
           <For each={props.getInvalidParameters()}>{(invalidParameter) => <li>{invalidParameter.reason}</li>}</For>
         </ul>
       </Show>

diff --git a/src/component/heading.tsx b/src/component/heading.tsx
@@ -3,5 +3,9 @@ import type { Component, JSX } from 'solid-js';
 export const H1: Component<JSX.HTMLAttributes<HTMLHeadingElement>> = (
   props: JSX.HTMLAttributes<HTMLHeadingElement>,
 ) => {
-  return <h1 class="mb-4 border-b pb-2 text-4xl font-black">{props.children}</h1>;
+  return (
+    <h1 {...props} class={`mb-4 border-b pb-2 text-4xl font-black ${props.class ?? ''}`}>
+      {props.children}
+    </h1>
+  );
 };
diff --git a/src/component/page/pet/create.tsx b/src/component/page/pet/create.tsx
@@ -17,9 +17,7 @@ const PetCreate: Component = () => {
   const { getHttpError, actions } = createModelResource({ createClient });
 
   const submitPet = async (pet: PetRequest) => {
-    await actions.createModel(pet);
-
-    if (!getHttpError()) {
+    if (await actions.createModel(pet)) {
       navigate('/pet');
     }
   };

diff --git a/src/component/page/pet/list.tsx b/src/component/page/pet/list.tsx
@@ -31,7 +31,11 @@ const PetListComponent: Component = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  const { getModelList, getHttpError, actions } = createModelResource({
+  const {
+    getModelList: getPetList,
+    getHttpError,
+    actions,
+  } = createModelResource({
     listClient,
     deleteClient,
   });
@@ -54,9 +58,7 @@ const PetListComponent: Component = () => {
   };
 
   const deletePet = async (id: string) => {
-    await actions.deleteModel(id);
-
-    if (!getHttpError()) {
+    if (await actions.deleteModel(id)) {
       fetchPetList();
     }
   };
@@ -90,25 +92,23 @@ const PetListComponent: Component = () => {
   });
 
   return (
-    <Show when={getModelList() || getHttpError()}>
+    <Show when={getPetList() || getHttpError()}>
       <div data-testid="page-pet-list">
         <Show when={getHttpError()}>{(getHttpError) => <HttpErrorPartial httpError={getHttpError()} />}</Show>
         <H1>{pageTitle}</H1>
-        <Show when={getModelList()}>
+        <Show when={getPetList()}>
           {(getPetList) => (
             <div>
               <Show when={getPetList()._links?.create}>
-                <AnchorButton href="/pet/create" colorTheme="green">
+                <AnchorButton href="/pet/create" colorTheme="green" class="mb-4">
                   Create
                 </AnchorButton>
               </Show>
-              <div class="mt-4">
-                <PetFiltersForm
-                  getHttpError={getHttpError}
-                  getInitialPetFilters={() => getQuery().filters}
-                  submitPetFilters={submitPetFilters}
-                />
-              </div>
+              <PetFiltersForm
+                getHttpError={getHttpError}
+                getInitialPetFilters={() => getQuery().filters}
+                submitPetFilters={submitPetFilters}
+              />
               <div class="mt-4">
                 <Table>
                   <Thead>

diff --git a/src/component/page/pet/read.tsx b/src/component/page/pet/read.tsx
@@ -15,7 +15,7 @@ const PetRead: Component = () => {
   const params = useParams();
   const id = params.id;
 
-  const { getModel, getHttpError, actions } = createModelResource({ readClient });
+  const { getModel: getPet, getHttpError, actions } = createModelResource({ readClient });
 
   createEffect(() => {
     document.title = pageTitle;
@@ -27,11 +27,11 @@ const PetRead: Component = () => {
   });
 
   return (
-    <Show when={getModel() || getHttpError()}>
+    <Show when={getPet() || getHttpError()}>
       <div data-testid="page-pet-read">
         <Show when={getHttpError()}>{(getHttpError) => <HttpErrorPartial httpError={getHttpError()} />}</Show>
         <H1>{pageTitle}</H1>
-        <Show when={getModel()}>
+        <Show when={getPet()}>
           {(getPet) => (
             <div>
               <dl>

diff --git a/src/component/page/pet/update.tsx b/src/component/page/pet/update.tsx
@@ -17,12 +17,10 @@ const PetUpdate: Component = () => {
 
   const navigate = useNavigate();
 
-  const { getModel, getHttpError, actions } = createModelResource({ readClient, updateClient });
+  const { getModel: getPet, getHttpError, actions } = createModelResource({ readClient, updateClient });
 
   const submitPet = async (petRequest: PetRequest) => {
-    await actions.updateModel(id, petRequest);
-
-    if (!getHttpError()) {
+    if (await actions.updateModel(id, petRequest)) {
       navigate('/pet');
     }
   };
@@ -37,11 +35,11 @@ const PetUpdate: Component = () => {
   });
 
   return (
-    <Show when={getModel() || getHttpError()}>
+    <Show when={getPet() || getHttpError()}>
       <div data-testid="page-pet-update">
         <Show when={getHttpError()}>{(getHttpError) => <HttpErrorPartial httpError={getHttpError()} />}</Show>
         <H1>{pageTitle}</H1>
-        <Show when={getModel()}>
+        <Show when={getPet()}>
           {(getPet) => <PetForm getHttpError={getHttpError} getInitialPet={getPet} submitPet={submitPet} />}
         </Show>
         <AnchorButton href="/pet" colorTheme="gray">

diff --git a/src/hook/create-model-resource.ts b/src/hook/create-model-resource.ts
@@ -26,7 +26,7 @@ export const createModelResource = <
   const [getModel, setModel] = createSignal<MRes | undefined>();
   const [getHttpError, setHttpError] = createSignal<HttpError | undefined>();
 
-  const listModel = async (req: MLReq) => {
+  const listModel = async (req: MLReq): Promise<boolean> => {
     if (!listClient) {
       throw new Error('Missing listClient');
     }
@@ -35,19 +35,25 @@ export const createModelResource = <
 
     const response = await listClient(req);
 
+    let success: boolean;
+
     if (response instanceof HttpError) {
       setHttpError(response);
+      success = false;
     } else {
       setHttpError(undefined);
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       setModelList(response);
+      success = true;
     }
 
     setLoading(undefined);
+
+    return success;
   };
 
-  const createModel = async (req: MReq) => {
+  const createModel = async (req: MReq): Promise<boolean> => {
     if (!createClient) {
       throw new Error('Missing createClient');
     }
@@ -56,19 +62,25 @@ export const createModelResource = <
 
     const response = await createClient(req);
 
+    let success: boolean;
+
     if (response instanceof HttpError) {
       setHttpError(response);
+      success = false;
     } else {
       setHttpError(undefined);
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       setModel(response);
+      success = true;
     }
 
     setLoading(undefined);
+
+    return success;
   };
 
-  const readModel = async (id: string) => {
+  const readModel = async (id: string): Promise<boolean> => {
     if (!readClient) {
       throw new Error('Missing readClient');
     }
@@ -77,19 +89,25 @@ export const createModelResource = <
 
     const response = await readClient(id);
 
+    let success: boolean;
+
     if (response instanceof HttpError) {
       setHttpError(response);
+      success = false;
     } else {
       setHttpError(undefined);
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       setModel(response);
+      success = true;
     }
 
     setLoading(undefined);
+
+    return success;
   };
 
-  const updateModel = async (id: string, req: MReq) => {
+  const updateModel = async (id: string, req: MReq): Promise<boolean> => {
     if (!updateClient) {
       throw new Error('Missing updateClient');
     }
@@ -98,19 +116,25 @@ export const createModelResource = <
 
     const response = await updateClient(id, req);
 
+    let success: boolean;
+
     if (response instanceof HttpError) {
       setHttpError(response);
+      success = false;
     } else {
       setHttpError(undefined);
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       setModel(response);
+      success = true;
     }
 
     setLoading(undefined);
+
+    return success;
   };
 
-  const deleteModel = async (id: string) => {
+  const deleteModel = async (id: string): Promise<boolean> => {
     if (!deleteClient) {
       throw new Error('Missing deleteClient');
     }
@@ -119,14 +143,20 @@ export const createModelResource = <
 
     const response = await deleteClient(id);
 
+    let success: boolean;
+
     if (response instanceof HttpError) {
       setHttpError(response);
+      success = false;
     } else {
       setHttpError(undefined);
       setModel(response);
+      success = true;
     }
 
     setLoading(undefined);
+
+    return success;
   };
 
   return {

diff --git a/tests/component/form/pet-filters-form.test.tsx b/tests/component/form/pet-filters-form.test.tsx
@@ -93,13 +93,13 @@ test('bad request - with query string name', () => {
     "<div>
       <form>
         <fieldset class="mb-3 border border-gray-300 px-4 py-3">
-          <label class="block"
+          <label class="block text-red-600"
             >Name<input
               type="text"
               data-testid="pet-filters-form-name"
               class="mb-3 mt-2 block w-full border px-3 py-2 border-red-600 bg-red-100"
             />
-            <ul class="mb-3 text-red-600">
+            <ul class="mb-3">
               <li>reason</li>
             </ul></label
           ><button

diff --git a/tests/component/form/pet-form.test.tsx b/tests/component/form/pet-form.test.tsx
@@ -161,13 +161,13 @@ test('bad request - with query string name', () => {
     "<div>
       <form>
         <fieldset class="mb-3 border border-gray-300 px-4 py-3">
-          <label class="block"
+          <label class="block text-red-600"
             >Name<input
               type="text"
               data-testid="pet-form-name"
               class="mb-3 mt-2 block w-full border px-3 py-2 border-red-600 bg-red-100"
             />
-            <ul class="mb-3 text-red-600">
+            <ul class="mb-3">
               <li>reason1</li>
             </ul></label
           ><label class="block"
@@ -180,13 +180,13 @@ test('bad request - with query string name', () => {
             <div class="mb-2 block">Vaccinations</div>
             <div>
               <fieldset class="mb-3 border border-gray-300 px-4 py-3">
-                <label class="block"
+                <label class="block text-red-600"
                   >Name<input
                     type="text"
                     data-testid="pet-form-vaccinations-0-name"
                     class="mb-3 mt-2 block w-full border px-3 py-2 border-red-600 bg-red-100"
                   />
-                  <ul class="mb-3 text-red-600">
+                  <ul class="mb-3">
                     <li>reason2</li>
                   </ul></label
                 ><button