Forward

components/GHub/UserCard.stories.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import UserCard, { UserCardProps } from './UserCard';
 import { Story, Meta } from '@storybook/react';
-import { GHUser } from '../../models';
 import { withTranslation } from 'react-i18next';
 
 export default {

components/GHub/UserCard.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useReducer } from 'react';
 import Card from '@material-ui/core/Card';
 import CardActionArea from '@material-ui/core/CardActionArea';
 import CardActions from '@material-ui/core/CardActions';
@@ -17,41 +17,46 @@ export interface UserCardProps extends WithTranslation {
   username: string;
 }
 
+interface State {
+  user?: GHUser | null;
+  error?: Error | null;
+}
+
 const UserCard: React.FC<UserCardProps> = ({ t, username }: UserCardProps) => {
   const UserCardService = new UserCardServices();
-  const [user, setUser] = useState(new GHUser());
-  const [error, setError] = useState(null);
+  const [state, setState] = useReducer((state: State, newState: State) => ({ ...state, ...newState }), {
+    error: null,
+    user: null,
+  });
 
   useEffect(() => {
-    UserCardService.getGithubUserByUsername(username).then(setUser).catch(setError);
+    UserCardService.getGithubUserByUsername(username)
+      .then(user => setState({ user, error: null }))
+      .catch(error => setState({ user: null, error }));
   }, [username]);
 
   return (
     <Card css={styles.Root}>
       <CardActionArea>
-        {user.id ? <CardMedia css={styles.Media} image={user.avatar_url} title={user.name} /> : null}
+        {state.user?.id ? <CardMedia css={styles.Media} image={state.user.avatar_url} title={state.user.name} /> : null}
         <CardContent>
-          {user.id ? (
+          {!state.error && state.user?.id ? (
             <>
               <Typography gutterBottom variant='h5' component='h2'>
-                {user.name}
+                {state.user.name}
               </Typography>
               <Typography variant='body2' color='textSecondary' component='p'>
-                {user.location}
+                {state.user.location}
               </Typography>
             </>
-          ) : error ? (
-            <Box textAlign='center'>{error.message}</Box>
           ) : (
-            <Box textAlign='center'>
-              <CircularProgress />
-            </Box>
+            <Box textAlign='center'>{state.error?.message || <CircularProgress />}</Box>
           )}
         </CardContent>
       </CardActionArea>
-      {user.id ? (
+      {state.user?.id ? (
         <CardActions>
-          <Button target='_blank' href={user.html_url} size='small' color='primary'>
+          <Button target='_blank' href={state.user.html_url} size='small' color='primary'>
             {t('go_to_github')}
           </Button>
         </CardActions>

components/Layouts/base.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from 'react';
+import { NextPage } from 'next';
+import Snackbar from '@material-ui/core/Snackbar';
+import { connect } from 'react-redux';
+
+import { clearError, ErrorState, AuthState, authUser, AuthUserSignature } from '../../reducers';
+import { Router } from '../../i18n';
+import { Dispatch } from 'redux';
+
+interface Props {
+  children?: React.ReactNode;
+  error?: ErrorState;
+  auth?: AuthState;
+  onClearErrors: () => void;
+  onAuthUser: (payload: { email: string; password: string }) => void;
+}
+
+const BaseLayout: NextPage<Props> = ({ error, auth, children, onClearErrors, onAuthUser }: Props) => {
+  useEffect(() => {
+    console.log(auth);
+    const credentials = localStorage.getItem('stored_credentials');
+    if (!auth?.user.id && credentials) {
+      onAuthUser(JSON.parse(credentials));
+    } else if (!auth?.user.id && Router.asPath.indexOf('/auth') < 0) {
+      Router.push('/auth');
+    } else if (auth?.user.id && Router.asPath.indexOf('/auth') >= 0) {
+      Router.push('/');
+    }
+  }, [auth]);
+
+  return (
+    <div className='wrapper'>
+      <Snackbar
+        open={Boolean(error)}
+        message={error ? (error as Error).message : ''}
+        autoHideDuration={1500}
+        onClose={(_, reason) => (reason === 'timeout' ? onClearErrors() : null)}
+      />
+      {process.browser ? (auth?.user.id || Router.asPath.indexOf('/auth') > -1 ? children : null) : null}
+    </div>
+  );
+};
+
+function mapStateToProps(state: any) {
+  return {
+    error: state.get('error'),
+    auth: state.get('auth'),
+  };
+}
+
+function mapDispatchToProps(dispatch: Dispatch) {
+  return {
+    onAuthUser: (payload: AuthUserSignature) => dispatch(authUser(payload)),
+    onClearErrors: () => dispatch(clearError()),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(BaseLayout);

components/Layouts/index.tsx

@@ -1,3 +1,3 @@
-import base from './default';
+import base from './base';
 
 export default base;

components/styling.tsx

@@ -35,13 +35,13 @@ export const Colors = {
   'blue-900': '#1551aa',
 };
 
-export const rem = (...args: string[]) => {
-  const output: any = [];
+export const rem = (...args: string[]): string => {
+  const output: string[] = [];
   const base = 16;
   const power = process.browser && IsMobile() ? 0.9 : 1;
 
   args.map((_, idx) => {
-    const innerOutput: any = [];
+    const innerOutput: string[] = [];
     const innerArgs = args[idx].split(' ');
     innerArgs.map((_, innerIdx) => {
       innerOutput.push((power / base) * parseInt(innerArgs[innerIdx].split('px')[0]) + 'rem');

imports.ts

@@ -1,6 +1,6 @@
-export {};
+import { NEXT_DATA } from 'next/dist/next-server/lib/utils';
 declare global {
   interface Window {
-    __NEXT_DATA__: any | null;
+    __NEXT_DATA__: NEXT_DATA | null;
   }
 }