Merge pull request #251 from sang-gyeong/web

[FE] Feat : useSWR mutate 메서드를 사용하여 데이터 변경사항 즉시 반영하기

Author: sang-gyeong

frontend/src/components/ArtistList/index.tsx

@@ -1,13 +1,40 @@
 import React from 'react';
 import styled from '@styles/themed-components';
 import ArtistCard from '@components/Common/Card/ArtistCard';
+import { mutate } from 'swr';
+import api from '@api/index';
+import { useAuthDispatch } from '@context/AuthContext';
 
 const ArtistList = ({ artistList }) => {
+  const dispatch = useAuthDispatch();
+
+  const fetchData = async id => {
+    await api.delete(`library/artists/${id}`);
+    dispatch({ type: 'DELETE_ARTIST', artistId: id });
+    const updatedArtists = await artistList.filter(artist => artist.id !== id);
+    mutate(
+      '/library/artists',
+      data => {
+        return { ...data, data: updatedArtists };
+      },
+      false,
+    );
+  };
+
+  const deleteArtist = (e, id) => {
+    fetchData(id);
+  };
+
   return (
     <ListContainer>
       {artistList
         ? artistList?.map(artist => (
-          <ArtistCard key={artist.id} artistMetaData={artist} type="myArtist" />
+            <ArtistCard
+            key={artist.id}
+            artistMetaData={artist}
+            deleteArtist={deleteArtist}
+            type="myArtist"
+          />
           ))
         : null}
     </ListContainer>

frontend/src/components/Common/Card/ArtistCard/index.tsx

@@ -4,14 +4,14 @@ import CircleImage from '@components/Common/CircleImage';
 import CircleHeartButton from '@components/Common/Button/CircleHeartButton';
 import A from '@components/Common/A';
 import api from '@api/index';
-import { mutate } from 'swr';
 import logEventHandler from '@utils/logEventHandler';
 import ClickEventWrapper from '@components/EventWrapper/ClickEventWrapper';
 import { useAuthDispatch } from '@context/AuthContext';
 
 interface IArtistMetaProps {
   artistMetaData: ArtistMeta;
   type?: string | null;
+  deleteArtist?: any;
 }
 
 interface ArtistMeta {
@@ -21,18 +21,8 @@ interface ArtistMeta {
   imgUrl: string;
 }
 
-const ArtistCard = ({ artistMetaData: artist, type }: IArtistMetaProps) => {
+const ArtistCard = ({ artistMetaData: artist, type, deleteArtist }: IArtistMetaProps) => {
   const target = 'ArtistCard';
-  const dispatch = useAuthDispatch();
-
-  const deleteArtist = async (e, id) => {
-    await api.delete(`library/artists/${id}`);
-    e.target.closest('.artist-card').style.opacity = '0';
-    e.target.closest('.artist-card').style.transform = 'translate(0px, -35px)';
-    dispatch({ type: 'DELETE_ARTIST', artistId: id });
-    mutate(`${process.env.NEXT_PUBLIC_API_BASE_URL}/library/artists`);
-  };
-
   return (
     <Container className="artist-card">
       <ImageContainer>

frontend/src/components/Common/Dropdown/ArtistDropdown.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from '@styles/themed-components';
 import { Dropdown } from 'semantic-ui-react';
-import api from '@api/index';
 import logEventHandler from '@utils/logEventHandler';
 import ClickEventWrapper from '@components/EventWrapper/ClickEventWrapper';
 import * as T from '../../../constants/dropdownText';
@@ -12,21 +11,13 @@ interface ILogData {
   parameters: any;
 }
 
-const ArtistDropdown = id => {
-  const postLog = logData => {
-    api.post('/log', logData);
-  };
-
+function ArtistDropdown({ id, addArtistEvent }) {
   const libraryLogData: ILogData = {
     eventTime: new Date(),
     eventName: 'library_event',
     parameters: { action: 'add', type: 'artist', id },
   };
 
-  const addLibraryEvent = () => {
-    api.post('/library/artists', { artistId: id }).then(() => postLog(libraryLogData));
-  };
-
   return (
     <Wrapper>
       <Dropdown
@@ -39,7 +30,7 @@ const ArtistDropdown = id => {
             <Dropdown.Item
               style={dropdownItemStyle}
               text={T.LIKE}
-              onClick={logEventHandler(addLibraryEvent, libraryLogData)}
+              onClick={logEventHandler(addArtistEvent, libraryLogData)}
             />
           </ClickEventWrapper>
           <ClickEventWrapper target="ShareBtn/artist" id={id}>
@@ -49,7 +40,7 @@ const ArtistDropdown = id => {
       </Dropdown>
     </Wrapper>
   );
-};
+}
 
 const authDropdownStyle = {
   width: '100%',

frontend/src/components/Common/PlayTrackItem/index.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import styled from 'styled-components';
 import { IoMdHeartEmpty, IoMdHeart } from 'react-icons/io';
 import logEventHandler from '@utils/logEventHandler';
-
+import { mutate } from 'swr';
 import api from '@api/index';
 import { useAuthState, useAuthDispatch } from '@context/AuthContext';
 import A from '@components/Common/A';
@@ -15,12 +15,27 @@ function PlayTrackItem({ type, trackData: track }) {
   const { trackList } = state;
   const target = 'PlayTrackItem';
 
-  const addTrackEvent = () => {
-    api.post(`library/tracks`, { trackId: track.id });
+  const addTrackEvent = async () => {
+    await api.post(`library/tracks`, { trackId: track.id });
+    mutate(
+      '/library/tracks',
+      data => {
+        return { ...data, data: [...data.data, track].sort((a, b) => a.id - b.id) };
+      },
+      true,
+    );
     dispatch({ type: 'ADD_TRACK', trackId: track.id });
   };
-  const deleteTrackEvent = () => {
-    api.delete(`library/tracks/${track.id}`);
+  const deleteTrackEvent = async () => {
+    await api.delete(`library/tracks/${track.id}`);
+    mutate(
+      '/library/tracks',
+      data => {
+        const updatedTracks = data.data.filter(item => item.id !== track.id);
+        return { ...data, data: [...updatedTracks] };
+      },
+      false,
+    );
     dispatch({ type: 'DELETE_TRACK', trackId: track.id });
   };
 

frontend/src/pages/Detail/Artist/index.tsx

@@ -8,6 +8,7 @@ import RelatedArtist from '@components/Common/SampleSection/RelatedArtist';
 import TrackList from '@components/TrackList';
 import logEventHandler from '@utils/logEventHandler';
 import api from '@api/index';
+import { mutate } from 'swr';
 
 import getMultipleNames from '@utils/getMultipleNames';
 import AlbumList from '@components/AlbumList';
@@ -23,14 +24,29 @@ function ArtistDetail({ artistInfo: artist }) {
   const { artistList } = state;
   const [artistState, setArtistState] = useState(artistList);
 
-  const deleteArtistEvent = () => {
-    api.delete(`library/artists/${artist.id}`);
+  const deleteArtistEvent = async () => {
+    await api.delete(`library/artists/${artist.id}`);
     dispatch({ type: 'DELETE_ARTIST', artistId: artist.id });
+    mutate(
+      '/library/artists',
+      data => {
+        const updatedArtists = data.data.filter(item => item.id !== artist.id);
+        return { ...data, data: [...updatedArtists] };
+      },
+      true,
+    );
   };
 
-  const addArtistEvent = () => {
-    api.post(`library/artists`, { artistId: artist.id });
+  const addArtistEvent = async () => {
+    await api.post(`library/artists`, { artistId: artist.id });
     dispatch({ type: 'ADD_ARTIST', artistId: artist.id });
+    mutate(
+      '/library/artists',
+      data => {
+        return { ...data, data: [...data.data, artist] };
+      },
+      true,
+    );
   };
 
   useEffect(() => {
@@ -48,7 +64,9 @@ function ArtistDetail({ artistInfo: artist }) {
           <TopContainer>
             <MainTitle>{artist.name}</MainTitle>
             <SubTitle>
-              {artist.debut.replace(/-/g, '.').slice(0, 10)} 데뷔 ·{' '}
+              {artist.debut.replace(/-/g, '.').slice(0, 10)}
+{' '}
+데뷔 ·{' '}
               {getMultipleNames(artist.genres)}
             </SubTitle>
           </TopContainer>
@@ -71,7 +89,7 @@ function ArtistDetail({ artistInfo: artist }) {
               </ButtonContainer>
               <ButtonContainer>
                 <HiOutlineDotsHorizontal size={24} color="575757" />
-                <ArtistDropdown id={artist.id} />
+                <ArtistDropdown id={artist.id} addArtistEvent={addArtistEvent} />
               </ButtonContainer>
             </ButtonWrapper>
           </BottomContainer>

frontend/src/utils/logEventHandler.tsx

@@ -1,8 +1,16 @@
+import { mutate } from 'swr';
 import api from '../api';
 
-const postLog = logData => {
+const postLog = async logData => {
   const timeStampedLog = { ...logData, eventTime: new Date() };
-  api.post('/log', timeStampedLog);
+  await api.post('/log', timeStampedLog);
+  mutate(
+    '/log',
+    data => {
+      return { ...data, data: [...data.data, logData] };
+    },
+    true,
+  );
 };
 
 const logEventHandler = (handler, logData) => {