Refactor into folders

src/renderer/components/details.tsx → src/renderer/01-elements/details.tsx

@@ -1,17 +1,17 @@
+import { Paper, Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core';
 import * as React from 'react';
 import { ComponentEnhancer, compose } from 'recompose';
 import { withLoadingIndicator } from '../higher-order-components/loading-hoc';
 import { withNullCheck } from '../higher-order-components/null-check-hoc';
-import { Paper, Table, TableHead, TableRow, TableCell, TableBody } from '@material-ui/core';
 
 const nullCheckFn = (props: any) => !props.data || props.data.length == 0;
 
 export const Details = (props: any) => {
     const renderRow = (_row: any) => {
         return (
             <TableRow key={_row.id}>
-                {Object.keys(_row).map((key: any) => {
-                    return <TableCell>{_row[key]}</TableCell>;
+                {Object.keys(_row).map((key: any, idx: number) => {
+                    return <TableCell key={`${_row[key]}-${idx}`}>{_row[key]}</TableCell>;
                 })}
             </TableRow>
         );
@@ -22,8 +22,8 @@ export const Details = (props: any) => {
             <Table>
                 <TableHead>
                     <TableRow>
-                        {props.columns.map((c: any) => (
-                            <TableCell>{c.name}</TableCell>
+                        {props.columns.map((c: any, idx: number) => (
+                            <TableCell key={`${c.name}-${idx}`}>{c.name}</TableCell>
                         ))}
                     </TableRow>
                 </TableHead>

src/renderer/components/list-item-link.tsx → src/renderer/02-components/list-item-link.tsx

@@ -11,7 +11,9 @@ interface IListItemLinkProps {
     onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }
 export const ListItemLink = (props: IListItemLinkProps) => {
-    const renderLink = (itemProps: any) => <Link to={props.to} {...itemProps} />;
+    const renderLink = React.forwardRef((itemProps: any, ref: React.Ref<HTMLAnchorElement>) => (
+        <Link to={props.to} {...itemProps} innerRef={ref} />
+    ));
     const { text, inset }: IListItemLinkProps = props;
     return (
         <li>

src/renderer/components/material-ui-wrappers/textfield/currency-textfield.tsx → src/renderer/02-components/material-ui-wrappers/textfield/currency-textfield.tsx

@@ -1,10 +1,16 @@
 import { InputAdornment, TextField } from '@material-ui/core';
 import React from 'react';
 import { isEmptyString } from '../../../../utils';
-import { ITextFieldProps } from './textfield';
 
-interface ICurrencyTextFieldProps extends ITextFieldProps {
+interface ICurrencyTextFieldProps {
     symbol?: string;
+    className: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
+    onBlurValidation: () => boolean;
+    errorText: string;
+    label: string;
+    placeholder?: string;
+    value: string | number;
 }
 
 export const CurrencyTextField = (props: ICurrencyTextFieldProps) => {

src/renderer/components/material-ui-wrappers/textfield/dropdown.tsx → src/renderer/02-components/material-ui-wrappers/textfield/dropdown.tsx

@@ -1,18 +1,25 @@
 import { MenuItem, TextField } from '@material-ui/core';
 import React, { ReactNode } from 'react';
 import { isEmptyString } from '../../../../utils';
-import { ITextFieldProps } from './textfield';
 
-interface IDropdownProps extends ITextFieldProps {
+interface IDropdownProps {
     dropdownClassName: string;
     items?: string[];
     children?: ReactNode;
+
+    textfieldClassName: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
+    onBlurValidation: () => boolean;
+    errorText: string;
+    label: string;
+    placeholder?: string;
+    value: string | number;
 }
 
 export const Dropdown = (props: IDropdownProps) => {
     return (
         <TextField
-            className={props.className}
+            className={props.textfieldClassName}
             id="type"
             fullWidth
             select

src/renderer/components/navigation.tsx → src/renderer/03-composites/navigation.tsx

@@ -1,8 +1,9 @@
-import { createStyles, Divider, Drawer, List, withStyles, WithStyles } from '@material-ui/core';
+import { createStyles, Divider, Drawer, List, Theme } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
 import React from 'react';
-import { ListItemLink } from './list-item-link';
+import { ListItemLink } from '../02-components/list-item-link';
 
-const styles = () =>
+const useStyles = makeStyles((theme: Theme) =>
     createStyles({
         drawer: {
             width: '15em',
@@ -11,14 +12,17 @@ const styles = () =>
         drawerPaper: {
             width: '15em',
         },
-    });
+    })
+);
 
 interface INavigationProps {
     currentPath: string;
 }
 
-const Navigation = (props: INavigationProps & WithStyles<typeof styles>) => {
-    const { classes, currentPath, ...rest } = props;
+const Navigation = (props: INavigationProps) => {
+    const { currentPath } = props;
+    const classes = useStyles(props);
+
     return (
         <Drawer
             className={classes.drawer}
@@ -73,4 +77,4 @@ const Navigation = (props: INavigationProps & WithStyles<typeof styles>) => {
     );
 };
 
-export default withStyles(styles)(Navigation);
+export default Navigation;

src/renderer/routes/index.tsx → src/renderer/03-composites/routes/index.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
-import { AddNewEntryMain } from '../containers/add-new-entry/add-new-entry-main';
-import MonthlyChart from '../containers/charts/monthly-chart';
-import YearlyChart from '../containers/charts/yearly-chart';
-import { IndividualDetails } from '../containers/details/individual-details';
-import MonthlyDetails from '../containers/details/monthly-details';
-import YearlyDetails from '../containers/details/yearly-details';
+import AddNewEntryMain from '../../05-pages/add-new-entry-main';
+import { IndividualDetails } from '../../05-pages/individual-details';
+import MonthlyChart from '../../05-pages/monthly-chart';
+import MonthlyDetails from '../../05-pages/monthly-details';
+import YearlyChart from '../../05-pages/yearly-chart';
+import YearlyDetails from '../../05-pages/yearly-details';
 
 export class Routes extends React.Component {
     public render() {

src/renderer/04-layout/index.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import Content from '../01-elements/content';
+import FlexContainer from '../01-elements/flex-container';
+import Navigation from '../03-composites/navigation';
+
+interface ILayoutProps {
+    currentPath: string;
+    children: ReactNode;
+}
+
+const Layout = (props: ILayoutProps) => {
+    const { children, currentPath } = props;
+    return (
+        <FlexContainer>
+            <Navigation currentPath={currentPath} />
+            <Content>{children}</Content>
+        </FlexContainer>
+    );
+};
+
+export default Layout;

src/renderer/containers/add-new-entry/add-new-entry-main.tsx → src/renderer/05-pages/add-new-entry-main.tsx

@@ -1,19 +1,18 @@
-import { createStyles, Paper, Theme, withStyles, WithStyles } from '@material-ui/core';
+import { createStyles, Paper, Theme } from '@material-ui/core';
 import { blue, green, red } from '@material-ui/core/colors';
 import { MaterialUiPickersDate } from '@material-ui/pickers';
+import { makeStyles } from '@material-ui/styles';
 import { ipcRenderer } from 'electron';
 import moment from 'moment';
 import React, { useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router';
-import { Detail, Type } from '../../../types/details';
-import { isEmptyString } from '../../../utils';
-import Content from '../../Components/content';
-import FlexContainer from '../../Components/flex-container';
-import { Header } from '../../components/material-ui-wrappers/header';
-import { Button, CurrencyTextField, Dropdown, MonthYearDatePicker } from '../../components/material-ui-wrappers/index';
-import Navigation from '../../components/navigation';
-
-const styles = ({ spacing }: Theme) =>
+import { Detail, Type } from '../../types/details';
+import { isEmptyString } from '../../utils';
+import { Header } from '../02-components/material-ui-wrappers/header';
+import { Button, CurrencyTextField, Dropdown, MonthYearDatePicker } from '../02-components/material-ui-wrappers/index';
+import Layout from '../04-layout';
+
+const useStyles = makeStyles(({ spacing }: Theme) =>
     createStyles({
         root: {
             margin: spacing(1),
@@ -37,10 +36,12 @@ const styles = ({ spacing }: Theme) =>
         errorHeader: { background: red[400] },
         successHeader: { background: green[400] },
         submittingHeader: { background: blue[400] },
-    });
+    })
+);
 
-const AddNewEntryMainForm = (props: RouteComponentProps & WithStyles<typeof styles>) => {
-    const { location, classes } = props;
+const AddNewEntryMainForm = (props: RouteComponentProps) => {
+    const { location } = props;
+    const classes = useStyles(props);
     const [selectedAccountName, setSelectedAccountName] = useState('');
     const [selectedAccountType, setSelectedAccountType] = useState('');
     const [amount, setAmount] = useState('');
@@ -172,79 +173,76 @@ const AddNewEntryMainForm = (props: RouteComponentProps & WithStyles<typeof styl
     };
 
     return (
-        <FlexContainer>
-            <Navigation currentPath={location.pathname} />
-            <Content>
-                <Paper className={classes.root}>
-                    {!isEmptyString(formErrorText) && (
-                        <Header className={`${classes.errorHeader} ${classes.header}`}>{formErrorText}</Header>
-                    )}
-
-                    {!isEmptyString(submittingText) && (
-                        <Header className={`${classes.submittingHeader} ${classes.header}`}>{submittingText}</Header>
-                    )}
-
-                    {submitSuccess && (
-                        <Header className={`${classes.successHeader} ${classes.header}`}>
-                            The form was successfully submitted!
-                        </Header>
-                    )}
-
-                    <form onSubmit={handleSubmit} noValidate={true} autoComplete="off" className={classes.root}>
-                        <MonthYearDatePicker
-                            className={classes.formControl}
-                            value={date}
-                            label="Select Date"
-                            onChange={(d: MaterialUiPickersDate) => setDate(moment(d).startOf('month'))}
-                        />
-
-                        <Dropdown
-                            className={classes.formControl}
-                            label="Account Name"
-                            value={selectedAccountName}
-                            dropdownClassName={classes.selectMenu}
-                            onChange={handleAccountSelected}
-                            onBlurValidation={validateAccount}
-                            errorText={accountErrorText}
-                            placeholder="Select Account Name"
-                            items={accountNames}
-                        />
-
-                        <Dropdown
-                            className={classes.formControl}
-                            label="Account Type"
-                            value={selectedAccountType}
-                            dropdownClassName={classes.selectMenu}
-                            onChange={handleTypeSelected}
-                            onBlurValidation={validateType}
-                            errorText={typeErrorText}
-                            placeholder="Select Type"
-                            items={accountTypes}
-                        />
-
-                        <CurrencyTextField
-                            className={classes.formControl}
-                            onChange={handleAmountChanged}
-                            onBlurValidation={validateAmount}
-                            errorText={amountErrorText}
-                            label="Amount"
-                            placeholder="Please enter the amount"
-                            symbol="NZD"
-                            value={amount}
-                        />
-
-                        <Button className={classes.button} color="secondary" onClick={resetForm}>
-                            Reset
-                        </Button>
-
-                        <Button className={classes.button} color="primary" type="submit">
-                            Submit
-                        </Button>
-                    </form>
-                </Paper>
-            </Content>
-        </FlexContainer>
+        <Layout currentPath={location.pathname}>
+            <Paper className={classes.root}>
+                {!isEmptyString(formErrorText) && (
+                    <Header className={`${classes.errorHeader} ${classes.header}`}>{formErrorText}</Header>
+                )}
+
+                {!isEmptyString(submittingText) && (
+                    <Header className={`${classes.submittingHeader} ${classes.header}`}>{submittingText}</Header>
+                )}
+
+                {submitSuccess && (
+                    <Header className={`${classes.successHeader} ${classes.header}`}>
+                        The form was successfully submitted!
+                    </Header>
+                )}
+
+                <form onSubmit={handleSubmit} noValidate={true} autoComplete="off" className={classes.root}>
+                    <MonthYearDatePicker
+                        className={classes.formControl}
+                        value={date}
+                        label="Select Date"
+                        onChange={(d: MaterialUiPickersDate) => setDate(moment(d).startOf('month'))}
+                    />
+
+                    <Dropdown
+                        textfieldClassName={classes.formControl}
+                        label="Account Name"
+                        value={selectedAccountName}
+                        dropdownClassName={classes.selectMenu}
+                        onChange={handleAccountSelected}
+                        onBlurValidation={validateAccount}
+                        errorText={accountErrorText}
+                        placeholder="Select Account Name"
+                        items={accountNames}
+                    />
+
+                    <Dropdown
+                        textfieldClassName={classes.formControl}
+                        label="Account Type"
+                        value={selectedAccountType}
+                        dropdownClassName={classes.selectMenu}
+                        onChange={handleTypeSelected}
+                        onBlurValidation={validateType}
+                        errorText={typeErrorText}
+                        placeholder="Select Type"
+                        items={accountTypes}
+                    />
+
+                    <CurrencyTextField
+                        className={classes.formControl}
+                        onChange={handleAmountChanged}
+                        onBlurValidation={validateAmount}
+                        errorText={amountErrorText}
+                        label="Amount"
+                        placeholder="Please enter the amount"
+                        symbol="NZD"
+                        value={amount}
+                    />
+
+                    <Button className={classes.button} color="secondary" onClick={resetForm}>
+                        Reset
+                    </Button>
+
+                    <Button className={classes.button} color="primary" type="submit">
+                        Submit
+                    </Button>
+                </form>
+            </Paper>
+        </Layout>
     );
 };
 
-export const AddNewEntryMain = withStyles(styles)(AddNewEntryMainForm);
+export default AddNewEntryMainForm;

src/renderer/containers/details/individual-details.tsx → src/renderer/05-pages/individual-details.tsx

@@ -1,11 +1,9 @@
 import { ipcRenderer } from 'electron';
 import React, { useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { Detail } from '../../../types/details';
-import Content from '../../Components/content';
-import { DetailsWithConditionalRenderings } from '../../components/details';
-import FlexContainer from '../../Components/flex-container';
-import Navigation from '../../components/navigation';
+import { Detail } from '../../types/details';
+import { DetailsWithConditionalRenderings } from '../01-elements/details';
+import Layout from '../04-layout';
 
 export const IndividualDetails = (props: RouteComponentProps) => {
     const { location } = props;
@@ -50,11 +48,8 @@ export const IndividualDetails = (props: RouteComponentProps) => {
     ];
 
     return (
-        <FlexContainer>
-            <Navigation currentPath={location.pathname} />
-            <Content>
-                <DetailsWithConditionalRenderings data={data} columns={columns} loading={isLoading} />;
-            </Content>
-        </FlexContainer>
+        <Layout currentPath={location.pathname}>
+            <DetailsWithConditionalRenderings data={data} columns={columns} loading={isLoading} />
+        </Layout>
     );
 };