Cacher is the code snippet organizer for pro developers

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import './styles/index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter} from 'react-router-dom';
import './styles/react-transitions.css'
import store from './redux/store.js'

ReactDOM.render(
    <Provider store= {store}>
        <BrowserRouter>
            <div className="transition-container">
                <App />
            </div>
        </BrowserRouter>
    </Provider>,
document.getElementById('root'));

import React  from 'react'
import {Switch,Route} from 'react-router-dom'
import Home from './components/Home.jsx';
import ChartDetails from './components/ChartDetails.jsx'
const Routes =() =>{

    return(
        <Switch>
            <Route exact path='/' component={Home} />
            <Route path='/ChartDetail' component={ChartDetails} />
        </Switch>
    );

}

export default Routes;

import React from 'react';
import './styles/App.scss';
import Routes from './Routes'

class App extends React.Component {
  constructor(props) {
    super(props);
    
  }

  render() {
    
    return (
      <Routes/>
    );
  }
}


export default App;

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {
  CleanWebpackPlugin
} = require("clean-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
    watchContentBase: true,
    progress: true,
    historyApiFallback: true
  },
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  },
  module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.(css|scss)$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'assets/',
            publicPath: 'assets/'
          }
        }]
      },
      {
        test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          }
        }]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, '..', '.tmp')],
      cleanAfterEveryBuildPatterns: ['!assets/**/*', '!fonts/**/*'],
      verbose: true,
      dry: false
    }),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

import React from 'react'
import '../styles/App.scss'
import Header from './Header.jsx'
import RecentSignals from './RecentSignals.jsx';
import Container from '@material-ui/core/Container';
import CssBaseline from '@material-ui/core/CssBaseline';


class Home extends React.Component{

    constructor(props){
        super(props);
    }

    render(){
        return(
            <React.Fragment>
            <CssBaseline />
            <Header />
            <main>
              <div className="BodyPadding ">
                <Container maxWidth="xl">
                  <RecentSignals />
                </Container>
              </div>
            </main>
        </React.Fragment>
        )
    }


}


export default Home ;

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ThemeComponent from '../styles/components/ComponentTheme'
import { Link as RouterLink} from 'react-router-dom';
import { Link } from '@material-ui/core';

const AdapterLink = React.forwardRef((props,ref)=> <RouterLink innerRef={ref} to="/" {...props} />)

export default function Header(){
  const classes = ThemeComponent();

    return (
      <div className={classes.root}>
      <AppBar position="static" className={classes.Theme}>
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
            <Link component={AdapterLink}><img src={require('../assets/logo.png')} className={classes.imageSize} /></Link>
            <Typography variant="h6" className={classes.title}>
              Signal Tracer
            </Typography>
            
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
    )
}