CreatePost comp adde3d

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  "eslint.options": {
+    "configFile": ".eslintrc"
+  },
+  "eslint.probe": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "html",
+    "markdown"
+  ],
+  "vetur.validation.template": false
+}

src/components/BodyWrapper.tsx

@@ -14,11 +14,11 @@ export const BodyWrapper: React.FC<WrapperProps> = ({
       mt={5}
       p={3}
       mx="auto"
-      maxW={variant === "regular" ? "800px" : "400px"}
+      maxW={variant === 'regular' ? '800px' : '400px'}
       w="70%"
       h="100%-50px"
     >
       {children}
     </Box>
-  );
+  )
 }

src/components/CreatePost.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Flex, Box, Input, Avatar } from '@chakra-ui/core'
+// import PropTypes from 'prop-types'
+import Link from '../icons/link.svg'
+import Media from '../icons/media.svg'
+
+export const CreatePost = (props: any) => {
+
+  const handleClick = (e: React.SyntheticEvent, type: string) => {
+    console.log('handleClick' , type)
+  }
+
+  return (
+    <Flex alignItems="center" justifyContent="space-between" p={3} bg="#fff" w="100%" my={5} flexDirection="row">
+      <Avatar mr={3} size="sm" name="Ryan Florence" src="https://bit.ly/ryan-florence"></Avatar>
+      <Input size='sm'></Input>
+      <Flex ml={2} w={60} justifyContent="space-around">
+        <Media
+          onClick={(e) => handleClick(e, 'up')}
+          style={{ fill: '#ccc' }}
+          width={20}
+          height={20}
+        ></Media>
+        <Link
+          onClick={(e) => handleClick(e, 'up')}
+          style={{ fill: '#ccc' }}
+          width={20}
+          height={20}
+        ></Link>
+      </Flex>
+    </Flex>
+  )
+}
+

src/components/Layout.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { NavBar } from './NavBar'
-import { BodyWrapper } from "./BodyWrapper";
+import { BodyWrapper } from './BodyWrapper'
 import { Box } from '@chakra-ui/core'
 
 interface LayoutProps { 
@@ -10,11 +10,11 @@ interface LayoutProps {
 
 const Layout: React.FC<LayoutProps> = ({ children, variant })=> {
   return (
-    <Box className="reddir-app" bg="#f4f5f7" w="100%" h="100vh">
+    <Box className="reddir-app" bg="#f4f5f7" w="100%" h="100%">
       <NavBar></NavBar>
       <BodyWrapper variant={variant}>{children}</BodyWrapper>
     </Box>
-  );
+  )
 }
 
-export default Layout;
+export default Layout

src/components/MediaUpload.tsx

@@ -12,13 +12,13 @@ const MediaUpload = (props: MediaUploadProps) => {
   return (
     <Box>
       <input
-        style={{ display: "none" }}
+        style={{ display: 'none' }}
         type="file"
         encType="multipart/form-data"
         {...props}
       />
     </Box>
-  );
+  )
 }
 
-export default MediaUpload;
+export default MediaUpload

src/components/NavBar.tsx

@@ -5,6 +5,7 @@ import { useMeQuery, useLogoutMutation } from '../generated/graphql'
 
 
 export interface NavBarProps {
+  dummy?: string
 } 
 
 export const NavBar: React.FC<NavBarProps> = ({ }) => {
@@ -34,7 +35,7 @@ export const NavBar: React.FC<NavBarProps> = ({ }) => {
           </Button>
         </NextLink>
       </>
-    );
+    )
   } else { 
     body = (
       <Flex alignItems="center">
@@ -61,7 +62,7 @@ export const NavBar: React.FC<NavBarProps> = ({ }) => {
       position="sticky"
       top={0}
     >
-      <Box ml={"auto"}>{body}</Box>
+      <Box ml={'auto'}>{body}</Box>
     </Flex>
-  );
+  )
 }

src/components/Post.tsx

@@ -1,19 +1,30 @@
-import React from 'react'
-import { Flex, Box, Heading, PseudoBox } from "@chakra-ui/core";
-import Downvote from "../icons/down-arrow.svg";
-import Upvote from "../icons/up-arrow.svg";
+import React, { useState } from 'react'
+import { Flex, Box, Heading } from '@chakra-ui/core'
+import Downvote from '../icons/down-arrow.svg'
+import Upvote from '../icons/up-arrow.svg'
 
-interface PostProps { 
-  data: Object
+interface PostProps {
+  data: PostData;
 }
 
-const Post = ({ data }) => {
-  const handlePostClick = () => { 
-    console.log("handlePostClick");
+export interface PostData {
+  id: string;
+  title: string;
+  content: string;
+  vote: number;
+}
+
+export const Post = ({ data }: PostProps) => {
+  const [vote, setVote] = useState(data.vote)
+  const handlePostClick = () => {
+    console.log('handlePostClick')
   }
-  const handleVote = (e: React.SyntheticEvent, vote: string) => { 
+
+  const handleVote = (e: React.SyntheticEvent, vote: string) => {
     e.stopPropagation()
-    console.log("vote for post ", vote);
+    if (vote === 'up') setVote((v) => v + 1)
+    else setVote((v) => v - 1)
+    console.log('vote for post ', vote)
   }
 
   return (
@@ -25,7 +36,7 @@ const Post = ({ data }) => {
       borderRadius={3}
       borderColor="lightgrey"
       _hover={{
-        borderColor: "black",
+        borderColor: 'black',
       }}
       cursor="pointer"
       onClick={() => handlePostClick()}
@@ -38,19 +49,21 @@ const Post = ({ data }) => {
         borderTopLeftRadius={2}
         borderBottomLeftRadius={2}
       >
-        <Upvote
-          onClick={(e) => handleVote(e, "up")}
-          style={{ fill: "red" }}
-          width={18}
-          height={18}
-        ></Upvote>
-        <Box>123</Box>
-        <Downvote
-          onClick={(e) => handleVote(e, "down")}
-          style={{ fill: "#455A64" }}
-          width={18}
-          height={18}
-        ></Downvote>
+        <Flex alignItems="center" flexDirection="column" >
+          <Upvote
+            onClick={(e) => handleVote(e, 'up')}
+            style={{ fill: 'red' }}
+            width={15}
+            height={15}
+          ></Upvote>
+          <Box userSelect="none">{vote}</Box>
+          <Downvote
+            onClick={(e) => handleVote(e, 'down')}
+            style={{ fill: '#455A64' }}
+            width={15}
+            height={15}
+          ></Downvote>
+        </Flex>
       </Box>
 
       <Flex
@@ -67,7 +80,5 @@ const Post = ({ data }) => {
         <Box fontSize={14}>{data.content}</Box>
       </Flex>
     </Flex>
-  );
-};
-
-export default Post;
+  )
+}

src/pages/login.tsx

@@ -8,7 +8,7 @@ import {
   Box,
   Button,
 } from '@chakra-ui/core'
-import { BodyWrapper } from "../components/BodyWrapper";
+import { BodyWrapper } from '../components/BodyWrapper'
 import { InputField } from '../components/InputField'
 import { useMutation } from 'urql'
 import { useRouter } from 'next/router'
@@ -17,7 +17,7 @@ import { toErrorMap } from '../utils/errorMapper'
 import { withUrqlClient } from 'next-urql'
 import { createUrqlClient } from '../utils/createUrqlCLient'
 
-interface loginProps {}
+// interface loginProps {}
 
 const Login: React.FC<loginProps> = ({}) => {
   const [, login] = useLoginMutation()
@@ -26,14 +26,14 @@ const Login: React.FC<loginProps> = ({}) => {
   return (
     <BodyWrapper variant="small">
       <Formik
-        initialValues={{ usernameOrEmail: "", password: "" }}
+        initialValues={{ usernameOrEmail: '', password: '' }}
         onSubmit={async (values, { setErrors }) => {
-          console.log("values ", values);
-          const resp = await login(values);
+          console.log('values ', values)
+          const resp = await login(values)
           if (resp.data?.login.errors) {
-            setErrors(toErrorMap(resp.data?.login.errors));
+            setErrors(toErrorMap(resp.data?.login.errors))
           } else if (resp.data?.login.member) {
-            router.push("/");
+            router.push('/')
           }
         }}
       >
@@ -64,7 +64,7 @@ const Login: React.FC<loginProps> = ({}) => {
         )}
       </Formik>
     </BodyWrapper>
-  );
+  )
 }
 
 export default withUrqlClient(createUrqlClient)(Login)

src/pages/register.tsx

@@ -1,26 +1,21 @@
 import React from 'react'
 import { Formik, Form } from 'formik'
 import {
-  FormControl,
-  FormLabel,
-  Input,
-  FormErrorMessage,
   Box,
   Button,
 } from '@chakra-ui/core'
 import { Wrapper } from '../components/BodyWrapper'
 import { InputField } from '../components/InputField'
-import { useMutation } from 'urql'
 import { useRouter } from 'next/router'
 import { useRegisterMutation } from '../generated/graphql'
 import { toErrorMap } from '../utils/errorMapper'
 import { withUrqlClient } from 'next-urql'
 import { createUrqlClient } from '../utils/createUrqlCLient'
 
-interface registerProps {}
+// interface registerProps {}
 
 const Register: React.FC<registerProps> = ({ }) => {
-  const router = useRouter();
+  const router = useRouter()
   const [, register] = useRegisterMutation()
 
   return (