Skip to content

Commit

Permalink
zustand消した
Browse files Browse the repository at this point in the history
  • Loading branch information
@mehm8128
mehm8128 committed Mar 24, 2024
1 parent 2d350cb commit c410cba
Show file tree
Hide file tree
Showing 6 changed files with 74 additions and 133 deletions.
23 changes: 0 additions & 23 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions workspaces/admin/package.json
View file
Expand Up @@ -20,8 +20,7 @@
"react-hook-form": "7.51.1",
"regexparam": "3.0.0",
"unicode-collation-algorithm2": "0.5.0",
"yup": "1.4.0",
"zustand": "4.5.2"
"yup": "1.4.0"
},
"devDependencies": {
"@types/react": "18.2.0",
Expand Down
46 changes: 19 additions & 27 deletions workspaces/admin/src/pages/AuthorListPage/index.tsx
View file
Expand Up @@ -19,7 +19,6 @@ import {
} from '@chakra-ui/react';
import { useFormik } from 'formik';
import { useId, useMemo, useState } from 'react';
import { create } from 'zustand';

import { useAuthorList } from '../../features/authors/hooks/useAuthorList';
import { isContains } from '../../lib/filter/isContains';
Expand Down Expand Up @@ -93,26 +92,21 @@ export const AuthorListPage: React.FC = () => {
}
}, [formik.values.kind, formik.values.query, authorList]);

const [useModalStore] = useState(() => {
return create<AuthorModalState & AuthorModalAction>()((set) => ({
...{
mode: AuthorModalMode.None,
params: {},
},
...{
close() {
set({ mode: AuthorModalMode.None, params: {} });
},
openCreate() {
set({ mode: AuthorModalMode.Create, params: {} });
},
openDetail(authorId) {
set({ mode: AuthorModalMode.Detail, params: { authorId } });
},
},
}));
const [modal, setModal] = useState<AuthorModalState>({
mode: AuthorModalMode.None,
params: {},
});
const modalState = useModalStore();
const modalMethod: AuthorModalAction = {
close() {
setModal({ mode: AuthorModalMode.None, params: {} });
},
openCreate() {
setModal({ mode: AuthorModalMode.Create, params: {} });
},
openDetail(authorId) {
setModal({ mode: AuthorModalMode.Detail, params: { authorId } });
},
};

return (
<>
Expand Down Expand Up @@ -170,7 +164,7 @@ export const AuthorListPage: React.FC = () => {
<Text as="h2" fontSize="xl" fontWeight="bold" id={authorListA11yId}>
作者一覧
</Text>
<Button colorScheme="teal" onClick={() => modalState.openCreate()} variant="solid">
<Button colorScheme="teal" onClick={() => modalMethod.openCreate()} variant="solid">
作者を追加
</Button>
</Flex>
Expand All @@ -186,7 +180,7 @@ export const AuthorListPage: React.FC = () => {
{filteredAuthorList.map((author) => (
<Tr key={author.id}>
<Td textAlign="center" verticalAlign="middle">
<Button colorScheme="teal" onClick={() => modalState.openDetail(author.id)} variant="solid">
<Button colorScheme="teal" onClick={() => modalMethod.openDetail(author.id)} variant="solid">
詳細
</Button>
</Td>
Expand All @@ -204,12 +198,10 @@ export const AuthorListPage: React.FC = () => {
</StackItem>
</Stack>

{modalState.mode === AuthorModalMode.Detail ? (
<AuthorDetailModal isOpen authorId={modalState.params.authorId} onClose={() => modalState.close()} />
) : null}
{modalState.mode === AuthorModalMode.Create ? (
<CreateAuthorModal isOpen onClose={() => modalState.close()} />
{modal.mode === AuthorModalMode.Detail ? (
<AuthorDetailModal isOpen authorId={modal.params.authorId} onClose={() => modalMethod.close()} />
) : null}
{modal.mode === AuthorModalMode.Create ? <CreateAuthorModal isOpen onClose={() => modalMethod.close()} /> : null}
</>
);
};
116 changes: 41 additions & 75 deletions workspaces/admin/src/pages/BookListPage/index.tsx
View file
Expand Up @@ -17,9 +17,8 @@ import {
Thead,
Tr,
} from '@chakra-ui/react';
import { useFormik } from 'formik';
import { useId, useMemo, useState } from 'react';
import { create } from 'zustand';
import { useForm, useWatch } from 'react-hook-form';

import { useBookList } from '../../features/books/hooks/useBookList';
import { isContains } from '../../lib/filter/isContains';
Expand Down Expand Up @@ -66,107 +65,80 @@ export const BookListPage: React.FC = () => {
const { data: bookList = [] } = useBookList();
const bookListA11yId = useId();

const formik = useFormik({
initialValues: {
const form = useForm({
defaultValues: {
kind: BookSearchKind.BookId as BookSearchKind,
query: '',
},
onSubmit() {},
});
const values = useWatch({ control: form.control });

const filteredBookList = useMemo(() => {
if (formik.values.query === '') {
if (values.query === '') {
return bookList;
}

switch (formik.values.kind) {
switch (values.kind) {
case BookSearchKind.BookId: {
return bookList.filter((book) => book.id === formik.values.query);
return bookList.filter((book) => book.id === values.query);
}
case BookSearchKind.BookName: {
return bookList.filter((book) => {
return (
isContains({ query: formik.values.query, target: book.name }) ||
isContains({ query: formik.values.query, target: book.nameRuby })
isContains({ query: values.query ?? '', target: book.name }) ||
isContains({ query: values.query ?? '', target: book.nameRuby })
);
});
}
case BookSearchKind.AuthorId: {
return bookList.filter((book) => book.author.id === formik.values.query);
return bookList.filter((book) => book.author.id === values.query);
}
case BookSearchKind.AuthorName: {
return bookList.filter((book) => {
return isContains({ query: formik.values.query, target: book.author.name });
return isContains({ query: values.query ?? '', target: book.author.name });
});
}
case undefined:
return bookList;
default: {
formik.values.kind satisfies never;
values.kind satisfies never;
return bookList;
}
}
}, [formik.values.kind, formik.values.query, bookList]);

const [useModalStore] = useState(() => {
return create<BookModalState & BookModalAction>()((set) => ({
...{
mode: BookModalMode.None,
params: {},
},
...{
close() {
set({ mode: BookModalMode.None, params: {} });
},
openCreate() {
set({ mode: BookModalMode.Create, params: {} });
},
openDetail(bookId) {
set({ mode: BookModalMode.Detail, params: { bookId } });
},
},
}));
}, [values, bookList]);

const [modal, setModal] = useState<BookModalState>({
mode: BookModalMode.None,
params: {},
});
const modalState = useModalStore();
const modalMethod: BookModalAction = {
close() {
setModal({ mode: BookModalMode.None, params: {} });
},
openCreate() {
setModal({ mode: BookModalMode.Create, params: {} });
},
openDetail(bookId) {
setModal({ mode: BookModalMode.Detail, params: { bookId } });
},
};

return (
<>
<Stack height="100%" p={4} spacing={6}>
<StackItem aria-label="検索セクション" as="section">
<RadioGroup name="kind" value={formik.values.kind}>
<RadioGroup name="kind" value={values.kind}>
<Stack direction="row" spacing={4}>
<Radio
color="gray.400"
colorScheme="teal"
onBlur={formik.handleBlur}
onChange={formik.handleChange}
value={BookSearchKind.BookId}
>
<Radio color="gray.400" colorScheme="teal" {...form.register('kind')} value={BookSearchKind.BookId}>
作品 ID
</Radio>
<Radio
color="gray.400"
colorScheme="teal"
onBlur={formik.handleBlur}
onChange={formik.handleChange}
value={BookSearchKind.BookName}
>
<Radio color="gray.400" colorScheme="teal" {...form.register('kind')} value={BookSearchKind.BookName}>
作品名
</Radio>
<Radio
color="gray.400"
colorScheme="teal"
onBlur={formik.handleBlur}
onChange={formik.handleChange}
value={BookSearchKind.AuthorId}
>
<Radio color="gray.400" colorScheme="teal" value={BookSearchKind.AuthorId}>
作者 ID
</Radio>
<Radio
color="gray.400"
colorScheme="teal"
onBlur={formik.handleBlur}
onChange={formik.handleChange}
value={BookSearchKind.AuthorName}
>
<Radio color="gray.400" colorScheme="teal" value={BookSearchKind.AuthorName}>
作者名
</Radio>
</Stack>
Expand All @@ -175,13 +147,7 @@ export const BookListPage: React.FC = () => {
<Spacer height={2} />

<Flex gap={2}>
<Input
borderColor="gray.400"
name="query"
onBlur={formik.handleBlur}
onChange={formik.handleChange}
placeholder="条件を入力"
/>
<Input borderColor="gray.400" {...form.register('query')} placeholder="条件を入力" />
</Flex>
</StackItem>

Expand All @@ -201,7 +167,7 @@ export const BookListPage: React.FC = () => {
<Text as="h2" fontSize="xl" fontWeight="bold" id={bookListA11yId}>
作品一覧
</Text>
<Button colorScheme="teal" onClick={() => modalState.openCreate()} variant="solid">
<Button colorScheme="teal" onClick={() => modalMethod.openCreate()} variant="solid">
作品を追加
</Button>
</Flex>
Expand All @@ -218,7 +184,7 @@ export const BookListPage: React.FC = () => {
{filteredBookList.map((book) => (
<Tr key={book.id}>
<Td textAlign="center" verticalAlign="middle">
<Button colorScheme="teal" onClick={() => modalState.openDetail(book.id)} variant="solid">
<Button colorScheme="teal" onClick={() => modalMethod.openDetail(book.id)} variant="solid">
詳細
</Button>
</Td>
Expand All @@ -242,10 +208,10 @@ export const BookListPage: React.FC = () => {
</StackItem>
</Stack>

{modalState.mode === BookModalMode.Detail ? (
<BookDetailModal isOpen bookId={modalState.params.bookId} onClose={() => modalState.close()} />
{modal.mode === BookModalMode.Detail ? (
<BookDetailModal isOpen bookId={modal.params.bookId} onClose={() => modalMethod.close()} />
) : null}
{modalState.mode === BookModalMode.Create ? <CreateBookModal isOpen onClose={() => modalState.close()} /> : null}
{modal.mode === BookModalMode.Create ? <CreateBookModal isOpen onClose={() => modalMethod.close()} /> : null}
</>
);
};
8 changes: 4 additions & 4 deletions workspaces/admin/src/pages/BookListPage/internal/BookDetailModal/BookEditContent.tsx
View file
Expand Up @@ -76,15 +76,15 @@ export const BookEditContent: React.FC<BookEditContentProps> = ({ book, onEditCo
},
);
};
const values = useWatch<Schema>({ control: form.control });
const imgValue = useWatch({ control: form.control, name: 'image' });

const [avatorUrl, updateAvatorUrl] = useState<string | undefined>(undefined);
useEffect(() => {
if (values.image == null) return;
const url = URL.createObjectURL(values.image);
if (imgValue == null) return;
const url = URL.createObjectURL(imgValue);
updateAvatorUrl(url);
return () => URL.revokeObjectURL(url);
}, [values.image]);
}, [imgValue]);

const fileInputRef = useRef<HTMLInputElement>(null);

Expand Down
11 changes: 9 additions & 2 deletions workspaces/app/src/features/book/components/BookCard.tsx
View file
Expand Up @@ -45,7 +45,7 @@ const BookCard: React.FC<Props> = ({ book }) => {
<_Wrapper to={`/books/${book.id}`}>
{imageUrl != null && (
<_ImgWrapper>
<Image alt={book.image.alt} height={128} objectFit="cover" src={imageUrl} width={192} />
<Image alt={book.image.alt} height={128} loading="lazy" objectFit="cover" src={imageUrl} width={192} />
</_ImgWrapper>
)}

Expand All @@ -57,7 +57,14 @@ const BookCard: React.FC<Props> = ({ book }) => {
<Flex align="center" gap={Space * 1} justify="flex-end">
{authorImageUrl != null && (
<_AvatarWrapper>
<Image alt={book.author.name} height={32} objectFit="cover" src={authorImageUrl} width={32} />
<Image
alt={book.author.name}
height={32}
loading="lazy"
objectFit="cover"
src={authorImageUrl}
width={32}
/>
</_AvatarWrapper>
)}
<Text color={Color.MONO_100} typography={Typography.NORMAL12}>
Expand Down

0 comments on commit c410cba

Please sign in to comment.