Skip to content

Commit 549d9c4

Browse files
author
Dominik Zogg
committed
Small optimizations / alignments with the react version
1 parent 2ceb8fa commit 549d9c4

19 files changed

+138
-262
lines changed

‎.eslintrc.cjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ module.exports = {
5050
settings: {
5151
'import/resolver': {
5252
node: {
53-
extensions: ['.cjs', '.js', '.jsx', '.mjs', '.ts', '.tsx'],
53+
extensions: ['.cjs', '.d.ts', '.js', '.jsx', '.mjs', '.ts', '.tsx'],
5454
},
5555
},
5656
},

‎LICENSE

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright (c) 2024 Dominik Zogg
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the "Software"), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is furnished
8+
to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19+
THE SOFTWARE.

‎src/app.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ import { A } from '@solidjs/router';
66
const App: Component<RouteSectionProps> = (props: RouteSectionProps) => {
77
const [getDisplayMenu, setDisplayMenu] = createSignal<boolean>(false);
88

9+
const toggleMenu = () => {
10+
setDisplayMenu(!getDisplayMenu());
11+
};
12+
913
return (
1014
<div class="relative flex min-h-full flex-col md:flex-row">
1115
<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">
12-
<button
13-
class="float-right block border-2 p-2 md:hidden"
14-
data-testid="navigation-toggle"
15-
onClick={() => setDisplayMenu((displayMenu) => !displayMenu)}
16-
>
16+
<button class="float-right block border-2 p-2 md:hidden" data-testid="navigation-toggle" onClick={toggleMenu}>
1717
<span class="block h-2 w-6 border-t-2" />
1818
<span class="block h-2 w-6 border-t-2" />
1919
<span class="block h-0 w-6 border-t-2" />

‎src/component/button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const Button: Component<JSX.ButtonHTMLAttributes<HTMLButtonElement> & { c
3636
return (
3737
<button
3838
{...props}
39-
class={`inline-block px-5 py-2 text-white ${getColorThemeClasses(props.colorTheme)} ${props.class ?? ''}`}
39+
class={`inline-block px-5 py-2 text-white ${getColorThemeClasses(props.colorTheme)} ${props.class ?? ''}`}
4040
>
4141
{props.children}
4242
</button>

‎src/component/form/form.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export type TextFieldProps = {
2222

2323
export const TextField: Component<TextFieldProps> = (props: TextFieldProps) => {
2424
return (
25-
<label class="block">
25+
<label class={`block ${props.getInvalidParameters().length > 0 ? 'text-red-600' : ''} `}>
2626
{props.label}
2727
<input
2828
data-testid={props['data-testid']}
@@ -41,7 +41,7 @@ export const TextField: Component<TextFieldProps> = (props: TextFieldProps) => {
4141
value={props.getValue()}
4242
/>
4343
<Show when={props.getInvalidParameters().length > 0}>
44-
<ul class="mb-3 text-red-600">
44+
<ul class="mb-3">
4545
<For each={props.getInvalidParameters()}>{(invalidParameter) => <li>{invalidParameter.reason}</li>}</For>
4646
</ul>
4747
</Show>

‎src/component/heading.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,9 @@ import type { Component, JSX } from 'solid-js';
33
export const H1: Component<JSX.HTMLAttributes<HTMLHeadingElement>> = (
44
props: JSX.HTMLAttributes<HTMLHeadingElement>,
55
) => {
6-
return <h1 class="mb-4 border-b pb-2 text-4xl font-black">{props.children}</h1>;
6+
return (
7+
<h1 {...props} class={`mb-4 border-b pb-2 text-4xl font-black ${props.class ?? ''}`}>
8+
{props.children}
9+
</h1>
10+
);
711
};

‎src/component/page/pet/create.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,7 @@ const PetCreate: Component = () => {
1717
const { getHttpError, actions } = createModelResource({ createClient });
1818

1919
const submitPet = async (pet: PetRequest) => {
20-
await actions.createModel(pet);
21-
22-
if (!getHttpError()) {
20+
if (await actions.createModel(pet)) {
2321
navigate('/pet');
2422
}
2523
};

‎src/component/page/pet/list.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,11 @@ const PetListComponent: Component = () => {
3131
const navigate = useNavigate();
3232
const location = useLocation();
3333

34-
const { getModelList, getHttpError, actions } = createModelResource({
34+
const {
35+
getModelList: getPetList,
36+
getHttpError,
37+
actions,
38+
} = createModelResource({
3539
listClient,
3640
deleteClient,
3741
});
@@ -54,9 +58,7 @@ const PetListComponent: Component = () => {
5458
};
5559

5660
const deletePet = async (id: string) => {
57-
await actions.deleteModel(id);
58-
59-
if (!getHttpError()) {
61+
if (await actions.deleteModel(id)) {
6062
fetchPetList();
6163
}
6264
};
@@ -90,25 +92,23 @@ const PetListComponent: Component = () => {
9092
});
9193

9294
return (
93-
<Show when={getModelList() || getHttpError()}>
95+
<Show when={getPetList() || getHttpError()}>
9496
<div data-testid="page-pet-list">
9597
<Show when={getHttpError()}>{(getHttpError) => <HttpErrorPartial httpError={getHttpError()} />}</Show>
9698
<H1>{pageTitle}</H1>
97-
<Show when={getModelList()}>
99+
<Show when={getPetList()}>
98100
{(getPetList) => (
99101
<div>
100102
<Show when={getPetList()._links?.create}>
101-
<AnchorButton href="/pet/create" colorTheme="green">
103+
<AnchorButton href="/pet/create" colorTheme="green" class="mb-4">
102104
Create
103105
</AnchorButton>
104106
</Show>
105-
<div class="mt-4">
106-
<PetFiltersForm
107-
getHttpError={getHttpError}
108-
getInitialPetFilters={() => getQuery().filters}
109-
submitPetFilters={submitPetFilters}
110-
/>
111-
</div>
107+
<PetFiltersForm
108+
getHttpError={getHttpError}
109+
getInitialPetFilters={() => getQuery().filters}
110+
submitPetFilters={submitPetFilters}
111+
/>
112112
<div class="mt-4">
113113
<Table>
114114
<Thead>
@@ -190,7 +190,7 @@ const PetListComponent: Component = () => {
190190
</div>
191191
<div class="mt-4">
192192
<Pagination
193-
getPage={() => getQuery().page}
193+
getCurrentPage={() => getQuery().page}
194194
getTotalPages={() => Math.ceil(getPetList().count / limit)}
195195
getMaxPages={() => 7}
196196
submitPage={submitPage}

‎src/component/page/pet/read.tsx

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const PetRead: Component = () => {
1515
const params = useParams();
1616
const id = params.id;
1717

18-
const { getModel, getHttpError, actions } = createModelResource({ readClient });
18+
const { getModel: getPet, getHttpError, actions } = createModelResource({ readClient });
1919

2020
createEffect(() => {
2121
document.title = pageTitle;
@@ -27,11 +27,11 @@ const PetRead: Component = () => {
2727
});
2828

2929
return (
30-
<Show when={getModel() || getHttpError()}>
30+
<Show when={getPet() || getHttpError()}>
3131
<div data-testid="page-pet-read">
3232
<Show when={getHttpError()}>{(getHttpError) => <HttpErrorPartial httpError={getHttpError()} />}</Show>
3333
<H1>{pageTitle}</H1>
34-
<Show when={getModel()}>
34+
<Show when={getPet()}>
3535
{(getPet) => (
3636
<div>
3737
<dl>
@@ -51,12 +51,10 @@ const PetRead: Component = () => {
5151
<dd class="mb-4">{getPet().tag}</dd>
5252
<dt class="font-bold">Vaccinations</dt>
5353
<dd class="mb-4">
54-
<Show when={getPet().vaccinations}>
55-
{(getVaccinations) => (
56-
<ul>
57-
<For each={getVaccinations()}>{(vaccination) => <li>{vaccination.name}</li>}</For>
58-
</ul>
59-
)}
54+
<Show when={getPet().vaccinations.length > 0}>
55+
<ul>
56+
<For each={getPet().vaccinations}>{(vaccination) => <li>{vaccination.name}</li>}</For>
57+
</ul>
6058
</Show>
6159
</dd>
6260
</dl>

‎src/component/page/pet/update.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,10 @@ const PetUpdate: Component = () => {
1717

1818
const navigate = useNavigate();
1919

20-
const { getModel, getHttpError, actions } = createModelResource({ readClient, updateClient });
20+
const { getModel: getPet, getHttpError, actions } = createModelResource({ readClient, updateClient });
2121

2222
const submitPet = async (petRequest: PetRequest) => {
23-
await actions.updateModel(id, petRequest);
24-
25-
if (!getHttpError()) {
23+
if (await actions.updateModel(id, petRequest)) {
2624
navigate('/pet');
2725
}
2826
};
@@ -37,11 +35,11 @@ const PetUpdate: Component = () => {
3735
});
3836

3937
return (
40-
<Show when={getModel() || getHttpError()}>
38+
<Show when={getPet() || getHttpError()}>
4139
<div data-testid="page-pet-update">
4240
<Show when={getHttpError()}>{(getHttpError) => <HttpErrorPartial httpError={getHttpError()} />}</Show>
4341
<H1>{pageTitle}</H1>
44-
<Show when={getModel()}>
42+
<Show when={getPet()}>
4543
{(getPet) => <PetForm getHttpError={getHttpError} getInitialPet={getPet} submitPet={submitPet} />}
4644
</Show>
4745
<AnchorButton href="/pet" colorTheme="gray">

‎src/component/partial/pagination.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import { For, Show } from 'solid-js';
33

44
export type PaginationProps = {
55
submitPage: (page: number) => void;
6-
getPage: Accessor<number>;
6+
getCurrentPage: Accessor<number>;
77
getTotalPages: Accessor<number>;
88
getMaxPages: Accessor<number>;
99
};
1010

1111
export const Pagination: Component<PaginationProps> = (props: PaginationProps) => {
1212
const getPages = () => {
13-
const page = props.getPage();
13+
const page = props.getCurrentPage();
1414
const totalPages = props.getTotalPages();
1515
const maxPages = props.getMaxPages();
1616

@@ -46,7 +46,7 @@ export const Pagination: Component<PaginationProps> = (props: PaginationProps) =
4646
return (
4747
<Show when={getPages().length > 0}>
4848
<ul class="w-fit border-y border-l border-gray-300">
49-
<Show when={props.getPage() > 2}>
49+
<Show when={props.getCurrentPage() > 2}>
5050
<li class="inline-block">
5151
<button
5252
class="border-r border-gray-300 px-3 py-2"
@@ -58,12 +58,12 @@ export const Pagination: Component<PaginationProps> = (props: PaginationProps) =
5858
</button>
5959
</li>
6060
</Show>
61-
<Show when={props.getPage() > 1}>
61+
<Show when={props.getCurrentPage() > 1}>
6262
<li class="inline-block">
6363
<button
6464
class="border-r border-gray-300 px-3 py-2"
6565
onClick={() => {
66-
props.submitPage(props.getPage() - 1);
66+
props.submitPage(props.getCurrentPage() - 1);
6767
}}
6868
>
6969
&lt;
@@ -74,7 +74,7 @@ export const Pagination: Component<PaginationProps> = (props: PaginationProps) =
7474
{(page) => (
7575
<li class="inline-block">
7676
<button
77-
class={`border-r border-gray-300 px-3 py-2 ${props.getPage() === page ? 'bg-gray-100' : ''}`}
77+
class={`border-r border-gray-300 px-3 py-2 ${props.getCurrentPage() === page ? 'bg-gray-100' : ''}`}
7878
onClick={() => {
7979
props.submitPage(page);
8080
}}
@@ -84,19 +84,19 @@ export const Pagination: Component<PaginationProps> = (props: PaginationProps) =
8484
</li>
8585
)}
8686
</For>
87-
<Show when={props.getPage() < props.getTotalPages()}>
87+
<Show when={props.getCurrentPage() < props.getTotalPages()}>
8888
<li class="inline-block">
8989
<button
9090
class="border-r border-gray-300 px-3 py-2"
9191
onClick={() => {
92-
props.submitPage(props.getPage() + 1);
92+
props.submitPage(props.getCurrentPage() + 1);
9393
}}
9494
>
9595
&gt;
9696
</button>
9797
</li>
9898
</Show>
99-
<Show when={props.getPage() < props.getTotalPages() - 1}>
99+
<Show when={props.getCurrentPage() < props.getTotalPages() - 1}>
100100
<li class="inline-block">
101101
<button
102102
class="border-r border-gray-300 px-3 py-2"

0 commit comments

Comments
 (0)