chakra/ui updates & post query added

humoyun · Oct 16, 2020 · d68d808 · d68d808
1 parent b2e60ef
commit d68d808
Show file tree

Hide file tree

Showing 14 changed files with 166 additions and 11,442 deletions.
diff --git a/next.config.js b/next.config.js
@@ -5,9 +5,9 @@ module.exports = {
       issuer: {
         test: /\.(js|ts)x?$/,
       },
-      use: ["@svgr/webpack"],
-    });
+      use: ['@svgr/webpack'],
+    })
 
-    return config;
+    return config
   },
-};
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,9 +9,7 @@
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
   },
   "dependencies": {
-    "@chakra-ui/core": "^1.0.0-rc.3",
-    "@emotion/core": "^10.0.27",
-    "@emotion/styled": "^10.0.27",
+    "@chakra-ui/core": "next",
     "@urql/exchange-graphcache": "^3.1.0",
     "draft-js": "^0.11.7",
     "emotion-theming": "^10.0.27",

diff --git a/src/components/Post.tsx b/src/components/Post.tsx
@@ -2,6 +2,8 @@ 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'
+import styled from '@emotion/styled'
+import { useRouter } from 'next/router'
 
 interface PostProps {
   data: PostData;
@@ -10,15 +12,39 @@ interface PostProps {
 export interface PostData {
   id: string;
   title: string;
-  text: string;
+  textSnippet: string;
   points: number;
 }
 
+const Flexbox = styled.div`
+  display: flex;
+  flex-direction: row;
+  min-height: 100px;
+  margin: 10px 0;
+  border: 1px solid lightgrey;
+  border-radius: 3px;
+  cursor: pointer;
+
+  &:hover {
+    border-color: black;
+  }
+`
+
+const Rightbox = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  align-items: center;
+  flex-direction: column;
+`
+
 export const Post = ({ data }: PostProps) => {
   const [vote, setVote] = useState(data.points)
-
+  const router = useRouter()
+
   const handlePostClick = () => {
     console.log('handlePostClick')
+    router.push(`/post/${data.id}`)
   }
 
   const handleVote = (e: React.SyntheticEvent, vote: string) => {
@@ -29,19 +55,7 @@ export const Post = ({ data }: PostProps) => {
   }
 
   return (
-    <Flex
-      flexDirection="row"
-      minH={100}
-      my={5}
-      border="1px"
-      borderRadius={3}
-      borderColor="lightgrey"
-      _hover={{
-        borderColor: 'black',
-      }}
-      cursor="pointer"
-      onClick={() => handlePostClick()}
-    >
+    <Flexbox onClick={() => handlePostClick()}>
       <Box
         w={10}
         p={1}
@@ -50,7 +64,7 @@ export const Post = ({ data }: PostProps) => {
         borderTopLeftRadius={2}
         borderBottomLeftRadius={2}
       >
-        <Flex alignItems="center" flexDirection="column" >
+        <Rightbox>
           <Upvote
             onClick={(e) => handleVote(e, 'up')}
             style={{ fill: 'red' }}
@@ -64,7 +78,7 @@ export const Post = ({ data }: PostProps) => {
             width={15}
             height={15}
           ></Downvote>
-        </Flex>
+        </Rightbox>
       </Box>
 
       <Flex
@@ -78,8 +92,8 @@ export const Post = ({ data }: PostProps) => {
         <Heading as="h4" size="sm">
           {data.title}
         </Heading>
-        <Box fontSize={14}>{data.text}</Box>
+        <Box fontSize={14}>{data.textSnippet}</Box>
       </Flex>
-    </Flex>
+    </Flexbox>
   )
 }
diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx
@@ -1,5 +1,5 @@
-import gql from 'graphql-tag';
-import * as Urql from 'urql';
+import gql from 'graphql-tag'
+import * as Urql from 'urql'
 export type Maybe<T> = T | null;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
@@ -48,6 +48,7 @@ export type Post = {
   creatorId: Scalars['Float'];
   createdAt: Scalars['String'];
   updatedAt: Scalars['String'];
+  textSnippet: Scalars['String'];
 };
 
 export type Mutation = {
@@ -255,6 +256,19 @@ export type MeQuery = (
   )> }
 );
 
+export type PostQueryVariables = Exact<{
+  id: Scalars['Int'];
+}>;
+
+
+export type PostQuery = (
+  { __typename?: 'Query' }
+  & { post?: Maybe<(
+    { __typename?: 'Post' }
+    & Pick<Post, 'id' | 'title' | 'text' | 'points' | 'creatorId' | 'createdAt' | 'updatedAt'>
+  )> }
+);
+
 export type PostsQueryVariables = Exact<{
   limit: Scalars['Int'];
   cursor?: Maybe<Scalars['String']>;
@@ -265,7 +279,7 @@ export type PostsQuery = (
   { __typename?: 'Query' }
   & { posts: Array<(
     { __typename?: 'Post' }
-    & Pick<Post, 'id' | 'title' | 'text' | 'points' | 'creatorId' | 'createdAt'>
+    & Pick<Post, 'id' | 'title' | 'textSnippet' | 'points' | 'creatorId' | 'createdAt'>
   )> }
 );
 
@@ -274,13 +288,13 @@ export const RegularErrorFragmentDoc = gql`
   field
   message
 }
-    `;
+    `
 export const RegularMemberFragmentDoc = gql`
     fragment RegularMember on Member {
   id
   username
 }
-    `;
+    `
 export const RegularMemberResponseFragmentDoc = gql`
     fragment RegularMemberResponse on UserResponse {
   errors {
@@ -291,18 +305,18 @@ export const RegularMemberResponseFragmentDoc = gql`
   }
 }
     ${RegularErrorFragmentDoc}
-${RegularMemberFragmentDoc}`;
+${RegularMemberFragmentDoc}`
 export const ChangePasswordDocument = gql`
     mutation ChangePassword($token: String!, $newPassword: String!) {
   changePassword(token: $token, newPassword: $newPassword) {
     ...RegularMemberResponse
   }
 }
-    ${RegularMemberResponseFragmentDoc}`;
+    ${RegularMemberResponseFragmentDoc}`
 
 export function useChangePasswordMutation() {
-  return Urql.useMutation<ChangePasswordMutation, ChangePasswordMutationVariables>(ChangePasswordDocument);
-};
+  return Urql.useMutation<ChangePasswordMutation, ChangePasswordMutationVariables>(ChangePasswordDocument)
+}
 export const CreatePostDocument = gql`
     mutation CreatePost($input: PostInput!) {
   createPost(input: $input) {
@@ -315,20 +329,21 @@ export const CreatePostDocument = gql`
     updatedAt
   }
 }
-    `;
+    `
 
 export function useCreatePostMutation() {
-  return Urql.useMutation<CreatePostMutation, CreatePostMutationVariables>(CreatePostDocument);
-};
+  return Urql.useMutation<CreatePostMutation, CreatePostMutationVariables>(CreatePostDocument)
+}
 export const ForgotPasswordDocument = gql`
     mutation ForgotPassword($email: String!) {
   forgotPassword(email: $email)
 }
-    `;
+    `
 
 export function useForgotPasswordMutation() {
-  return Urql.useMutation<ForgotPasswordMutation, ForgotPasswordMutationVariables>(ForgotPasswordDocument);
-};
+  return Urql.useMutation<ForgotPasswordMutation, ForgotPasswordMutationVariables>(ForgotPasswordDocument)
+}
+
 export const LoginDocument = gql`
     mutation Login($usernameOrEmail: String!, $password: String!) {
   login(usernameOrEmail: $usernameOrEmail, password: $password) {
@@ -341,20 +356,20 @@ export const LoginDocument = gql`
     }
   }
 }
-    ${RegularMemberFragmentDoc}`;
+    ${RegularMemberFragmentDoc}`
 
 export function useLoginMutation() {
-  return Urql.useMutation<LoginMutation, LoginMutationVariables>(LoginDocument);
-};
-export const LogoutDocument = gql`
-    mutation Logout {
-  logout
+  return Urql.useMutation<LoginMutation, LoginMutationVariables>(LoginDocument)
 }
-    `;
+export const LogoutDocument = gql`
+  mutation Logout {
+    logout
+  }
+`
 
 export function useLogoutMutation() {
-  return Urql.useMutation<LogoutMutation, LogoutMutationVariables>(LogoutDocument);
-};
+  return Urql.useMutation<LogoutMutation, LogoutMutationVariables>(LogoutDocument)
+}
 export const RegisterDocument = gql`
     mutation Register($options: UserInput!) {
   register(args: $options) {
@@ -367,51 +382,69 @@ export const RegisterDocument = gql`
     }
   }
 }
-    ${RegularMemberFragmentDoc}`;
+    ${RegularMemberFragmentDoc}`
 
 export function useRegisterMutation() {
-  return Urql.useMutation<RegisterMutation, RegisterMutationVariables>(RegisterDocument);
-};
+  return Urql.useMutation<RegisterMutation, RegisterMutationVariables>(RegisterDocument)
+}
+
 export const UpdatePostDocument = gql`
-    mutation UpdatePost($id: Float!, $title: String!, $text: String!) {
-  updatePost(id: $id, title: $title, text: $text) {
+  mutation UpdatePost($id: Float!, $title: String!, $text: String!) {
+    updatePost(id: $id, title: $title, text: $text) {
     id
     title
     text
     points
     creatorId
     createdAt
+    }
   }
-}
-    `;
+`
 
 export function useUpdatePostMutation() {
-  return Urql.useMutation<UpdatePostMutation, UpdatePostMutationVariables>(UpdatePostDocument);
-};
+  return Urql.useMutation<UpdatePostMutation, UpdatePostMutationVariables>(UpdatePostDocument)
+}
 export const MeDocument = gql`
     query Me {
   me {
     ...RegularMember
   }
 }
-    ${RegularMemberFragmentDoc}`;
+    ${RegularMemberFragmentDoc}`
 
 export function useMeQuery(options: Omit<Urql.UseQueryArgs<MeQueryVariables>, 'query'> = {}) {
-  return Urql.useQuery<MeQuery>({ query: MeDocument, ...options });
-};
-export const PostsDocument = gql`
-    query Posts($limit: Int!, $cursor: String) {
-  posts(limit: $limit, cursor: $cursor) {
-    id
-    title
-    text
-    points
-    creatorId
-    createdAt
+  return Urql.useQuery<MeQuery>({ query: MeDocument, ...options })
+}
+export const PostDocument = gql`
+  query Post($id: Int!) {
+    post(id: $id) {
+      id
+      title
+      text
+      points
+      creatorId
+      createdAt
+      updatedAt
+    }
   }
+`
+
+export function usePostQuery(options: Omit<Urql.UseQueryArgs<PostQueryVariables>, 'query'> = {}) {
+  return Urql.useQuery<PostQuery>({ query: PostDocument, ...options })
 }
-    `;
+export const PostsDocument = gql`
+  query Posts($limit: Int!, $cursor: String) {
+    posts(limit: $limit, cursor: $cursor) {
+      id
+      title
+      textSnippet
+      points
+      creatorId
+      createdAt
+    }
+  }
+`
 
 export function usePostsQuery(options: Omit<Urql.UseQueryArgs<PostsQueryVariables>, 'query'> = {}) {
-  return Urql.useQuery<PostsQuery>({ query: PostsDocument, ...options });
-};
+  return Urql.useQuery<PostsQuery>({ query: PostsDocument, ...options })
+}
diff --git a/src/graphql/queries/post.graphql b/src/graphql/queries/post.graphql
@@ -0,0 +1,11 @@
+query Post($id: Int!) {
+  post(id: $id) {
+    id
+    title
+    text
+    points
+    creatorId
+    createdAt
+    updatedAt
+  }
+}
diff --git a/src/graphql/queries/posts.graphql b/src/graphql/queries/posts.graphql
@@ -2,7 +2,7 @@ query Posts($limit: Int!, $cursor: String) {
   posts(limit: $limit, cursor: $cursor) {
     id
     title
-    text
+    textSnippet
     points
     creatorId
     createdAt