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