Merge branch 'dev' of github.com:humoyun/reddix-web into dev

src/components/InputField.tsx

@@ -1,4 +1,4 @@
-import React, { InputHTMLAttributes } from 'react'
+import React, { InputHTMLAttributes, useEffect, useState } from 'react'
 import { useField } from 'formik'
 import {
   FormControl,
@@ -25,18 +25,22 @@ export const InputField: React.FC<InputFieldProps> = ({
   ...props
 }) => {
   const [field, { error }] = useField(props)
+
   // let C = Input
   // if (textarea) {
   //   C = Textarea 
   // }
+  useEffect(() => {
+    console.log('error', error)
+  }, [error])
 
   return (
     <FormControl isInvalid={!!error}>
       {/* <FormLabel htmlFor={field.name}>{label}</FormLabel> */}
 
       {textarea ? 
         (<Textarea {...field} id={field.name} color="#3a3a3a" />) : 
-        (<Input {...field} {...props} id={field.name} color="#3a3a3a" />)
+        (<Input {...field} {...props} id={field.name} color="#3a3a3a"  />)
       }
 
       {error ? <FormErrorMessage>{error}</FormErrorMessage> : null}

src/components/NavBar.tsx

@@ -1,15 +1,15 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Box, Flex, Button, Heading, Stack, Tooltip, AvatarBadge, Avatar } from '@chakra-ui/core'
 import styled from '@emotion/styled'
 import NextLink from 'next/link'
-import { useMeQuery, useLogoutMutation } from '../generated/graphql'
+import { useLogoutMutation } from '../generated/graphql'
 import { useRouter } from 'next/router'
 import DarkMode from '@/icons/sun.svg'
 // import New from '../icons/new.svg'
 // import Rise from '../icons/rise.svg'
 import Rocket from '@/icons/rocket.svg'
 import AllPosts from '@/icons/all-chart.svg'
-
+import UserContext from '@/utils/userContext'
 
 const IconBox = styled.span`
   display: inline-flex;
@@ -28,37 +28,39 @@ export interface NavBarProps {
   dummy?: string
 } 
 
-export const NavBar: React.FC<NavBarProps> = ({ }) => {
-  const [{ data, fetching }] = useMeQuery({
-    pause: typeof window === 'undefined' || typeof window === undefined
-  })
+export const Navbar: React.FC<NavBarProps> = ({ }) => {
+  const {user, fetching} = useContext(UserContext)
+
   const router = useRouter()
   const [{ fetching: logoutFetching }, logout] = useLogoutMutation()
-  let body = null
-  console.log('fetching : ', fetching)
-  console.log('data me : ', data)
+  let securePart = null
+
+  console.log(' user :; :: ', user)
+  console.log(' fetching :; :: ', fetching)
 
   const goHome = () => {
     router.push('/')
   }
 
-  if (!data?.me) {
-    body = (
+  if (!user?.me) {
+    securePart = (
       <Flex minW={100}>
         <NextLink href="/auth/login">
-          <Button mr={3} size="sm" variant="outline">
+          <Button
+            isLoading={fetching}
+            mr={3} size="xs" variant="outline">
             Login
           </Button>
         </NextLink>
       </Flex>
     )
   } else { 
-    body = (
+    securePart = (
       <Flex alignItems="center">
         <Avatar size="sm" name="Humoyun Ahmad" src="https://bit.ly/ryan-florence">
           <AvatarBadge  boxSize="1.25em" bg="green.500" />
         </Avatar>
-        <Box mr={5} px={2}>{data.me.username}</Box>
+        <Box mr={5} px={2}>{user.username}</Box>
         <Button
           size="xs"
           isLoading={logoutFetching}
@@ -132,7 +134,7 @@ export const NavBar: React.FC<NavBarProps> = ({ }) => {
       </Flex>
 
       <Flex justifyContent="flex-end" flex={1} mr={5}>
-        {body}
+        { securePart }
       </Flex>
     </Flex>
   )

src/components/PostLoading.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 export function PostLoading() {
   return (
-  <Box padding="3" boxShadow="lg" bg="white">
+    <Box padding="3" boxShadow="lg" bg="white" my={4}>
     <Flex flexDirection="row" alignItems="center">
       <Box width={50}>
         <SkeletonCircle size="5" />

src/layouts/AppLayout.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { NavBar } from '../components/NavBar'
+import { Navbar } from '@/components/Navbar'
 import { BodyWrapper } from '../components/BodyWrapper'
 import { Box } from '@chakra-ui/core'
 
@@ -11,7 +11,7 @@ interface LayoutProps {
 const Layout: React.FC<LayoutProps> = ({ children, variant })=> {
   return (
     <Box className="reddix-app" bg="#f4f5f7" w="100%" h="100%" minH="100vh">
-      <NavBar></NavBar>
+      <Navbar></Navbar>
       <BodyWrapper variant={variant}>{children}</BodyWrapper>
     </Box>
   )

src/pages/_app.tsx

@@ -1,39 +1,88 @@
 import { ChakraProvider, CSSReset } from '@chakra-ui/core'
 
-import theme from '@/theme'
+import Theme from '@/theme'
 import AppLayout from '@/layouts/AppLayout'
 import AuthLayout from '@/layouts/AuthLayout'
 import { withUrqlClient } from 'next-urql'
 import { createUrqlClient } from '@/utils/createUrqlClient'
 import { useRouter } from 'next/router'
 
-const MyApp = ({ Component, pageProps }) => {
-
-  const router = useRouter()
+import UserContext from '@/utils/userContext'
+import { useEffect, useState } from 'react'
+import { useMeQuery } from '@/generated/graphql'
 
 
+/**
+ * 
+ * https://reacttricks.com/sharing-global-data-in-next-with-custom-app-and-usecontext-hook
+ * 
+ * https://reacttricks.com/nested-dynamic-layouts-in-next-apps
+ * 
+ * https://reacttricks.com/learn-react-by-building-websites-with-next
+ * 
+ */
+const ReddixApp = ({ Component, pageProps }) => {
+  const [{ data, fetching }] = useMeQuery({
+    pause: typeof window === 'undefined' || typeof window === undefined
+  })
+  const router = useRouter()
+
+  // emulate net delay for getting user data
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     setState({ id: 'some-iuser-id', username: 'Some Username' })
+  //   }, 200)
+  // }, [])
 
   return (
-    <ChakraProvider theme={theme}>
-      {/* <ColorModeProvider> */}
-      <CSSReset />
-
-      {router.pathname.startsWith('/auth/')
-        ? 
-          <AuthLayout>
-            <Component {...pageProps} />
-          </AuthLayout>
-          : 
-          <AppLayout>
-            <Component {...pageProps} />
-          </AppLayout>
-        }
-
-
-      {/* </ColorModeProvider> */}
-    </ChakraProvider>
+    <UserContext.Provider
+      value={{
+        user: data,
+        fetching: fetching
+      }}>
+      <ChakraProvider theme={Theme}>
+        {/* <ColorModeProvider> */}
+        <CSSReset />
+
+        {router.pathname.startsWith('/auth/')
+          ? 
+            <AuthLayout>
+              <Component {...pageProps} />
+            </AuthLayout>
+            : 
+            <AppLayout>
+              <Component {...pageProps} />
+            </AppLayout>
+          }
+        {/* </ColorModeProvider> */}
+      </ChakraProvider>
+    </UserContext.Provider>
   )
 }
 
-export default withUrqlClient(createUrqlClient)(MyApp)
-// export default MyApp;
+/**
+ * 
+ * Next.js uses the App component to initialize pages. You can override it and control the page initialization. 
+ * Which allows you to do amazing things like:
+   - Persisting layout between page changes
+   - Keeping state when navigating pages
+   - Custom error handling using componentDidCatch
+   - Inject additional data into pages
+   - Add global CSS
+ * 
+ */
+
+// Only uncomment this method if you have blocking data requirements for
+// every single page in your application. This disables the ability to
+// perform automatic static optimization, causing every page in your app to
+// be server-side rendered.
+//
+// ReddixApp.getInitialProps = async (appContext) => {
+//   // calls page's `getInitialProps` and fills `appProps.pageProps`
+//   const appProps = await App.getInitialProps(appContext);
+//
+//   return { ...appProps }
+// }
+
+
+export default withUrqlClient(createUrqlClient)(ReddixApp)

src/pages/auth/login.tsx

@@ -4,6 +4,7 @@ import {
   Box,
   Button,
   Flex,
+  Center,
   Heading,
   Link,
   Text
@@ -29,9 +30,15 @@ const Login: React.FC<loginProps> = ({}) => {
   const router = useRouter()
 
   return (
-    <Flex flexDirection="column" width={350} bg="#fff" borderRadius={4} padding={4}> 
-      <Flex justifyContent="center" alignItems="center" mb={10}>
-        <Heading as="h2"  fontWeight="normal">
+    <Flex flexDirection="column" width={350} bg="#fff" borderRadius={4} padding={4}>
+
+      <Center mb={4}>
+        <img src="/reddix-logo.png" style={{ width: 75, height: 75, cursor: 'pointer' }} />
+      </Center>
+
+
+      <Flex justifyContent="center" alignItems="center" mb={6}>
+        <Heading as="h2" size="lg">
           Login
         </Heading>
       </Flex>
@@ -96,7 +103,7 @@ const Login: React.FC<loginProps> = ({}) => {
                 Login
               </Button>
 
-              <Text fontSize="md" color="gray.500" mt={4}>
+              <Text fontSize="sm" color="gray.500" mt={4}>
                 New to Reddix? {' '}
                 <Link color="teal.900" href="/auth/register">
                   Register

src/pages/index.tsx

@@ -15,7 +15,7 @@ const Index = () => {
   const [{ data, fetching }] = usePostsQuery({ variables })
 
   const loadMore = () => {
-    console.log('*** loadMore ***')
+
     const len =  data.posts.posts.length - 1
     const cursor: NS = data.posts.posts[len].createdAt
     setVariables({ limit: variables.limit, cursor })
@@ -24,7 +24,8 @@ const Index = () => {
   return (
     <Box>
       <PostInput></PostInput>
-      <PostLoading></PostLoading>
+      {fetching && [1, 2, 3, 4, 5].map(num => <PostLoading key={num}></PostLoading>)}
+
 
       <Box>
       {!data ?
@@ -59,6 +60,7 @@ const Index = () => {
   )
 }
 
+
 /**
  *  Unless the component that is being wrapped already has a `getInitialProps` method, 
  * next-urql won't add its own SSR logic (which automatically fetches queries during 

src/theme.tsx

@@ -7,7 +7,7 @@ const fonts = { ...chakraTheme.fonts, mono: '\'Menlo\', monospace' }
 
 const breakpoints = ['40em', '52em', '64em']
 
-const theme = {
+const Theme = {
   ...chakraTheme,
   colors: {
     ...chakraTheme.colors,
@@ -38,4 +38,4 @@ const theme = {
   },
 }
 
-export default theme
+export default Theme

src/utils/userContext.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+
+// const initUserData = {
+//   id: null,
+//   username: ''
+// }
+
+const UserContext = createContext()
+
+export default UserContext