misc updates

martinmckenna · Mar 17, 2019 · 9b8f4ea · 9b8f4ea
1 parent e63fb74
commit 9b8f4ea
Show file tree

Hide file tree

Showing 20 changed files with 263 additions and 161 deletions.
diff --git a/.gitignore b/.gitignore
@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 
 .vscode
+.env
diff --git a/package.json b/package.json
@@ -5,13 +5,13 @@
   "dependencies": {
     "@material-ui/core": "^3.9.1",
     "@material-ui/icons": "^3.0.2",
+    "@reach/router": "^1.2.1",
     "axios": "^0.18.0",
     "classnames": "^2.2.6",
     "querystring": "^0.2.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-redux": "^6.0.1",
-    "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.3",
     "react-select": "^2.3.0",
     "recompose": "^0.30.0",
@@ -26,10 +26,10 @@
     "@types/classnames": "^2.2.7",
     "@types/jest": "23.3.13",
     "@types/node": "10.12.18",
+    "@types/reach__router": "^1.2.3",
     "@types/react": "16.7.20",
     "@types/react-dom": "16.0.11",
     "@types/react-redux": "^7.0.1",
-    "@types/react-router-dom": "^4.3.1",
     "@types/react-select": "^2.0.11",
     "@types/recompose": "^0.30.3",
     "@types/throttle-debounce": "^1.1.0",

diff --git a/public/index.html b/public/index.html
@@ -7,35 +7,16 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
+    <meta
+      name="description"
+      content="Barcart is a cocktail suggestion app - enter the ingredients you have at home and discover what cocktails you can make"
+    />
     <meta name="theme-color" content="#000000" />
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>Barcart - Find your next Cocktail!</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,12 +1,13 @@
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { MuiThemeProvider } from '@material-ui/core/styles';
+import { Router } from '@reach/router';
 import React, { Component } from 'react';
-// import { Provider } from 'react-redux'
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { Provider } from 'react-redux';
 import theme from './theme';
 
-// import store from 'src/store';
+import store from 'src/store';
 
+import Admin from 'src/features/AdminLanding';
 import Footer from 'src/features/Footer';
 import Login from 'src/features/Login';
 import Header from './features/Header';
@@ -16,20 +17,19 @@ import SearchLanding from './features/SearchLanding';
 class App extends Component {
   render() {
     return (
-      // <Provider store={store}>
-      <Router>
+      <Provider store={store}>
         <MuiThemeProvider theme={theme}>
           <CssBaseline />
           <Header />
-          <Switch>
-            <Route exact path="/" component={Home} />
-            <Route path="/search" component={SearchLanding} />
-            <Route path="/login" component={Login} />
-          </Switch>
+          <Router>
+            <Home path="/" />
+            <SearchLanding path="search" />
+            <Login path="login" />
+            <Admin path="admin/*" />
+          </Router>
           <Footer />
         </MuiThemeProvider>
-      </Router>
-      // </Provider>
+      </Provider>
     );
   }
 }

diff --git a/src/analytics.ts b/src/analytics.ts
@@ -1,3 +1,5 @@
+import { analyticsCode, isProduction } from 'src/constants';
+
 /* tslint:disable */
 const gaInit = (i: any, s: any, o: any, g: any, r: any, a: any, m: any) => {
   const currdate: any = new Date();
@@ -23,9 +25,11 @@ const gaInit = (i: any, s: any, o: any, g: any, r: any, a: any, m: any) => {
  * @param production current environment of the app
  */
 export const initAnalytics = () => {
-  const isProduction = process.env.NODE_ENV === 'production';
+  if (!isProduction && !analyticsCode) {
+    return;
+  }
 
-  const gaId = isProduction ? 'UA-88950785-4' : 'UA-88950785-5';
+  const gaId = isProduction ? 'UA-88950785-4' : analyticsCode;
 
   const url = isProduction
     ? 'https://www.google-analytics.com/analytics.js'

diff --git a/src/components/Searchbar/Searchbar.tsx b/src/components/Searchbar/Searchbar.tsx
@@ -38,18 +38,29 @@ type CombinedProps = Props &
   SearchStateSetters;
 
 const Searchbar: React.SFC<CombinedProps> = props => {
-  const handleInputChange = (value: string, action: any) => {
+  const {
+    handleChange,
+    dropDownOptions,
+    loading,
+    handleSelect,
+    handleSubmit,
+    classes,
+    query,
+    setQuery
+  } = props;
+
+  const onInputChange = (value: string, action: any) => {
     /** don't clear the input when we blur the input field */
     if (
       action.action !== 'input-blur' &&
       action.action !== 'menu-close' &&
       action.action !== 'set-value'
     ) {
-      props.setQuery(value);
-      props.handleChange(value);
+      setQuery(value);
+      handleChange(value);
     }
     if (action.action === 'set-value') {
-      props.setQuery('');
+      setQuery('');
     }
   };
 
@@ -62,16 +73,16 @@ const Searchbar: React.SFC<CombinedProps> = props => {
       (e.keyCode === 13 && e.ctrlKey) ||
       (e.keyCode === 13 && e.metaKey)
     ) {
-      props.handleSubmit();
+      handleSubmit();
     }
   };
 
   /**
    * filter ice out of the drop down reccommendations because
    * we're adding it by default
    */
-  const filteredOptions = props.dropDownOptions
-    ? props.dropDownOptions.filter(
+  const filteredOptions = dropDownOptions
+    ? dropDownOptions.filter(
         eachSelectObj => eachSelectObj.label.toLowerCase() !== 'ice'
       )
     : [];
@@ -84,10 +95,13 @@ const Searchbar: React.SFC<CombinedProps> = props => {
       inputValue={props.query}
       options={filteredOptions}
       name="ingredients"
-      onInputChange={handleInputChange}
-      isLoading={props.loading}
+      onInputChange={onInputChange}
+      isLoading={loading}
       isClearable={true}
-      onChange={props.handleSelect}
+      onChange={handleSelect}
+      loadingMessage={() => 'Fetching ingredients...'}
+      noOptionsMessage={() => 'No Ingredients Found'}
+      placeholder='Search ingredients (e.g "Vodka")'
     />
   );
 };

diff --git a/src/constants.ts b/src/constants.ts
@@ -0,0 +1,5 @@
+export const isProduction = process.env.NODE_ENV === 'production';
+
+export const analyticsCode = process.env.REACT_APP_GA;
+
+export const apiToken = process.env.REACT_APP_TOKEN;
diff --git a/src/features/AdminLanding/AdminLanding.tsx b/src/features/AdminLanding/AdminLanding.tsx
@@ -0,0 +1,46 @@
+import {
+  StyleRulesCallback,
+  withStyles,
+  WithStyles
+} from '@material-ui/core/styles';
+import { RouteComponentProps, Router } from '@reach/router';
+import React from 'react';
+import { compose } from 'recompose';
+
+import Button from '@material-ui/core/Button';
+import CreateIngredientForm from './CreateForms/CreateIngredient';
+
+type ClassNames = 'root';
+
+const styles: StyleRulesCallback<ClassNames> = theme => ({
+  root: {}
+});
+
+type CombinedProps = WithStyles<ClassNames> & RouteComponentProps;
+
+const AdminLanding: React.SFC<CombinedProps> = props => {
+  const navigateToIngForm = () => {
+    props.navigate!('ingredients/create');
+  };
+
+  const navigateToCocktailForm = () => {
+    props.navigate!('cocktails/create');
+  };
+
+  return (
+    <React.Fragment>
+      <Button onClick={navigateToCocktailForm}>Create Cocktail</Button>
+      <Button onClick={navigateToIngForm}>Create Ingredient</Button>
+      <Router>
+        <CreateIngredientForm path="ingredients/create" />
+      </Router>
+    </React.Fragment>
+  );
+};
+
+const styled = withStyles(styles);
+
+export default compose<CombinedProps, RouteComponentProps>(
+  styled,
+  React.memo
+)(AdminLanding);
diff --git a/src/features/AdminLanding/CreateForms/CreateIngredient.tsx b/src/features/AdminLanding/CreateForms/CreateIngredient.tsx
@@ -0,0 +1,27 @@
+import {
+  StyleRulesCallback,
+  withStyles,
+  WithStyles
+} from '@material-ui/core/styles';
+import { RouteComponentProps } from '@reach/router';
+import React from 'react';
+import { compose } from 'recompose';
+
+type ClassNames = 'root';
+
+const styles: StyleRulesCallback<ClassNames> = theme => ({
+  root: {}
+});
+
+type CombinedProps = RouteComponentProps & WithStyles<ClassNames>;
+
+const CreateIngredientForm: React.SFC<CombinedProps> = props => {
+  return <div>hello world</div>;
+};
+
+const styled = withStyles(styles);
+
+export default compose<CombinedProps, RouteComponentProps>(
+  styled,
+  React.memo
+)(CreateIngredientForm);
diff --git a/src/features/AdminLanding/index.ts b/src/features/AdminLanding/index.ts
@@ -0,0 +1 @@
+export { default } from './AdminLanding';
diff --git a/src/features/Header/Header.tsx b/src/features/Header/Header.tsx
@@ -6,9 +6,10 @@ import {
   WithStyles
 } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
+import { navigate } from '@reach/router';
 import React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { compose } from 'recompose';
+import { isProduction } from 'src/constants';
 
 type ClassNames = 'root' | 'profile';
 
@@ -23,38 +24,44 @@ const styles: StyleRulesCallback<ClassNames> = theme => ({
   }
 });
 
-type CombinedProps = WithStyles<ClassNames> & RouteComponentProps<any>;
+type CombinedProps = WithStyles<ClassNames>;
 
 const Header: React.SFC<CombinedProps> = props => {
   const { classes } = props;
-  const goHome = () => {
-    props.history.push('/');
-  };
   return (
     <Grid container className={classes.root}>
       <Grid item xs={3}>
         <Button onClick={goHome}>
           <Typography color="secondary">Home</Typography>
         </Button>
       </Grid>
-      <Grid item className={classes.profile} xs={9}>
-        <Button>
-          <Typography color="secondary">My Profile</Typography>
-        </Button>
-        {true && (
+      {!isProduction && (
+        <Grid item className={classes.profile} xs={9}>
           <Button>
-            <Typography color="secondary">Admin</Typography>
+            <Typography color="secondary">My Profile</Typography>
           </Button>
-        )}
-      </Grid>
+          {true && (
+            <Button onClick={goToAdmin}>
+              <Typography color="secondary">Admin</Typography>
+            </Button>
+          )}
+        </Grid>
+      )}
     </Grid>
   );
 };
 
+const goHome = () => {
+  navigate('/');
+};
+
+const goToAdmin = () => {
+  navigate('/admin');
+};
+
 const styled = withStyles(styles);
 
 export default compose<CombinedProps, {}>(
   styled,
-  React.memo,
-  withRouter
+  React.memo
 )(Header);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -23,3 +23,4 @@ yarn-debug.log*
		yarn-error.log*

		.vscode
		.env