refactors styles and replaces MUI with react select

martinmckenna · May 5, 2019 · b3b63da · b3b63da
1 parent c63657f
commit b3b63da
Show file tree

Hide file tree

Showing 30 changed files with 374 additions and 109 deletions.
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "@reach/router": "^1.2.1",
     "axios": "^0.18.0",
     "classnames": "^2.2.6",
+    "notistack": "^0.8.2",
     "querystring": "^0.2.0",
     "ramda": "^0.26.1",
     "react": "^16.8.6",

diff --git a/public/fonts/LibreBaskerville-Bold.ttf b/public/fonts/LibreBaskerville-Bold.ttf
diff --git a/public/fonts/LibreBaskerville-Regular.ttf b/public/fonts/LibreBaskerville-Regular.ttf
diff --git a/public/fonts/Raleway-Bold.ttf b/public/fonts/Raleway-Bold.ttf
diff --git a/public/fonts/Raleway-Regular.ttf b/public/fonts/Raleway-Regular.ttf
diff --git a/public/fonts/fonts.css b/public/fonts/fonts.css
@@ -0,0 +1,27 @@
+@font-face {
+  font-family: 'Libre Baskerville';
+  font-weight: normal;
+  font-style: normal;
+  src: url('./LibreBaskerville-Regular.ttf')
+}
+
+@font-face {
+  font-family: 'Raleway';
+  font-weight: normal;
+  font-style: normal;
+  src: url('./Raleway-Regular.ttf')
+}
+
+@font-face {
+  font-family: 'Libre Baskerville';
+  font-weight: 700;
+  font-style: bold;
+  src: url('./LibreBaskerville-Bold.ttf')
+}
+
+@font-face {
+  font-family: 'Raleway';
+  font-weight: 700;
+  font-style: bold;
+  src: url('./Raleway-Bold.ttf')
+}
diff --git a/public/index.html b/public/index.html
@@ -13,6 +13,7 @@
     />
     <meta name="theme-color" content="#000000" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css">
     <title>Barcart - Find your next Cocktail!</title>
   </head>
   <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -8,28 +8,37 @@ import theme from './theme';
 import store from 'src/store';
 
 import Admin from 'src/features/AdminLanding';
+import CocktailDetail from 'src/features/CocktailDetail';
 import Footer from 'src/features/Footer';
 import Login from 'src/features/Login';
 import Header from './features/Header';
 import Home from './features/Home';
 import SearchLanding from './features/SearchLanding';
 
+import SnackbarProvider from 'src/components/SnackbarProvider';
+
 class App extends Component {
   render() {
     return (
-      <Provider store={store}>
-        <MuiThemeProvider theme={theme}>
-          <CssBaseline />
-          <Header />
-          <Router>
-            <Home path="/" />
-            <SearchLanding path="search" />
-            <Login path="login" />
-            <Admin path="admin/*" />
-          </Router>
-          <Footer />
-        </MuiThemeProvider>
-      </Provider>
+      <SnackbarProvider
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        autoHideDuration={2000}
+      >
+        <Provider store={store}>
+          <MuiThemeProvider theme={theme}>
+            <CssBaseline />
+            <Header />
+            <Router>
+              <Home path="/" />
+              <SearchLanding path="search" />
+              <Login path="login" />
+              <Admin path="admin/*" />
+              <CocktailDetail path="cocktails/*" />
+            </Router>
+            <Footer />
+          </MuiThemeProvider>
+        </Provider>
+      </SnackbarProvider>
     );
   }
 }

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -6,23 +6,40 @@ import {
 import React from 'react';
 import { compose } from 'recompose';
 
-import _Button, { ButtonProps } from '@material-ui/core/Button';
+import _Button, { ButtonBaseProps } from '@material-ui/core/ButtonBase';
 
-type ClassNames = 'root';
+type ClassNames = 'root' | 'secondary';
 
 const styles: StyleRulesCallback<ClassNames> = theme => ({
-  root: {}
+  root: {
+    color: '#000'
+  },
+  secondary: {
+    color: '#fff'
+  }
 });
 
-interface Props extends ButtonProps {
+interface Props extends ButtonBaseProps {
   isLoading?: boolean;
+  variant?: 'primary' | 'secondary';
 }
 
 type CombinedProps = Props & WithStyles<ClassNames>;
 
 const Button: React.SFC<CombinedProps> = props => {
-  const { isLoading, children, ...rest } = props;
-  return <_Button {...rest}>{isLoading ? 'Loading...' : children}</_Button>;
+  const { isLoading, children, classes, ...rest } = props;
+
+  const className = props.variant
+    ? props.variant === 'primary'
+      ? classes.root
+      : classes.secondary
+    : classes.root;
+
+  return (
+    <_Button className={className} disableRipple={true} {...rest}>
+      {isLoading ? 'Loading...' : children}
+    </_Button>
+  );
 };
 
 const styled = withStyles(styles);

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -47,6 +47,7 @@ const Checkbox: React.SFC<CombinedProps> = props => {
         control={
           <_Checkbox
             {...rest}
+            disableRipple={true}
             classes={{
               root: classes.root
             }}

diff --git a/src/components/LandingError/LandingError.tsx b/src/components/LandingError/LandingError.tsx
@@ -30,7 +30,7 @@ const LandingError: React.SFC<CombinedProps> = props => {
   return (
     <div className={props.classes.root}>
       <ThumbDown style={{ width: '75px', height: '75px' }} />
-      <Typography>{props.message}</Typography>
+      <Typography variant="h6">{props.message}</Typography>
     </div>
   );
 };

diff --git a/src/components/LandingLoading/LandingLoading.tsx b/src/components/LandingLoading/LandingLoading.tsx
@@ -38,7 +38,7 @@ const LandingLoading: React.FC<CombinedProps> = props => {
   return isVisible ? (
     <div className={props.classes.root}>
       <CircularProgress style={{ width: '75px', height: '75px' }} />
-      {props.message && <Typography>{props.message}</Typography>}
+      {props.message && <Typography variant="h6">{props.message}</Typography>}
     </div>
   ) : (
     <React.Fragment />

diff --git a/src/components/Searchbar/Searchbar.tsx b/src/components/Searchbar/Searchbar.tsx
@@ -4,10 +4,12 @@ import {
   WithStyles
 } from '@material-ui/core/styles';
 import React from 'react';
-import Select from 'react-select';
+import Select, { components } from 'react-select';
 import { Props as SelectProps } from 'react-select/lib/Select';
 import { compose, StateHandlerMap, withStateHandlers } from 'recompose';
 
+import Button from 'src/components/Button';
+
 type ClassNames = 'root';
 
 const styles: StyleRulesCallback<ClassNames> = theme => ({
@@ -49,8 +51,6 @@ const Searchbar: React.SFC<CombinedProps> = props => {
     loading,
     handleSelect,
     handleSubmit,
-    classes,
-    query,
     setQuery
   } = props;
 
@@ -105,11 +105,29 @@ const Searchbar: React.SFC<CombinedProps> = props => {
       isLoading={loading}
       isClearable={true}
       onChange={handleSelect}
+      components={{
+        MenuList: componentProps =>
+          _Menu({ ...componentProps, handleSubmit: props.handleSubmit })
+      }}
       {...props}
     />
   );
 };
 
+const _Menu: React.FC<any> = props => {
+  return (
+    <React.Fragment>
+      <components.MenuList {...props}>{props.children}</components.MenuList>
+      <Button
+        style={{ width: '100%', padding: '1em' }}
+        onClick={props.handleSubmit}
+      >
+        Search
+      </Button>
+    </React.Fragment>
+  );
+};
+
 interface SearchState {
   query: string;
 }

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -6,7 +6,8 @@ import {
 import React from 'react';
 import { compose } from 'recompose';
 
-import TextField, { TextFieldProps } from '@material-ui/core/TextField';
+import Select from 'react-select';
+import { Props as SelectProps } from 'react-select/lib/Select';
 
 type ClassNames = 'root';
 
@@ -17,42 +18,52 @@ const styles: StyleRulesCallback<ClassNames> = theme => ({
 export interface Option<V = string | number, L = string | number> {
   value: V;
   label: L;
+  disabled?: boolean;
 }
 
-interface Props {
+interface Props extends Omit<SelectProps, 'options' | 'onChange'> {
   options: Option[];
-  defaultText?: string;
+  defaultOption?: string;
+  handleSelect: (value: any, actionMeta: any) => void;
 }
 
-type CombinedProps = Props & TextFieldProps & WithStyles<ClassNames>;
+type CombinedProps = Props & WithStyles<ClassNames>;
+
+const _Select: React.SFC<CombinedProps> = props => {
+  const { classes, options, defaultOption, handleSelect, ...rest } = props;
+
+  const interceptedOptions: Option[] = defaultOption
+    ? [
+        {
+          label: defaultOption,
+          value: defaultOption,
+          disabled: true
+        },
+        ...options
+      ]
+    : options;
 
-const Select: React.SFC<CombinedProps> = props => {
-  const { options, SelectProps, defaultText, ...rest } = props;
   return (
-    <TextField
-      select
-      defaultValue={defaultText || 'Select One'}
-      SelectProps={{
-        ...SelectProps,
-        native: true
-      }}
+    <Select
       {...rest}
-    >
-      <option disabled key={0} value={defaultText || 'Select One'}>
-        {defaultText || 'Select One'}
-      </option>
-      {options.map(option => (
-        <option key={option.value} value={option.value}>
-          {option.label}
-        </option>
-      ))}
-    </TextField>
+      classNamePrefix="react-select"
+      options={interceptedOptions as any}
+      placeholder={
+        defaultOption
+          ? `${interceptedOptions[0].label}`
+          : props.placeholder
+          ? props.placeholder
+          : 'Select an Option'
+      }
+      onChange={handleSelect}
+      isOptionDisabled={(option: Option) => option.disabled || false}
+    />
   );
 };
 
 const styled = withStyles(styles);
 
-export default compose<CombinedProps, TextFieldProps & Props>(
+export default compose<CombinedProps, SelectProps & Props>(
   styled,
   React.memo
-)(Select);
+)(_Select);
diff --git a/src/components/SnackbarProvider/SnackbarProvider.tsx b/src/components/SnackbarProvider/SnackbarProvider.tsx
@@ -0,0 +1,46 @@
+import {
+  StyleRulesCallback,
+  withStyles,
+  WithStyles
+} from '@material-ui/core/styles';
+import { SnackbarProvider, SnackbarProviderProps } from 'notistack';
+import React from 'react';
+import { compose } from 'recompose';
+
+type ClassNames = 'root' | 'success' | 'error';
+
+const styles: StyleRulesCallback<ClassNames> = theme => ({
+  root: {},
+  success: {
+    backgroundColor: 'rgba(0,107,224,.98)'
+  },
+  error: {
+    backgroundColor: 'rgba(171,4,87,.86)'
+  }
+});
+
+type CombinedProps = SnackbarProviderProps & WithStyles<ClassNames>;
+
+const _SnackbarProvider: React.FC<CombinedProps> = props => {
+  const { classes, ...rest } = props;
+
+  return (
+    <SnackbarProvider
+      {...rest}
+      maxSnack={3}
+      classes={{
+        variantError: classes.error,
+        variantSuccess: classes.success
+      }}
+    >
+      {props.children}
+    </SnackbarProvider>
+  );
+};
+
+const styled = withStyles(styles);
+
+export default compose<CombinedProps, SnackbarProviderProps>(
+  styled,
+  React.memo
+)(_SnackbarProvider);
diff --git a/src/components/SnackbarProvider/index.ts b/src/components/SnackbarProvider/index.ts
@@ -0,0 +1 @@
+export { default } from './SnackbarProvider';
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -6,15 +6,15 @@ import {
 import React from 'react';
 import { compose } from 'recompose';
 
-import _TextField, { TextFieldProps } from '@material-ui/core/TextField';
+import _TextField, { InputBaseProps } from '@material-ui/core/InputBase';
 
 type ClassNames = 'root';
 
 const styles: StyleRulesCallback<ClassNames> = theme => ({
   root: {}
 });
 
-type CombinedProps = TextFieldProps & WithStyles<ClassNames>;
+type CombinedProps = InputBaseProps & WithStyles<ClassNames>;
 
 const TextField: React.SFC<CombinedProps> = props => {
   const { ...rest } = props;
@@ -23,7 +23,7 @@ const TextField: React.SFC<CombinedProps> = props => {
 
 const styled = withStyles(styles);
 
-export default compose<CombinedProps, TextFieldProps>(
+export default compose<CombinedProps, InputBaseProps>(
   styled,
   React.memo
 )(TextField);
diff --git a/src/features/AdminLanding/AdminLanding.tsx b/src/features/AdminLanding/AdminLanding.tsx
@@ -7,7 +7,7 @@ import { RouteComponentProps, Router } from '@reach/router';
 import React from 'react';
 import { compose } from 'recompose';
 
-import Button from '@material-ui/core/Button';
+import Button from 'src/components/Button';
 import CreateCocktailForm from './CreateForms/CreateCocktail';
 import CreateIngredientForm from './CreateForms/CreateIngredient';