Merge pull request #266 from h8570rg/develop

0.1.5
h8570rg · Jan 3, 2025 · 62e9c25 · 62e9c25
2 parents c319747 + bc54628
commit 62e9c25
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 104 deletions.
diff --git a/app/(auth)/(routes)/login/(components)/LoginForm/index.tsx b/app/(auth)/(routes)/login/(components)/LoginForm/index.tsx
@@ -9,7 +9,7 @@ import { signInEmail } from "./actions";
  * @see https://supabase.com/docs/guides/auth/server-side/nextjs
  */
 export function LoginForm({ className }: { className?: string }) {
-  const [state, formAction] = useActionState(signInEmail, {});
+  const [state, formAction, isPending] = useActionState(signInEmail, {});
 
   return (
     <form className={className} action={formAction} noValidate>
@@ -36,7 +36,13 @@ export function LoginForm({ className }: { className?: string }) {
       {state.errors?.base && (
         <p className="mt-1 p-1 text-tiny text-danger">{state.errors.base}</p>
       )}
-      <Button className="mt-2.5" fullWidth color="primary" type="submit">
+      <Button
+        className="mt-2.5"
+        fullWidth
+        color="primary"
+        type="submit"
+        isLoading={isPending}
+      >
         ログイン
       </Button>
     </form>

diff --git a/app/(auth)/(routes)/register/(components)/RegisterForm/index.tsx b/app/(auth)/(routes)/register/(components)/RegisterForm/index.tsx
@@ -18,7 +18,7 @@ export function RegisterForm({
   className?: string;
   userId: string;
 }) {
-  const [state, formAction] = useActionState(
+  const [state, formAction, isPending] = useActionState(
     updateProfile.bind(null, userId),
     {},
   );
@@ -49,7 +49,12 @@ export function RegisterForm({
         description={`${NAME_MAX_LENGTH}文字以内で入力してください`}
       />
       <div className="flex justify-end">
-        <Button className="ml-auto" color="primary" type="submit">
+        <Button
+          className="ml-auto"
+          color="primary"
+          type="submit"
+          isLoading={isPending}
+        >
           決定
         </Button>
       </div>

diff --git a/app/(auth)/(routes)/sign-up/(components)/SignUpForm/index.tsx b/app/(auth)/(routes)/sign-up/(components)/SignUpForm/index.tsx
@@ -10,7 +10,7 @@ import { signUp } from "./actions";
  * @see https://supabase.com/docs/guides/auth/server-side/nextjs
  */
 export function SignUpForm({ className }: { className?: string }) {
-  const [state, formAction] = useActionState(signUp, {});
+  const [state, formAction, isPending] = useActionState(signUp, {});
 
   return (
     <form
@@ -36,7 +36,12 @@ export function SignUpForm({ className }: { className?: string }) {
         required
         errorMessage={state.errors?.password?.[0]}
       />
-      <Button className="w-full" color="primary" type="submit">
+      <Button
+        className="w-full"
+        color="primary"
+        type="submit"
+        isLoading={isPending}
+      >
         新規登録
       </Button>
     </form>

diff --git a/app/(main)/(routes)/matches/(components)/CreateMatchButton/index.tsx b/app/(main)/(routes)/matches/(components)/CreateMatchButton/index.tsx
@@ -65,7 +65,7 @@ const playersCount3DefaultValues: InputSchema = {
 export function CreateMatchButton({ className }: { className?: string }) {
   const ruleCreateModal = useModal();
 
-  const [state, formAction] = useActionState(createMatch, {});
+  const [state, formAction, isPending] = useActionState(createMatch, {});
   const { errors } = state;
 
   const { reset, control, watch } = useForm<InputSchema>({
@@ -133,52 +133,48 @@ export function CreateMatchButton({ className }: { className?: string }) {
                     control={control}
                     name="rate"
                     render={({ field: { onChange, value, ...field } }) => (
-                      <>
-                        <Slider
-                          classNames={{
-                            base: "mb-6",
-                          }}
-                          label="レート"
-                          maxValue={rates.length - 1}
-                          showSteps
-                          marks={rates.map((rate, i) => ({
-                            value: i,
-                            label: String(rate),
-                          }))}
-                          getValue={(v) => rateLabel[rates[Number(v)]]}
-                          onChange={(v) => {
-                            onChange(String(v));
-                          }}
-                          value={Number(value)}
-                          {...field}
-                        />
-                      </>
+                      <Slider
+                        classNames={{
+                          base: "mb-6",
+                        }}
+                        label="レート"
+                        maxValue={rates.length - 1}
+                        showSteps
+                        marks={rates.map((rate, i) => ({
+                          value: i,
+                          label: String(rate),
+                        }))}
+                        getValue={(v) => rateLabel[rates[Number(v)]]}
+                        onChange={(v) => {
+                          onChange(String(v));
+                        }}
+                        value={Number(value)}
+                        {...field}
+                      />
                     )}
                   />
                   <Controller
                     control={control}
                     name="chipRate"
                     render={({ field: { onChange, value, ...field } }) => (
-                      <>
-                        <Slider
-                          classNames={{
-                            base: "mb-8",
-                          }}
-                          label="チップ"
-                          maxValue={chipRates.length - 1}
-                          showSteps
-                          marks={chipRates.map((chipRate, i) => ({
-                            value: i,
-                            label: String(chipRate),
-                          }))}
-                          getValue={(v) => chipRateLabel[chipRates[Number(v)]]}
-                          onChange={(v) => {
-                            onChange(String(v));
-                          }}
-                          value={Number(value)}
-                          {...field}
-                        />
-                      </>
+                      <Slider
+                        classNames={{
+                          base: "mb-8",
+                        }}
+                        label="チップ"
+                        maxValue={chipRates.length - 1}
+                        showSteps
+                        marks={chipRates.map((chipRate, i) => ({
+                          value: i,
+                          label: String(chipRate),
+                        }))}
+                        getValue={(v) => chipRateLabel[chipRates[Number(v)]]}
+                        onChange={(v) => {
+                          onChange(String(v));
+                        }}
+                        value={Number(value)}
+                        {...field}
+                      />
                     )}
                   />
                   <Controller
@@ -393,7 +389,7 @@ export function CreateMatchButton({ className }: { className?: string }) {
                   <Button variant="light" onPress={onClose}>
                     キャンセル
                   </Button>
-                  <Button color="primary" type="submit">
+                  <Button color="primary" type="submit" isLoading={isPending}>
                     開始
                   </Button>
                 </ModalFooter>

diff --git a/...n)/(routes)/matches/(routes)/[matchId]/(components)/ChipModal/(components)/Form/index.tsx b/...n)/(routes)/matches/(routes)/[matchId]/(components)/ChipModal/(components)/Form/index.tsx
@@ -19,12 +19,12 @@ type Schema = {
 export function ChipForm({ match }: { match: Match }) {
   const { chipModal } = useMatchContext();
   const { players, rule } = match;
-  const [{ errors, success }, formAction] = useActionState(
+  const [{ errors, success }, formAction, isPending] = useActionState(
     addChip.bind(null, match.id, players.length),
     {},
   );
 
-  const { control, watch, setValue, setFocus } = useForm<Schema>({
+  const { control, watch, setValue } = useForm<Schema>({
     defaultValues: {
       playerChip: players.map((player) => ({
         profileId: player.id,
@@ -84,21 +84,18 @@ export function ChipForm({ match }: { match: Match }) {
                     startContent={
                       isAutoFillAvailable &&
                       field.value === "" && (
-                        <>
-                          <Button
-                            variant="flat"
-                            size="sm"
-                            radius="md"
-                            color="secondary"
-                            className="h-6 w-max min-w-0 shrink-0 gap-1 px-2 text-[10px]"
-                            onPress={() => {
-                              setValue(field.name, String(-1 * totalChipCount));
-                              setFocus(field.name);
-                            }}
-                          >
-                            残り入力
-                          </Button>
-                        </>
+                        <Button
+                          variant="flat"
+                          size="sm"
+                          radius="md"
+                          color="secondary"
+                          className="h-6 w-max min-w-0 shrink-0 gap-1 px-2 text-[10px]"
+                          onPress={() => {
+                            setValue(field.name, String(-1 * totalChipCount));
+                          }}
+                        >
+                          残り入力
+                        </Button>
                       )
                     }
                     endContent={
@@ -123,7 +120,7 @@ export function ChipForm({ match }: { match: Match }) {
         <Button variant="light" onPress={chipModal.onClose}>
           キャンセル
         </Button>
-        <Button type="submit" color="primary">
+        <Button type="submit" color="primary" isLoading={isPending}>
           保存
         </Button>
       </ModalFooter>

diff --git a/...n)/(routes)/matches/(routes)/[matchId]/(components)/GameModal/(components)/Form/index.tsx b/...n)/(routes)/matches/(routes)/[matchId]/(components)/GameModal/(components)/Form/index.tsx
@@ -28,12 +28,12 @@ export function GameForm({ match }: { match: Match }) {
   const gameModal = useMatchContext().gameModal;
 
   const { rule } = match;
-  const [{ errors, success }, formAction] = useActionState(
+  const [{ errors, success }, formAction, isPending] = useActionState(
     addGame.bind(null, match.id, rule, match.players.length),
     {},
   );
 
-  const { control, watch, setValue, setFocus } = useForm<Schema>({
+  const { control, watch, setValue } = useForm<Schema>({
     defaultValues: {
       players: match.players.map((player) => ({
         id: player.id,
@@ -129,7 +129,6 @@ export function GameForm({ match }: { match: Match }) {
                                         name,
                                         String(totalPointsToBe - totalPoints),
                                       );
-                                      setFocus(name);
                                     }}
                                   >
                                     残り入力
@@ -204,7 +203,7 @@ export function GameForm({ match }: { match: Match }) {
         <Button variant="light" onPress={gameModal.onClose}>
           キャンセル
         </Button>
-        <Button type="submit" color="primary">
+        <Button type="submit" color="primary" isLoading={isPending}>
           保存
         </Button>
       </ModalFooter>

diff --git a/.../(components)/PlayersModal/(components)/Content/(components)/ProfileCreateModal/index.tsx b/.../(components)/PlayersModal/(components)/Content/(components)/ProfileCreateModal/index.tsx
@@ -20,7 +20,7 @@ export function ProfileCreateModal({
 }: Pick<ModalProps, "isOpen" | "onClose"> & {
   onProfileCreate: (profile: Profile) => void;
 }) {
-  const [state, formAction] = useActionState(
+  const [state, formAction, isPending] = useActionState(
     async (prevState: State, formData: FormData) => {
       const result = await createProfile(prevState, formData);
       const player = result.data;
@@ -55,7 +55,7 @@ export function ProfileCreateModal({
             />
           </ModalBody>
           <ModalFooter>
-            <Button color="primary" type="submit">
+            <Button color="primary" type="submit" isLoading={isPending}>
               決定
             </Button>
           </ModalFooter>

diff --git a/components/Button/index.tsx b/components/Button/index.tsx
@@ -1,24 +1 @@
-"use client";
-
-import {
-  Button as NextUiButton,
-  ButtonGroup,
-  ButtonProps,
-} from "@nextui-org/react";
-import { forwardRef } from "react";
-import { useFormStatus } from "react-dom";
-
-export const Button = forwardRef<HTMLButtonElement | null, ButtonProps>(
-  function Button({ isLoading, ...rest }, ref) {
-    const { pending } = useFormStatus();
-    return (
-      <NextUiButton
-        isLoading={isLoading ?? (rest.type === "submit" && pending)}
-        {...rest}
-        ref={ref}
-      />
-    );
-  },
-);
-
-export { ButtonGroup, type ButtonProps };
+export { Button, ButtonGroup, type ButtonProps } from "@nextui-org/react";
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jankiroku",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "",
   "main": "index.js",
   "engines": {
@@ -66,7 +66,7 @@
   "devDependencies": {
     "@commitlint/cli": "19.6.1",
     "@commitlint/config-conventional": "19.6.0",
-    "@types/node": "22.10.3",
+    "@types/node": "22.10.4",
     "@types/react": "19.0.2",
     "@types/react-dom": "19.0.2",
     "autoprefixer": "10.4.20",