diff --git a/package.json b/package.json index 94e9cb7..aa0a40b 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-feather": "^2.0.10", + "react-hooks-use-modal": "^3.3.1", "react-icons": "^4.7.1", "superjson": "1.9.1", "zod": "^3.18.0" diff --git a/src/components/GeneralDivider.tsx b/src/components/GeneralDivider.tsx new file mode 100644 index 0000000..558880f --- /dev/null +++ b/src/components/GeneralDivider.tsx @@ -0,0 +1,18 @@ +import React from 'react' + +type GeneralDividerProps = { + label: string +} + +function GeneralDivider({ label }: GeneralDividerProps) { + return ( +
+
+ + {label} + +
+ ) +} + +export default GeneralDivider diff --git a/src/components/ReaderBody.tsx b/src/components/ReaderBody.tsx index 45f22bc..c655c2f 100644 --- a/src/components/ReaderBody.tsx +++ b/src/components/ReaderBody.tsx @@ -1,9 +1,134 @@ -import React from 'react' +import React, { useEffect, useRef, useState } from 'react' +import { Plus } from 'react-feather' +import { useModal } from 'react-hooks-use-modal' +import { trpc } from '../utils/trpc' +import GeneralDivider from './GeneralDivider' +import ReaderCard from './ReaderCard' + +type Reader = { + client_id: string + name: string +} + +type AddReaderResponse = { + name: string + client_id: string + client_token: string +} function ReaderBody() { + const { data, isLoading, refetch } = trpc.reader.showReaders.useQuery() + const [readers, setReaders] = useState([]) + const label = isLoading ? 'カードリーダー: 取得中...' : `カードリーダー: ${data?.length}台` + + const [newReader, setNewReader] = useState() + + const [AddReaderModal, openAddReaderModal, closeAddReaderModal] = useModal('__next', { + preventScroll: true + }) + + const [NewReaderModal, openNewReaderModal, closeNewReaderModal] = useModal('__next', { + preventScroll: true + }) + + const addReaderMutation = trpc.reader.registerReader.useMutation({ + onSuccess: data => { + refetch() + setNewReader({ + name: data.name, + client_id: data.client_id, + client_token: data.client_token + }) + openNewReaderModal() + } + }) + + const addReader = () => { + addReaderMutation.mutate({ + name: inputRef.current?.value as string + }) + closeAddReaderModal() + } + + const inputRef = useRef(null) + + useEffect(() => { + if (data !== undefined) { + setReaders(data) + } + }, [data]) + return (
-

リーダー中身

+ + +
+
+ {readers.map(reader => ( + { + refetch() + }} + /> + ))} +
+
+ + +
+

カードリーダー追加

+ + +
+ + +
+
+ + + +
+

カードリーダー追加完了

+

新しいカードリーダーが追加されました

+
+

+ リーダー名: {newReader?.name} +

+

+ client_id: {newReader?.client_id} +

+

+ client_token: {newReader?.client_token} +

+
+ + +
+ + +
) } diff --git a/src/components/ReaderCard.tsx b/src/components/ReaderCard.tsx new file mode 100644 index 0000000..766e3a8 --- /dev/null +++ b/src/components/ReaderCard.tsx @@ -0,0 +1,96 @@ +import React, { useRef } from 'react' +import { Edit3, Trash2 } from 'react-feather' +import { useModal } from 'react-hooks-use-modal' +import { trpc } from '../utils/trpc' + +type ReaderCardProps = { + clientId: string + name: string + onChangeState?: () => void +} + +function ReaderCard({ clientId, name, onChangeState }: ReaderCardProps) { + const inputRef = useRef(null) + const renameMutation = trpc.reader.updateReaderName.useMutation({ + onSuccess: onChangeState + }) + const deleteMutation = trpc.reader.deleteReader.useMutation({ + onSuccess: onChangeState + }) + + const [RenameReaderModal, openRenameModal, closeRenameModal] = useModal('__next', { + preventScroll: true + }) + + const [DeleteReaderModal, openDeleteModal, closeDeleteModal] = useModal('__next', { + preventScroll: true + }) + + const renameReader = () => { + renameMutation.mutate({ + clientId: clientId, + updatedName: inputRef.current?.value as string + }) + closeRenameModal() + } + + const deleteReader = () => { + deleteMutation.mutate({ + clientId: clientId + }) + closeDeleteModal() + } + + return ( +
+ {name} +
+ + +
+ + +
+

カードリーダー名変更

+ + +
+ + +
+
+ + + +
+

カードリーダー削除

+

下記のカードリーダーを削除します

+
+

clientId: {clientId}

+

名前: {name}

+
+ +
+ + +
+
+ +
+ ) +} + +export default ReaderCard diff --git a/src/components/SettingMenu.tsx b/src/components/SettingMenu.tsx index fc9670e..224f092 100644 --- a/src/components/SettingMenu.tsx +++ b/src/components/SettingMenu.tsx @@ -31,7 +31,7 @@ function SettingMenu({ {bodyElement}
-
+
{isAdmin && (