Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 새로운 메시지 저장 시 refetch 전까지 이전 메시지들을 보여주는 오류를 해결 #498

Open
wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

feat: 새로운 메시지 저장 시 refetch 전까지 이전 메시지들을 보여주는 오류를 해결 #498

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
569bd30
feat: 메시지 작성시 발생하는 깜빡임 제거
prefer2 Oct 1, 2022
9866d7b
refactor: 불필요한 initMessage 제거
prefer2 Oct 1, 2022
b8bc69d
feat: rollingpaper state 작성
prefer2 Oct 3, 2022
9a693fd
feat: rollingpaper state 분류 및 깜빡임 제거
prefer2 Oct 3, 2022
e835b8d
refactor: hook 이름 변경 useMessage -> useMessageBox
prefer2 Oct 6, 2022
c0c8250
refactor: 메시지 수정, 삭제시에 메시지 작성 아이콘 보이도록 수정
prefer2 Oct 6, 2022
3872f8e
refactor: recipient 상수화
prefer2 Oct 6, 2022
39808d6
refactor: rollingpaper 상태 정리 및 파일 이동
prefer2 Oct 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 12 additions & 5 deletions frontend/src/pages/RollingpaperPage/components/LetterPaper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,25 @@ import PencilIcon from "@/assets/icons/bx-pencil.svg";

import MessageCreateForm from "@/pages/RollingpaperPage/components/MessageCreateForm";
import MessageBox from "@/pages/RollingpaperPage/components/MessageBox";
import useMessageWrite from "@/pages/RollingpaperPage/hooks/useMessageWrite";
import useSliceMessageList from "../hooks/useSliceMessageList";

interface LetterPaperProp {
to: string;
recipientType: Recipient;
messageList: Message[];
isWrite: boolean;
handleWriteButtonClick: () => void;
onEditEnd: () => void;
}

const LetterPaper = ({ to, recipientType, messageList }: LetterPaperProp) => {
const { isWrite, handleWriteButtonClick, handleWriteEnd } = useMessageWrite();

const LetterPaper = ({
to,
recipientType,
messageList,
isWrite,
handleWriteButtonClick,
onEditEnd,
}: LetterPaperProp) => {
const elementList = useMemo(() => {
const elementList = messageList
.map((message) => (
Expand All @@ -36,7 +43,7 @@ const LetterPaper = ({ to, recipientType, messageList }: LetterPaperProp) => {
? [
<MessageCreateForm
enableSecretMessage={recipientType === "MEMBER"}
onEditEnd={handleWriteEnd}
onEditEnd={onEditEnd}
/>,
...elementList,
]
Expand Down
4 changes: 0 additions & 4 deletions frontend/src/pages/RollingpaperPage/components/MessageCreateForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ export const MessageCreateForm = ({
handleColorClick,
handleAnonymousCheckBoxChange,
handleSecretCheckBoxChange,
initMessage,
} = useMessageForm({});

const rollingpaperId = useValidatedParam<number>("rollingpaperId");
Expand All @@ -38,13 +37,10 @@ export const MessageCreateForm = ({
anonymous,
secret: enableSecretMessage && secret,
});
initMessage();
onEditEnd();
};

const handleMessageCancel = () => {
if (confirm("메시지 작성을 취소하시겠습니까?")) {
initMessage();
onEditEnd();
}
};
Expand Down
3 changes: 0 additions & 3 deletions frontend/src/pages/RollingpaperPage/components/MessageUpdateForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export const MessageUpdateForm = ({
handleMessageChange,
handleAnonymousCheckBoxChange,
handleSecretCheckBoxChange,
initMessage,
} = useMessageForm({
initContent: content,
initColor: color,
Expand All @@ -47,13 +46,11 @@ export const MessageUpdateForm = ({
anonymous: newAnonymous,
secret: enableSecretMessage && newSecret,
});
initMessage();
onEditEnd();
};

const handleMessageCancel = () => {
if (confirm("메시지 작성을 취소하시겠습니까?")) {
initMessage();
onEditEnd();
}
};
Expand Down
6 changes: 0 additions & 6 deletions frontend/src/pages/RollingpaperPage/hooks/useMessageForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,6 @@ const useMessageForm = ({
setColor(color);
};

const initMessage = () => {
setContent("");
setColor(INIT_COLOR);
};

return {
color,
content,
Expand All @@ -50,7 +45,6 @@ const useMessageForm = ({
handleColorClick,
handleAnonymousCheckBoxChange,
handleSecretCheckBoxChange,
initMessage,
};
};

Expand Down
10 changes: 9 additions & 1 deletion frontend/src/pages/RollingpaperPage/hooks/useReadRollingpaper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,22 @@ import { GetRollingpaperResponse } from "@/types/apiResponse";
interface UseReadRollingpaperArgs {
teamId: number;
rollingpaperId: number;
handleWriteEnd: () => void;
}

export const useReadRollingpaper = ({
teamId,
rollingpaperId,
handleWriteEnd,
}: UseReadRollingpaperArgs) =>
useQuery<GetRollingpaperResponse, AxiosError>(
["rollingpaper", rollingpaperId],
() => getRollingpaper({ teamId, id: rollingpaperId }),
{ useErrorBoundary: true }
{
useErrorBoundary: true,
refetchOnWindowFocus: false,
onSuccess: () => {
handleWriteEnd();
},
}
);
6 changes: 6 additions & 0 deletions frontend/src/pages/RollingpaperPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,17 @@ import LetterPaper from "@/pages/RollingpaperPage/components/LetterPaper";

import useValidatedParam from "@/hooks/useValidatedParam";
import { useReadRollingpaper } from "@/pages/RollingpaperPage/hooks/useReadRollingpaper";
import useMessageWrite from "./hooks/useMessageWrite";

const RollingpaperPage = () => {
const teamId = useValidatedParam<number>("teamId");
const rollingpaperId = useValidatedParam<number>("rollingpaperId");
const { isWrite, handleWriteButtonClick, handleWriteEnd } = useMessageWrite();

const { isLoading, data: rollingpaper } = useReadRollingpaper({
teamId,
rollingpaperId,
handleWriteEnd,
});

if (isLoading) {
Expand All @@ -26,9 +29,12 @@ const RollingpaperPage = () => {
<PageTitleWithBackButton>{rollingpaper.title}</PageTitleWithBackButton>
<main>
<LetterPaper
isWrite={isWrite}
to={rollingpaper.to}
recipientType={rollingpaper.recipient}
messageList={[...rollingpaper.messages]}
handleWriteButtonClick={handleWriteButtonClick}
onEditEnd={handleWriteEnd}
/>
</main>
</>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LetterPaper 컴포넌트는 사실상 레이아웃을 위한 컨테이너 역할인 거 같아요.
굳이 한단계 추상화하는 것보다 LetterPaper의 로직을 RollingpaperPage로 옮겨도 괜찮을 것 같은데 어떤가요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이거를 옮겨볼려고 했는데요 useMemo를 쓰려고 하니 api 호출 시 에러가 발생하는(rollingpaper empty상태) 경우때문에 한 파일에서 작성하기 어려울 것 같더라고요...? 나중에 errro처리를 error boundary에서 다 해주거나하면 옮길 수 있을 것 같기도 하네요

Expand Down