Refactor some stuff to get it running

freeCodeCamp · Zeko369 · Aug 2, 2020 · Aug 2, 2020 · Aug 2, 2020 · Aug 2, 2020
commit 9e9555b9560f200bec753a5302b8219945e1ddce
diff --git a/client/components/PageLayout/Header.tsx b/client/components/PageLayout/Header.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Link from 'next/link';
 import { makeStyles, Grid } from '@material-ui/core';
 
-import { headerLinks } from 'client/constants/Header';
+import { headerLinks } from '../../constants/Header';
 
 const useStyles = makeStyles({
   link: {
@@ -14,7 +14,7 @@ const useStyles = makeStyles({
   },
 });
 
-const Header = ({ classes }) => {
+const Header: React.FC<{ classes: Record<string, any> }> = ({ classes }) => {
   const styles = useStyles();
 
   return (

diff --git a/client/components/PageLayout/index.tsx b/client/components/PageLayout/index.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import Header from './Header';
 import usePageLayoutStyles from './pageLayout.styles';
 
-const PageLayout = ({ children }) => {
+const PageLayout: React.FC = ({ children }) => {
   const classes = usePageLayoutStyles();
   return (
     <>

diff --git a/client/modules/home.tsx b/client/modules/home.tsx
@@ -1,44 +1,42 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import Link from 'next/link';
 import { Card, Typography, Grid } from '@material-ui/core';
-import { useSelector } from 'react-redux';
-import { SomeComponent, ProgressCardContent } from 'client/components';
-import { AppStoreState } from 'client/store/reducers';
-import { chapterActions } from 'client/store/actions';
-import useThunkDispatch from 'client/hooks/useThunkDispatch';
+// import { useSelector } from 'react-redux';
+import { SomeComponent, ProgressCardContent } from '../components';
+// import { AppStoreState } from '../store/reducers';
+// import { chapterActions } from '../store/actions';
+// import useThunkDispatch from '../hooks/useThunkDispatch';
 
 const Home: React.FC = () => {
-  const { error, loading, name, description } = useSelector(
-    (state: AppStoreState) => ({
-      error: state.chapter.error,
-      loading: state.chapter.loading,
-      name: state.chapter.name,
-      description: state.chapter.description,
-    }),
-  );
-  const dispatch = useThunkDispatch();
+  // const { error, loading, name, description } = useSelector(
+  //   (state: AppStoreState) => ({
+  //     error: state.chapter.error,
+  //     loading: state.chapter.loading,
+  //     name: state.chapter.name,
+  //     description: state.chapter.description,
+  //   }),
+  // );
+  // const dispatch = useThunkDispatch();
 
-  useEffect(() => {
-    dispatch(chapterActions.fetchChapter('1'));
-  }, []);
+  // useEffect(() => {
+  //   dispatch(chapterActions.fetchChapter('1'));
+  // }, []);
 
   return (
     <>
       <SomeComponent />
       <Grid container spacing={2}>
         <Grid item xs={10}>
-          {!error && (
-            <Card>
-              <ProgressCardContent loading={loading}>
-                <Typography gutterBottom variant="h5" component="h2">
-                  {name}
-                </Typography>
-                <Typography variant="body2" color="textSecondary" component="p">
-                  {description}
-                </Typography>
-              </ProgressCardContent>
-            </Card>
-          )}
+          <Card>
+            <ProgressCardContent loading={false}>
+              <Typography gutterBottom variant="h5" component="h2">
+                Hello
+              </Typography>
+              <Typography variant="body2" color="textSecondary" component="p">
+                World
+              </Typography>
+            </ProgressCardContent>
+          </Card>
         </Grid>
       </Grid>
       <Link href="/add-sponsor">

diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx
@@ -7,9 +7,9 @@ import thunk from 'redux-thunk';
 import { ThemeProvider as MaterialUIThemeProvider } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 
-import theme from 'styles/theme';
-import { rootReducer } from 'client/store/reducers';
-import PageLayout from 'client/components/PageLayout';
+import theme from '../styles/theme';
+import { rootReducer } from '../store/reducers';
+import PageLayout from '../components/PageLayout';
 
 const composeEnhancers =
   (typeof window !== 'undefined' &&

diff --git a/client/pages/_document.tsx b/client/pages/_document.tsx
@@ -2,16 +2,17 @@ import * as React from 'react';
 import { ServerStyleSheets } from '@material-ui/core/styles';
 import Document, { Head, Main, NextScript } from 'next/document';
 
-import theme from 'styles/theme';
+import theme from '../styles/theme';
+
 export default class MyDocument extends Document {
-  static async getInitialProps(ctx) {
+  static async getInitialProps(ctx: any) {
     const materialUISheet = new ServerStyleSheets();
     const originalRenderPage = ctx.renderPage;
 
     try {
       ctx.renderPage = () =>
         originalRenderPage({
-          enhanceApp: App => props =>
+          enhanceApp: (App: any) => (props: any) =>
             materialUISheet.collect(<App {...props} />),
         });
 

diff --git a/client/pages/add-sponsor.tsx b/client/pages/add-sponsor.tsx
@@ -1,15 +1,8 @@
 import * as React from 'react';
-import { AddSponsor } from 'client/components';
+import { AddSponsor } from '../components';
 
 const AddSponsorPage = () => {
-  return (
-    <>
-      <AddSponsor />
-      {
-        // TODO: page designs and styling
-      }
-    </>
-  );
+  return <AddSponsor />;
 };
 
 export default AddSponsorPage;
diff --git a/client/pages/index.tsx b/client/pages/index.tsx
@@ -1,3 +1,3 @@
-import Home from 'client/modules/home';
+import Home from '../modules/home';
 
 export default Home;
diff --git a/public/freecodecamp-logo.svg → client/public/freecodecamp-logo.svg b/public/freecodecamp-logo.svg → client/public/freecodecamp-logo.svg
diff --git a/styles/theme.ts → client/styles/theme.ts b/styles/theme.ts → client/styles/theme.ts