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.

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

Feat/#409-K: 선택된 회의록 id URL에 반영 #411

Merged
merged 19 commits into from
Jun 12, 2023
Merged
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
84c51c5
feat: 선택된 회의록 id url params에 추가
se030 Jan 4, 2023
c92fb51
feat: URL 통한 회의록 선택 기능 추가
se030 May 28, 2023
e093b3a
refactor: navigation, 회의록 상태 및 이벤트 로직 위치 이동
se030 May 30, 2023
6dc17bf
chore: recoil 설치
se030 May 31, 2023
7e4ffc7
feat: Mom 로딩 상태 및 DefaultMom 렌더링 로직의 workspace.moms에 recoil 적용
se030 May 31, 2023
9bfe536
Merge branch 'dev' into feat/#409-K
se030 May 31, 2023
3fdc7da
docs: 회의록 선택에 따른 URL 변경 및 SELECT 이벤트 흐름 주석 추가
se030 May 31, 2023
0a269f0
refactor: 회의록 선택 로직 MomList로 이동
se030 Jun 4, 2023
94c03b6
del: 중복 로직 제거
se030 Jun 4, 2023
07c6c33
refactor: 회의록 없는 경우의 분기 Mom에서 Workspace 컴포넌트로 이동
se030 Jun 5, 2023
10fb0b4
refactor: Sidebar의 workspace recoil atom으로 변경
se030 Jun 5, 2023
ea184e7
feat: 선택 회의록 정보 MomList 스타일에 반영
se030 Jun 5, 2023
56e826a
feat: MOM_EVENT.SELECT emit 위치 Workspace로 이동
se030 Jun 5, 2023
b910d5b
feat: 워크스페이스 이동 로직 개선
se030 Jun 5, 2023
2775b02
refactor: MOM_EVENT.SELECT 이벤트 관련 코드 Workspace로 이동
se030 Jun 5, 2023
33b1bf3
docs: 정규식 주석 추가
se030 Jun 5, 2023
c249d90
refactor: momId 추출에 정규식 대신 react-router useParams 사용
se030 Jun 5, 2023
abdaea1
chore: react-query 설치
se030 Jun 12, 2023
075356b
feat: workspace 상태에 useQuery 사용
se030 Jun 12, 2023
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
Prev Previous commit
feat: workspace 상태에 useQuery 사용
recoil 관련 코드 제거 및 react-query로 대체
se030 committed Jun 12, 2023
commit 075356bcb80bebd57a0b68b6f07e9e7cade8cc38
4 changes: 3 additions & 1 deletion client/src/apis/workspace.ts
Original file line number Diff line number Diff line change
@@ -28,7 +28,9 @@ export const postWorkspaceJoin = async ({

export const getWorkspaceInfo = async ({
id,
}: GetInfoParams): Promise<WorkspaceInfo> => {
}: Partial<GetInfoParams>): Promise<WorkspaceInfo | null> => {
if (!id) return null;

const res = await http.get(`/workspace/${id}`);

if (res.status !== OK) throw new Error();
11 changes: 8 additions & 3 deletions client/src/components/Sidebar/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useRecoilValue } from 'recoil';
import { workspaceState } from 'src/store/atom/workspace';
import { useQuery } from '@tanstack/react-query';
import { useParams } from 'react-router-dom';
import { getWorkspaceInfo } from 'src/apis/workspace';

import Header from './Header';
import MeetingButton from './MeetingButton';
@@ -8,7 +9,11 @@ import MomList from './MomList';
import style from './style.module.scss';

function Sidebar() {
const workspace = useRecoilValue(workspaceState);
const { id } = useParams();
const { data: workspace } = useQuery({
queryKey: ['workspace', id],
queryFn: () => getWorkspaceInfo({ id }),
});

if (!workspace) {
return <div className={style['sidebar-container']}></div>;
26 changes: 10 additions & 16 deletions client/src/components/Workspace/index.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import { useQuery } from '@tanstack/react-query';
import * as MomMessage from '@wabinar/api-types/mom';
import { MOM_EVENT, WORKSPACE_EVENT } from '@wabinar/constants/socket-message';
import Mom from 'components/Mom';
import DefaultMom from 'components/Mom/DefaultMom';
import Sidebar from 'components/Sidebar';
import { useEffect, useMemo, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useRecoilState } from 'recoil';
import { getWorkspaceInfo } from 'src/apis/workspace';
import MeetingMediaBar from 'src/components/MeetingMediaBar';
import MeetingContext from 'src/contexts/meeting';
import { SelectedMomContext } from 'src/contexts/selected-mom';
import { SocketContext } from 'src/contexts/socket';
import useSocket from 'src/hooks/useSocket';
import { workspaceState } from 'src/store/atom/workspace';
import { TMom } from 'src/types/mom';

function Workspace() {
@@ -22,27 +21,18 @@ function Workspace() {
const params = useParams();
const momId = params['*'];

const [workspace, setWorkspace] = useRecoilState(workspaceState);
const { data: workspace } = useQuery({
queryKey: ['workspace', id],
queryFn: () => getWorkspaceInfo({ id }),
});

const [selectedMom, setSelectedMom] = useState<TMom | null>(null);
const [isOnGoing, setIsOnGoing] = useState(false);

const momSocket = useSocket(`/workspace-mom/${id}`);
const workspaceSocket = useSocket(`/workspace/${id}`);

const loadWorkspaceInfo = async () => {
if (id) {
const workspaceInfo = await getWorkspaceInfo({ id });

setWorkspace(workspaceInfo);

if (!workspaceInfo.moms.length) {
setSelectedMom(null);
}
}
};

useEffect(() => {
loadWorkspaceInfo();
setIsOnGoing(false);
}, [id]);

@@ -53,6 +43,10 @@ function Workspace() {
if (!momId && moms.length) {
navigate(moms[0]._id);
}

if (!moms.length) {
setSelectedMom(null);
}
}, [workspace, momId]);

useEffect(() => {
8 changes: 4 additions & 4 deletions client/src/components/WorkspaceThumbnailList/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useQueryClient } from '@tanstack/react-query';
import { useNavigate, useParams } from 'react-router-dom';
import { useRecoilState } from 'recoil';
import { workspaceState } from 'src/store/atom/workspace';
import { Workspace } from 'src/types/workspace';

import style from './style.module.scss';
@@ -11,14 +10,15 @@ interface WorkspaceThumbnailListProps {
}

function WorkspaceThumbnailList({ workspaces }: WorkspaceThumbnailListProps) {
const queryClient = useQueryClient();

const { id: currentId } = useParams();
const navigate = useNavigate();
const [, setWorkspace] = useRecoilState(workspaceState);

const onClick = (targetId: number) => {
if (Number(currentId) === targetId) return;

setWorkspace(null);
queryClient.invalidateQueries({ queryKey: ['workspace', currentId] });
navigate(`/workspace/${targetId}`);
};

8 changes: 5 additions & 3 deletions client/src/main.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { RecoilRoot } from 'recoil';
import 'react-toastify/dist/ReactToastify.css';

import App from './App';
import Toaster from './components/common/Toaster';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<RecoilRoot>
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<App />
<Toaster />
</BrowserRouter>
</RecoilRoot>,
</QueryClientProvider>,
);
7 changes: 0 additions & 7 deletions client/src/store/atom/workspace.ts

This file was deleted.