From fd2530ff37e5c3708042865aa74283aad518c98c Mon Sep 17 00:00:00 2001 From: Hinata0607 Date: Tue, 3 Sep 2024 21:43:10 +0900 Subject: [PATCH] update: custom mode provider management --- src/hooks/context/useCharacter.tsx | 13 ++++++++++ src/interfaces/hooks/UseCharacterProps.d.ts | 5 ++++ .../provider/ContextProviderProps.d.ts | 4 +++ .../mainLayout/atom/MainCustomModalBody.tsx | 9 +++---- .../atom/MainCustomModalTextArea.tsx | 25 +++++++++++++++++-- .../atom/MainHeaderCommandsRight.tsx | 4 ++- src/provider/ContextProvider.tsx | 6 +++++ 7 files changed, 57 insertions(+), 9 deletions(-) diff --git a/src/hooks/context/useCharacter.tsx b/src/hooks/context/useCharacter.tsx index e442fbc..5647837 100644 --- a/src/hooks/context/useCharacter.tsx +++ b/src/hooks/context/useCharacter.tsx @@ -25,6 +25,10 @@ export const useCharacter = (): UseCharacterProps => { setText, style, setStyle, + customText, + setCustomText, + isCustom, + setIsCustom, } = context; const handleGetCharacters = async (): Promise => { @@ -94,6 +98,10 @@ export const useCharacter = (): UseCharacterProps => { })); }; + const handleSetCustomText = ({ text }: { text: string }): void => { + setCustomText(text); + }; + return { characters, setCharacters, @@ -103,5 +111,10 @@ export const useCharacter = (): UseCharacterProps => { setStyle, handleGetCharacters, handleSetCharacterStyle, + customText, + setCustomText, + handleSetCustomText, + isCustom, + setIsCustom, }; }; diff --git a/src/interfaces/hooks/UseCharacterProps.d.ts b/src/interfaces/hooks/UseCharacterProps.d.ts index bbdb570..9d54e24 100644 --- a/src/interfaces/hooks/UseCharacterProps.d.ts +++ b/src/interfaces/hooks/UseCharacterProps.d.ts @@ -17,8 +17,13 @@ export interface UseCharacterProps { setStyle: React.Dispatch< React.SetStateAction<{ [uuid: string]: characterStyleProps }> >; + customText: string | null; + setCustomText: React.Dispatch>; + isCustom: boolean; + setIsCustom: React.Dispatch>; handleGetCharacters: () => Promise; handleSetCharacterStyle: ({ index }: HandleSetCharacterStyleProps) => void; + handleSetCustomText: ({ text: string }) => void; } export interface HandleGetCharacterDetailProps { diff --git a/src/interfaces/provider/ContextProviderProps.d.ts b/src/interfaces/provider/ContextProviderProps.d.ts index 78eb17f..7495923 100644 --- a/src/interfaces/provider/ContextProviderProps.d.ts +++ b/src/interfaces/provider/ContextProviderProps.d.ts @@ -41,6 +41,10 @@ export interface ContextProviderProps { >; isCustomModal: boolean; setIsCustomModal: React.Dispatch>; + customText: string | null; + setCustomText: React.Dispatch>; + isCustom: boolean; + setIsCustom: React.Dispatch>; } export type SelectedContentProps = 'noSelected' | 'character' | 'log' | 'call'; diff --git a/src/layouts/mainLayout/atom/MainCustomModalBody.tsx b/src/layouts/mainLayout/atom/MainCustomModalBody.tsx index ad52567..fb1c138 100644 --- a/src/layouts/mainLayout/atom/MainCustomModalBody.tsx +++ b/src/layouts/mainLayout/atom/MainCustomModalBody.tsx @@ -1,21 +1,18 @@ 'use client'; import { Box } from '@mui/material'; import { MainCustomModalTextArea } from './MainCustomModalTextArea'; -import { useBreakPoint } from '@/hooks'; export const MainCustomModalBody = () => { - const breakpoint = useBreakPoint(); - return ( { + const palette = usePalette(); + const { handleSetCustomText, customText, isCustom, setIsCustom } = + useCharacter(); + return ( <> { rows={10} label="キャラクターのカスタマイズ設定を入力" inputProps={{ maxLength: 200 }} + value={customText || ''} + onChange={(e) => handleSetCustomText({ text: e.target.value })} /> - + + + カスタムモードを適用 + + setIsCustom((prev) => !prev)} + /> + ); }; diff --git a/src/layouts/mainLayout/atom/MainHeaderCommandsRight.tsx b/src/layouts/mainLayout/atom/MainHeaderCommandsRight.tsx index ba56846..a802cf6 100644 --- a/src/layouts/mainLayout/atom/MainHeaderCommandsRight.tsx +++ b/src/layouts/mainLayout/atom/MainHeaderCommandsRight.tsx @@ -1,11 +1,12 @@ 'use client'; -import { useCall, useLayout, usePalette } from '@/hooks'; +import { useCall, useCharacter, useLayout, usePalette } from '@/hooks'; import { Call, CallEnd, Settings } from '@mui/icons-material'; import { Box, Tooltip } from '@mui/material'; export const MainHeaderCommandsRight = () => { const { selectedContent, setIsCustomModal } = useLayout(); const { handleNewCallStart, handleCallStart, handleCallEnd } = useCall(); + const { isCustom } = useCharacter(); const palette = usePalette(); const iconDisabled: boolean = !['character', 'log', 'call'].includes( selectedContent @@ -25,6 +26,7 @@ export const MainHeaderCommandsRight = () => { onClick={() => setIsCustomModal((prev) => !prev)} sx={{ cursor: 'pointer', + color: isCustom ? palette.primary.main : palette.text.primary, }} /> diff --git a/src/provider/ContextProvider.tsx b/src/provider/ContextProvider.tsx index 23fd86b..5d74965 100644 --- a/src/provider/ContextProvider.tsx +++ b/src/provider/ContextProvider.tsx @@ -33,8 +33,12 @@ export const ContextProvider = ({ children }: { children: ReactNode }) => { const [isSending, setIsSending] = useState(false); const [chat, setChat] = useState<{ [uuid: string]: ChatsResponse }>({}); const [isCustomModal, setIsCustomModal] = useState(false); + const [customText, setCustomText] = useState(null); + const [isCustom, setIsCustom] = useState(false); const contextValue = { + isCustom, + setIsCustom, characters, setCharacters, chatRooms, @@ -61,6 +65,8 @@ export const ContextProvider = ({ children }: { children: ReactNode }) => { setChat, isCustomModal, setIsCustomModal, + customText, + setCustomText, }; return {children};