prismagram-frontend

seung-juv · Jul 13, 2020 · 0c93b25 · 0c93b25
1 parent ec2b5e9
commit 0c93b25
Show file tree

Hide file tree

Showing 16 changed files with 150 additions and 45 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" type="image/x-icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Instagram clone with Express + Prisma + React and React Native" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>React App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +38,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/src/Components/Header.js b/src/Components/Header.js
@@ -1,11 +1,11 @@
 import React from "react";
 import styled from "styled-components";
 import { Link, withRouter } from "react-router-dom";
-import { gql } from "apollo-boost";
 import Input from "./Input";
 import useInput from "../Hooks/useInput";
-import { Compass, HeartEmpty, User, Logo } from "./Icons";
+import { Compass, HeartEmpty, User, Logo, Search } from "./Icons";
 import { useQuery } from "react-apollo-hooks";
+import { ME } from "../ShardQueries";
 
 const Header = styled.header`
   width: 100%;
@@ -43,10 +43,29 @@ const HeaderColumn = styled.div`
   }
 `;
 
+const SearchForm = styled.form`position: relative;`;
+
+const SearchIcon = styled.span`
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  svg {
+    margin-left: 55px;
+    opacity: .25;
+  }
+`;
+
 const SearchInput = styled(Input)`
   background-color: ${props => props.theme.bgColor};
   padding: 5px;
   font-size: 14px;
+  font-weight: 400;
   border-radius: 3px;
   height: auto;
   text-align: center;
@@ -55,6 +74,11 @@ const SearchInput = styled(Input)`
     opacity: 0.8;
     font-weight: 200;
   }
+  &:focus {
+    text-align: left;
+    font-weight: 500;
+    padding: 5px 10px 5px 26px;
+  }
 `;
 
 const HeaderLink = styled(Link)`
@@ -63,14 +87,6 @@ const HeaderLink = styled(Link)`
   }
 `;
 
-const ME = gql`
-  {
-    me {
-      username
-    }
-  }
-`;
-
 export default withRouter(({ history }) => {
   const search = useInput("");
   const { data, loading } = useQuery(ME);
@@ -87,9 +103,12 @@ export default withRouter(({ history }) => {
           </Link>
         </HeaderColumn>
         <HeaderColumn>
-          <form onSubmit={onSearchSubmit}>
-            <SearchInput value={search.value} onChange={search.onChange} placeholder="Search" />
-          </form>
+          <SearchForm onSubmit={onSearchSubmit}>
+            <SearchIcon>
+              <Search size={12} />
+            </SearchIcon>
+            <SearchInput value={search.value} onChange={search.onChange} placeholder="검색" />
+          </SearchForm>
         </HeaderColumn>
         <HeaderColumn>
           <HeaderLink to="/explore">

diff --git a/src/Components/Icons.js b/src/Components/Icons.js
diff --git a/src/Components/Post/PostContainer.js b/src/Components/Post/PostContainer.js
@@ -3,6 +3,7 @@ import useInput from "../../Hooks/useInput";
 import PostPresenter from "./PostPresenter";
 import { useMutation } from "react-apollo-hooks";
 import { TOGGLE_LIKE, ADD_COMMENT } from "./PostQueries";
+import { toast } from "react-toastify";
 
 const PostContainer = ({
   id,
@@ -17,6 +18,7 @@ const PostContainer = ({
 }) => {
   const [isLikedS, setIsLiked] = useState(isLiked);
   const [likeCountS, setLikeCount] = useState(likeCount);
+  const [selfComments, setSelfComments] = useState([]);
   const [toggleLikeMutation] = useMutation(TOGGLE_LIKE, {
     variables: { postId: id }
   });
@@ -36,11 +38,17 @@ const PostContainer = ({
     }
   };
 
-  const onKeyUp = e => {
-    const { keyCode } = e;
-    if (keyCode === 13) {
-      comment.setValue("");
-      addCommentMutation();
+  const onKeyPress = async(e) => {
+    const { which } = e;
+    if (which === 13) {
+      e.preventDefault();
+      try {
+        const { data: {addComment} } = await addCommentMutation();
+        setSelfComments([ ...selfComments, addComment ]);
+        comment.setValue("");
+      } catch {
+        toast.error("Can't send comment.");
+      }
     }
     return;
   };
@@ -59,7 +67,8 @@ const PostContainer = ({
       setIsLiked={setIsLiked}
       setLikeCount={setLikeCount}
       toggleLike={toggleLike}
-      onKeyUp={onKeyUp}
+      onKeyPress={onKeyPress}
+      selfComments={selfComments}
     />
   );
 };

diff --git a/src/Components/Post/PostPresenter.js b/src/Components/Post/PostPresenter.js
@@ -95,8 +95,9 @@ export default ({
   createdAt,
   newComment,
   toggleLike,
-  onKeyUp,
-  comments
+  onKeyPress,
+  comments,
+  selfComments
 }) =>
   <Post>
     <Header>
@@ -127,6 +128,12 @@ export default ({
               {comment.text}
             </Comment>
           )}
+          {selfComments.map(comment =>
+            <Comment key={comment.id}>
+              <FatText text={comment.user.username} />
+              {comment.text}
+            </Comment>
+          )}
         </Comments>}
       <Timestamp>
         {createdAt}
@@ -136,6 +143,6 @@ export default ({
       placeholder="댓글 달기..."
       value={newComment.value}
       onChange={newComment.onChange}
-      onKeyUp={onKeyUp}
+      onKeyPress={onKeyPress}
     />
   </Post>;
diff --git a/src/Components/Post/PostQueries.js b/src/Components/Post/PostQueries.js
@@ -11,6 +11,10 @@ export const ADD_COMMENT = gql`
     addComment(postId: $postId, text: $text) {
       id
       text
+      user {
+        id
+        username
+      }
     }
   }
 `;
diff --git a/src/Components/Routes.js b/src/Components/Routes.js
@@ -4,11 +4,12 @@ import Feed from "../Routes/Feed";
 import Auth from "../Routes/Auth";
 import Search from "../Routes/Search";
 import Profile from "../Routes/Profile";
+import Explore from "../Routes/Explore";
 
 const LoggedInRoutes = () =>
   <Switch>
     <Route exact path="/" component={Feed} />
-    <Route path="/explore" component={Profile} />
+    <Route path="/explore" component={Explore} />
     <Route path="/search" component={Search} />
     <Route path="/:username" component={Profile} />
   </Switch>;

diff --git a/src/Routes/Feed.js b/src/Routes/Feed.js
@@ -40,6 +40,7 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   min-height: 80vh;
 `;
 

diff --git a/src/Routes/Search.js b/src/Routes/Search.js
diff --git a/src/Routes/Search/SearchContainer.js b/src/Routes/Search/SearchContainer.js
@@ -0,0 +1,16 @@
+import React from "react";
+import { withRouter } from "react-router-dom";
+import SearchPresenter from "./SearchPresenter";
+import { useQuery } from "react-apollo-hooks";
+import { SEARCH } from "./SearchQueries";
+
+export default withRouter(({ location: { search } }) => {
+  const term = search.split("=")[1];
+  const { data, loading } = useQuery(SEARCH, {
+    skip: term === undefined,
+    variables: {
+      term
+    }
+  });
+  return <SearchPresenter searchTerm={term} loading={loading} data={data} />;
+});
diff --git a/src/Routes/Search/SearchPresenter.js b/src/Routes/Search/SearchPresenter.js
@@ -0,0 +1,15 @@
+import React from "react";
+import styled from "styled-components";
+import FatText from "../../Components/FatText";
+
+const Wrapper = styled.div`
+  height: 50vh;
+  text-align: center;
+`;
+
+const SearchPresenter = ({ searchTerm, loading }) =>
+  <Wrapper>
+    {searchTerm === undefined && <FatText text={"Search for something"} />}
+  </Wrapper>;
+
+export default SearchPresenter;
diff --git a/src/Routes/Search/SearchQueries.js b/src/Routes/Search/SearchQueries.js
@@ -0,0 +1,18 @@
+import { gql } from "apollo-boost";
+
+export const SEARCH = gql`
+  query search($term: String!) {
+    searchPost(term: $term) {
+      files {
+        url
+      }
+      likeCount
+    }
+    searchUser(term: $term) {
+      avatar
+      username
+      isFollowing
+      isSelf
+    }
+  }
+`;
diff --git a/src/Routes/Search/index.js b/src/Routes/Search/index.js
@@ -0,0 +1,2 @@
+import SearchContainer from "./SearchContainer";
+export default SearchContainer;
diff --git a/src/ShardQueries.js b/src/ShardQueries.js
@@ -0,0 +1,9 @@
+import { gql } from "apollo-boost";
+
+export const ME = gql`
+  {
+    me {
+      username
+    }
+  }
+`;
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,10 @@ export const ADD_COMMENT = gql` @@
         addComment(postId: $postId, text: $text) {
           id
           text
+          user {
+            id
+            username
+          }
         }
       }
     `;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import SearchContainer from "./SearchContainer";
		export default SearchContainer;