[Add] 알림 눌렀을 때 상세페이지에 정보 맵핑해서 보여줌 #86

- 상세페이지 눌렀을 때 feedId에 따라 정보 보여줌 - 바탕 클릭시 모달 꺼짐
connect-foundation · Dec 12, 2019 · 001c9e3 · 001c9e3
1 parent de11d38
commit 001c9e3
Show file tree

Hide file tree

Showing 8 changed files with 128 additions and 38 deletions.
diff --git a/client/src/composition/DetailFeed/CommonModal.tsx b/client/src/composition/DetailFeed/CommonModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { ReactNode } from 'react';
 
@@ -35,6 +35,7 @@ const Wrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  color: black;
 `;
 const CloseModal = styled.p`
   color: white;
@@ -48,22 +49,22 @@ interface IProps {
   imageChildren?: ReactNode;
   className?: string;
   onClick?: () => void;
+  isOpen: boolean;
+  closeModal: () => void;
 }
 
 function Commonmodal({
   onClick,
   textChildren,
   imageChildren,
-  className
+  className,
+  isOpen,
+  closeModal
 }: IProps) {
-  const [isOpen, setIsOpen] = useState(true);
-  const closeModal = () => {
-    setIsOpen(false);
-  };
   return isOpen ? (
     <Wrapper>
-      <ModalBackgroud>
-        <CloseModal onClick={closeModal}>X</CloseModal>
+      <ModalBackgroud onClick={closeModal}>
+        <CloseModal>X</CloseModal>
       </ModalBackgroud>
 
       <ModalFrame onClick={onClick} className={className}>

diff --git a/client/src/composition/DetailFeed/index.tsx b/client/src/composition/DetailFeed/index.tsx
@@ -1,37 +1,48 @@
 import React from 'react';
 import CommonModal from './CommonModal';
 import Feed from '../Feed/Feed';
-import { useGetfeedsQuery } from 'react-components.d';
+import { useGetfeedQuery } from 'react-components.d';
 import { getDate } from 'utils/dateUtil';
 import styled from 'styled-components';
 
 const ModalFeed = styled(Feed)`
   border: none;
   border-radius: 0px;
 `;
-const DetailFeed: React.FC = () => {
-  const { data } = useGetfeedsQuery({
-    variables: { first: 1, currentCursor: '9999-12-31T09:29:26.050Z' }
+interface Iprops {
+  isOpen: boolean;
+  feedId: number;
+  closeModal: () => void;
+}
+const DetailFeed = ({ isOpen, feedId, closeModal }: Iprops) => {
+  const { data } = useGetfeedQuery({
+    variables: { feedId: feedId && Number(feedId) }
   });
 
   const valuecheck = () => {
-    return data && data.feeds && data.feeds.feedItems
-      ? data.feeds.feedItems.map((feed, idx) => {
-          return feed && feed.feed && feed.feed.createdAt ? (
-            <ModalFeed
-              key={getDate(feed.feed.createdAt).toISOString() + idx}
-              content={feed.feed.content}
-              feedinfo={feed}
-              createdAt={getDate(feed.feed.createdAt).toISOString()}
-              feedSize={'30rem'}
-            />
-          ) : (
-            <></>
-          );
-        })
-      : '';
+    const feed = data && data.feed;
+    return (
+      feed &&
+      feed.feed &&
+      feed.feed.createdAt && (
+        <ModalFeed
+          key={getDate(feed.feed.createdAt).toISOString()}
+          content={feed.feed.content}
+          feedinfo={feed}
+          createdAt={getDate(feed.feed.createdAt).toISOString()}
+          feedSize={'30rem'}
+        />
+      )
+    );
   };
-  return <CommonModal textChildren={valuecheck()} imageChildren={<></>} />;
+  return (
+    <CommonModal
+      isOpen={isOpen}
+      textChildren={valuecheck()}
+      imageChildren={<></>}
+      closeModal={closeModal}
+    />
+  );
 };
 
 export default DetailFeed;
diff --git a/client/src/composition/Feed/feed.query.tsx b/client/src/composition/Feed/feed.query.tsx
@@ -49,6 +49,52 @@ export const GET_FEEDS = gql`
   }
 `;
 
+export const GET_FEED = gql`
+  query getfeed($feedId: Int!) {
+    feed(feedId: $feedId) {
+      searchUser {
+        nickname
+        hometown
+        thumbnail
+        residence
+        email
+      }
+      feed {
+        createdAt {
+          year
+          month
+          day
+          hour
+          minute
+          second
+          nanosecond
+        }
+        content
+      }
+      feedId
+      totallikes
+      hasLiked
+      imglist {
+        url
+      }
+      comments {
+        createdAt {
+          year
+          month
+          day
+          hour
+          minute
+          second
+          nanosecond
+        }
+        content
+        nickname
+        thumbnail
+      }
+    }
+  }
+`;
+
 export const FEEDS_SUBSCRIPTION = gql`
   subscription subscribeFeed($userEmail: String!) {
     feeds(userEmail: $userEmail) {

diff --git a/client/src/composition/Header/AlarmTab/AlarmBox.tsx b/client/src/composition/Header/AlarmTab/AlarmBox.tsx
@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, Dispatch, SetStateAction } from 'react';
 import styled, { css } from 'styled-components';
 import Profile from 'components/Profile';
 import { Alarm, useChangeFeedAlarmReadStateMutation } from 'react-components.d';
 import CommonBox from '../CommonBox';
 import { GET_ALARMS } from './alarm.query';
+import DetailFeed from '../../DetailFeed';
 
 const cursor = css`
   cursor: pointer;
@@ -74,7 +75,15 @@ const getAppliedReadAlarms = (alarms: Alarm[], data: any) => {
   });
 };
 
-function AlamBox({ alarm }: { alarm: Alarm; isRead: boolean }) {
+interface Iprops {
+  alarm: Alarm;
+  setModalState: Dispatch<SetStateAction<IModalState>>;
+}
+interface IModalState {
+  isOpen: boolean;
+  feedId: number;
+}
+function AlamBox({ alarm, setModalState }: Iprops) {
   const [readState, setReadState] = useState(
     alarm && alarm.isRead ? alarm.isRead : false
   );
@@ -97,6 +106,11 @@ function AlamBox({ alarm }: { alarm: Alarm; isRead: boolean }) {
   const onClickFold = () => {
     setReadState(true);
     changeRedState({ variables: { feedId: Number(alarm.feedId) } });
+    ModalOn();
+  };
+
+  const ModalOn = () => {
+    setModalState({ isOpen: true, feedId: Number(alarm.feedId) });
   };
   return (
     <Container isRead={readState} onClick={onClickFold}>

diff --git a/client/src/composition/Header/AlarmTab/AlarmTabPresenter.tsx b/client/src/composition/Header/AlarmTab/AlarmTabPresenter.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import CommonHeader from '../CommonHeader';
 import CommonFooter from '../CommonFooter';
 import CommonBody from '../CommonBody';
-
+import DetailFeed from '../../DetailFeed';
 import AlamBox from './AlarmBox';
 import { useGetAlarmsQuery, Alarm, useMeQuery } from 'react-components.d';
 import { SUBSCRIBE_ALARMS } from './alarm.query';
@@ -43,7 +43,10 @@ function AlarmTabPresenter({ selected }: { selected: boolean }) {
   const { data, subscribeToMore } = useGetAlarmsQuery();
   const { data: myInfo } = useMeQuery();
   const headerTabCountDispatch = useHeaderTabCountDispatch();
-
+  const [modalState, setModalState] = useState({ isOpen: false, feedId: 0 });
+  const closeModal = () => {
+    setModalState({ isOpen: false, feedId: 0 });
+  };
   const subscribeToNewFeeds = () => {
     return subscribeToMore({
       document: SUBSCRIBE_ALARMS,
@@ -90,12 +93,26 @@ function AlarmTabPresenter({ selected }: { selected: boolean }) {
         {data &&
           data.alarms &&
           data.alarms.map((alarm: Alarm, idx) => {
-            return <AlamBox alarm={alarm} key={'alarm_' + idx} />;
+            return (
+              <AlamBox
+                alarm={alarm}
+                key={'alarm_' + idx}
+                setModalState={setModalState}
+              />
+            );
           })}
       </CommonBody>
       <Footer>
         <Text>모두 읽은 상태로 표시</Text>
       </Footer>
+
+      {modalState.isOpen && modalState.feedId > 0 && (
+        <DetailFeed
+          isOpen={modalState.isOpen}
+          feedId={modalState.feedId}
+          closeModal={closeModal}
+        />
+      )}
     </Container>
   );
 }

diff --git a/client/src/composition/Header/HeaderTab.tsx b/client/src/composition/Header/HeaderTab.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import { FaBell, FaUserFriends } from 'react-icons/fa';
 import { AiFillMessage } from 'react-icons/ai';
@@ -11,7 +11,7 @@ import {
   useHeaderTabDispatch
 } from 'stores/HeaderTabContext';
 import { HEADER_TAB } from '../../constants';
-import { useAlarmCountQuery, useAlarmCountLazyQuery } from 'react-components.d';
+import { useAlarmCountQuery } from 'react-components.d';
 import {
   useHeaderTabCountState,
   useHeaderTabCountDispatch

diff --git a/server/src/api/feed/feed.graphql b/server/src/api/feed/feed.graphql
@@ -77,7 +77,7 @@ type Query {
   feeds(first: Int, cursor: String): IFeeds
   alarms: [Alarm]
   alarmCount: Int!
-  feed(feedId: Int!): IFeed
+  feed(feedId: Int!): IFeed!
 }
 
 type Mutation {

diff --git a/server/src/api/feed/feed.resolvers.ts b/server/src/api/feed/feed.resolvers.ts
@@ -35,7 +35,8 @@ import {
   QueryFeedsArgs,
   MutationWriteCommentArgs,
   Alarm,
-  QueryFeedArgs
+  QueryFeedArgs,
+  IFeed
 } from '../../types';
 
 const DEFAUT_MAX_DATE = '9999-12-31T09:29:26.050Z';
@@ -281,7 +282,7 @@ const queryResolvers: QueryResolvers = {
 
     return Number(parsedAlarmCount.alarmCount);
   },
-  feed: async (_, { feedId }: QueryFeedArgs, { req }): Promise<any> => {
+  feed: async (_, { feedId }: QueryFeedArgs, { req }): Promise<IFeed> => {
     isAuthenticated(req);
     const userEmail = req.email;