[#57, #61]Feat:최적화, DM페이지 방 생성 시 표시

Sweet-red-beans · Mar 26, 2022 · f8e6ba9 · f8e6ba9
1 parent 7c11023
commit f8e6ba9
Show file tree

Hide file tree

Showing 12 changed files with 726 additions and 761 deletions.
diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js b/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js
diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMList.js b/frontend/sweet-red-beans/src/components/DMPage/DMList.js
@@ -7,19 +7,43 @@ import { SELECTED_DM } from '../../actions/types';
 import { useNavigate } from 'react-router';
 import style from '../../css/DMPage/DMList.module.css';
 
-const DMList = ({ DMlist, DMListClick }) => {
-    console.log(DMlist);
-    return (
-        <>
-            <div className={style.DMListContainer}>
-                {DMlist.map((item, index) => (
-                    <div key={index} onClick={(e) => DMListClick(item, e)}>
-                        <DMListThumbnail dm={item} />
-                    </div>
-                ))}
-            </div>
-        </>
-    );
+const DMList = () => {
+  const dispatch = useDispatch();
+  const [DMlist, setDMList] = useState([]);
+  useEffect(() => {
+    //DM 목록 조회
+    axios
+      .get('http://localhost:8080/direct-message', {
+        withCredentials: true,
+      })
+      .then((response) => {
+        setDMList(response.data.room_id);
+      })
+      .catch((error) => {});
+
+    return () => {
+      setDMList(null);
+    };
+  }, []);
+
+  const DMListClick = (selectedRoom, e) => {
+    dispatch({
+      type: SELECTED_DM,
+      payload: selectedRoom,
+    });
+  };
+
+  return (
+    <>
+      <div className={style.DMListContainer}>
+        {DMlist.map((item, index) => (
+          <div key={index} onClick={(e) => DMListClick(item, e)}>
+            <DMListThumbnail dm={item} />
+          </div>
+        ))}
+      </div>
+    </>
+  );
 };
 
 export default DMList;
diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMListThumbnail.js b/frontend/sweet-red-beans/src/components/DMPage/DMListThumbnail.js
@@ -6,61 +6,55 @@ import { parseDate } from '../../parseDate/parseDate';
 import user from '../../img/user.png';
 
 const DMListThumbnail = ({ dm }) => {
-    //const cookies = Cookies();
-    const dispatch = useDispatch();
-    const navigation = useNavigate();
-    const [currentRoom, setCurrentRoom] = useState(false);
-    const selectedRoomId = useSelector((s) => {
-        if (s === undefined) {
-            return null;
-        } else {
-            return s.selectedRoomId;
-        }
-    });
+  //const cookies = Cookies();
+  const dispatch = useDispatch();
+  const navigation = useNavigate();
+  const [currentRoom, setCurrentRoom] = useState(false);
+  const selectedRoomId = useSelector((s) => {
+    if (s === undefined) {
+      return null;
+    } else {
+      return s.selectedRoom;
+    }
+  });
 
-    useEffect(() => {
-        console.log(dm);
-        if (selectedRoomId !== null) {
-            if (dm.chat_room_id === selectedRoomId) {
-                console.log('a의 번호: ', selectedRoomId);
-                console.log('같음 : ', dm.chat_room_id);
-                setCurrentRoom(true);
-            } else {
-                setCurrentRoom(false);
-            }
-        }
-    }, [selectedRoomId]);
+  useEffect(() => {
+    if (selectedRoomId !== null) {
+      if (dm.chat_room_id === selectedRoomId.chat_room_id) {
+        setCurrentRoom(true);
+      } else {
+        setCurrentRoom(false);
+      }
+    }
+  }, [selectedRoomId]);
 
-    return (
-        <>
-            <div
-                className={
-                    currentRoom ? style.currentThumbnail : style.thumbnail
-                }>
-                <img
-                    src={
-                        dm.user_status === '정지' || dm.user_status === '탈퇴'
-                            ? user
-                            : dm.not_mine_profile_url
-                    }
-                />
+  return (
+    <>
+      <div className={currentRoom ? style.currentThumbnail : style.thumbnail}>
+        <img
+          src={
+            dm.user_status === '정지' || dm.user_status === '탈퇴'
+              ? user
+              : dm.not_mine_profile_url
+          }
+        />
 
-                <div className={style.contentArea}>
-                    <div>
-                        {dm.user_status === '정지' || dm.user_status === '탈퇴'
-                            ? '(알수없음)'
-                            : dm.not_mine_nickname}
-                    </div>
-                    <div>{dm.recent_message}</div>
-                </div>
-                <div>
-                    {dm.recent_message_date === '2020-01-01T00:00:00'
-                        ? ''
-                        : parseDate(dm.recent_message_date)}
-                </div>
-            </div>
-        </>
-    );
+        <div className={style.contentArea}>
+          <div>
+            {dm.user_status === '정지' || dm.user_status === '탈퇴'
+              ? '(알수없음)'
+              : dm.not_mine_nickname}
+          </div>
+          <div>{dm.recent_message}</div>
+        </div>
+        <div>
+          {dm.recent_message_date === '2020-01-01T00:00:00'
+            ? ''
+            : parseDate(dm.recent_message_date)}
+        </div>
+      </div>
+    </>
+  );
 };
 
 export default DMListThumbnail;
diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMPage.js b/frontend/sweet-red-beans/src/components/DMPage/DMPage.js
@@ -8,61 +8,27 @@ import style from '../../css/DMPage/DMPage.module.css';
 import { SELECTED_DM } from '../../actions/types';
 
 const DMPage = () => {
-  const dispatch = useDispatch();
-  const [DMlist, setDMList] = useState([]);
-  const [selectedRoomId, setSelectedRoomId] = useState(null);
-
-  const navigation = useNavigate();
-  const [renderError, setRenderError] = useState(true);
-
-  useEffect(() => {
-    //DM 목록 조회
-    axios
-      .get('http://localhost:8080/direct-message', {
-        withCredentials: true,
-      })
-      .then((response) => {
-        setDMList(response.data.room_id);
-        setRenderError(false);
-      })
-      .catch((error) => {
-        setRenderError(true);
-        alert('로그인을 먼저 해주세요');
-        navigation('/');
-      });
-
-    return () => {
-      dispatch({
-        type: SELECTED_DM,
-        payload: null,
-      });
-    };
-  }, []);
-
-  const DMListClick = (selectedRoom, e) => {
-    dispatch({
-      type: SELECTED_DM,
-      payload: selectedRoom.chat_room_id,
-    });
-    setSelectedRoomId(selectedRoom);
-  };
+  const selectedRoomId = useSelector((s) => {
+    if (s === undefined) {
+      return null;
+    } else {
+      return s.selectedRoom;
+    }
+  });
 
   return (
     <>
-      {!renderError ? (
-        <>
-          <div className={style.dmpage}>
-            <div>
-              <DMList DMlist={DMlist} DMListClick={DMListClick} />
-            </div>
-            <div>
-              {selectedRoomId !== null ? (
-                <DMDetail selectedRoom={selectedRoomId} />
-              ) : null}
-            </div>
-          </div>
-        </>
-      ) : null}
+      <div className={style.dmpage}>
+        <div>
+          <DMList />
+        </div>
+
+        <div>
+          {selectedRoomId !== null ? (
+            <DMDetail selectedRoom={selectedRoomId} />
+          ) : null}
+        </div>
+      </div>
     </>
   );
 };

diff --git a/frontend/sweet-red-beans/src/components/MainPage/MainMovieEvents.js b/frontend/sweet-red-beans/src/components/MainPage/MainMovieEvents.js
@@ -11,71 +11,67 @@ import Test from './Test';
 import EventMovieThumbnail from '../EventPage/EventMovieThumbnail';
 
 const MainMovieEvents = ({ cinemaName }) => {
-    const dispatch = useDispatch();
-    const [events, setEvents] = useState([]);
-    const [thisEvents, setThisEvents] = useState([]);
-    const filterMovieList = [];
+  const dispatch = useDispatch();
+  const [events, setEvents] = useState([]);
+  const [thisEvents, setThisEvents] = useState([]);
+  const filterMovieList = [];
 
-    useEffect(() => {
-        axios
-            .get('http://localhost:8080/main/event-limit', {
-                withCredentials: true,
-            })
-            .then((response) => {
-                setEvents(response.data);
-            });
-    }, []);
+  useEffect(() => {
+    axios
+      .get('http://localhost:8080/main/event-limit', {
+        withCredentials: true,
+      })
+      .then((response) => {
+        setEvents(response.data);
+      });
+  }, []);
 
-    useEffect(() => {
-        console.log(events);
-        events.map((item, index) => {
-            if (item.cinema_name === cinemaName) {
-                filterMovieList.push(item);
-            }
-        });
-        setThisEvents(filterMovieList);
-        dispatch({
-            type: MAIN_CINEMA_EVENTS,
-            mainCinemaEvents: {
-                cinemaName: cinemaName,
-                mainCinemaEvents: filterMovieList,
-            },
-        });
-    }, [events]);
+  useEffect(() => {
+    console.log(events);
+    events.map((item, index) => {
+      if (item.cinema_name === cinemaName) {
+        filterMovieList.push(item);
+      }
+    });
+    setThisEvents(filterMovieList);
+    dispatch({
+      type: MAIN_CINEMA_EVENTS,
+      mainCinemaEvents: {
+        cinemaName: cinemaName,
+        mainCinemaEvents: filterMovieList,
+      },
+    });
+  }, [events]);
 
-    useEffect(() => {}, [thisEvents]);
-
-    const settings = {
-        dots: false,
-        arrows: true,
-        infinite: true,
-        speed: 500,
-        slidesToShow: 3,
-        slidesToScroll: 3,
-    };
-    return (
-        <>
-            <div className={style.cinemaName}>
-                {cinemaName}
-                <div className={style.underline}></div>
-            </div>
-            <div className={style.movieThumbnails}>
-                {thisEvents !== [] ? (
-                    <Slider {...settings}>
-                        {
-                            thisEvents.map((item, index) => (
-                                <div key={index}>
-                                    <EventMovieThumbnail event={item} />
-                                </div>
-                            ))
-                            //thisEvents!==[] ? thisEvents.map((item, index) => <div key={index}><MovieThumbnail thisEvent={item}/></div>) : null
-                            //test.map((item, index) => <div>{item}</div>)
-                        }
-                    </Slider>
-                ) : null}
-            </div>
-        </>
-    );
+  const settings = {
+    dots: false,
+    arrows: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+  };
+  return (
+    <>
+      <div className={style.cinemaName}>
+        {cinemaName}
+        <div className={style.underline}></div>
+      </div>
+      <div className={style.movieThumbnails}>
+        {thisEvents.length !== 0 ? (
+          <Slider {...settings}>
+            {thisEvents.map((item, index) => (
+              <div key={index}>
+                <EventMovieThumbnail event={item} />
+              </div>
+            ))}
+          </Slider>
+        ) : (
+          <div className={style.nullEvents}>업데이트 된 이벤트가 없어요</div>
+        )}
+      </div>
+    </>
+  );
 };
 
 export default MainMovieEvents;