dev: fix designs

.gitignore

@@ -0,0 +1,2 @@
+*/node_modules/
+yarn.lock

myapp/src/DefaultBar.js

@@ -55,7 +55,9 @@ class DefaultBar extends React.Component {
               REQLY
             </Typography>
               <div style={{display: "flex"}}>
-                <SearchModalButton />
+                <IconButton onClick={() => this.props.onHandleChange()} color="inherit">
+                  <Search style={{fontSize: 36}}/>
+                </IconButton>
                 <IconButton
                   aria-owns={open ? 'menu-appbar' : null}
                   aria-haspopup="true"
@@ -91,6 +93,7 @@ class DefaultBar extends React.Component {
 
 DefaultBar.propTypes = {
   classes: PropTypes.object.isRequired,
+  onHandleChange: PropTypes.func
 };
 
 export default withStyles(styles)(DefaultBar);

myapp/src/FilterAssist.js

@@ -16,14 +16,18 @@ const styles = {
 };
 
 class FilterAssist extends React.Component {
-  state = {};
-
+  state = {}
+/*
   handleChange = name => event => {
     this.setState({ [name]: event.target.checked });
   };
+*/
 
   render() {
     const { classes } = this.props;
+    const categories = [6, 7, 8, 9, 10] //["主食・丼", "主菜", "副菜", "汁もの", "スイーツ"];
+   // const features = ["基本", "ヘルシー", "お弁当", "朝ごはん", "おつまみ"];
+    const features_map = [12, 11, 5, 1, 4];
 
     return (
       <div >
@@ -32,23 +36,28 @@ class FilterAssist extends React.Component {
           justify="center"
           className={classes.top}>
           <Grid item>
-            <SelectableChip label="30分以内" selected={true}/>
+            <SelectableChip label="30分以内" selected={this.props.cooktime === 3} onHandleChange={() => this.props.onHandleChange("cooktime")}/>
           </Grid>
           <Grid item>
-            <SelectableChip label="調理簡単" selected={false}/>
+            <SelectableChip label="調理簡単" selected={this.props.procedure === 1} onHandleChange={() => this.props.onHandleChange("procedure")}/>
           </Grid>
           <Grid item>
-            <SelectableChip label="食材シンプル" selected={false}/>
+            <SelectableChip label="食材シンプル" selected={this.props.food === 1} onHandleChange={() => this.props.onHandleChange("food")}/>
           </Grid>
         </Grid>
         <MultipleSelect
           label="カテゴリ"
-          names={["主食・丼", "主菜", "副菜", "汁もの", "スイーツ"]}
-          preset={["主菜"]}
+          names={categories}
+          preset={this.props.categories}
+          onHandleFeaturesChange={this.props.onHandleCategoriesChange}
+          onHandleFeaturesDelete={this.props.onHandleCategoriesDelete}
         />
         <MultipleSelect
           label="特徴"
-          names={["基本", "ヘルシー", "お弁当", "朝ごはん", "おつまみ"]}
+          names={features_map}
+          preset={this.props.features}
+          onHandleFeaturesChange={this.props.onHandleFeaturesChange}
+          onHandleFeaturesDelete={this.props.onHandleFeaturesDelete}
         />
       </ div>
     );
@@ -57,6 +66,7 @@ class FilterAssist extends React.Component {
 
 FilterAssist.propTypes = {
   classes: PropTypes.object.isRequired,
+  onHandleChange: PropTypes.func
 };
 
 export default withStyles(styles)(FilterAssist);

myapp/src/MultipleSelect.js

@@ -10,6 +10,7 @@ import Select from '@material-ui/core/Select';
 import Checkbox from '@material-ui/core/Checkbox';
 import Chip from '@material-ui/core/Chip';
 import FormGroup from '@material-ui/core/FormGroup';
+import enumToStr from './Utils'
 
 const styles = theme => ({
   root: {
@@ -18,10 +19,16 @@ const styles = theme => ({
     marginLeft: '30px',
     marginRight: '30px',
   },
+  mxauto: {
+    marginLeft: 'auto',
+    marginRight: 'auto'
+  },
   formControl: {
-    margin: 'auto',
     width: '250px',
   },
+  select: {
+    minHeight: '50px', 
+  },
   chips: {
     display: 'flex',
     flexWrap: 'wrap',
@@ -31,6 +38,8 @@ const styles = theme => ({
   },
   textBox: {
     width: '80px',
+    marginTop: '10px',
+    marginBottom: '2px',
     color: '#403f40',
   }
 });
@@ -48,7 +57,7 @@ class MultipleSelect extends React.Component {
   constructor(props) {
     super(props);
     if (this.props.preset == null) {
-      console.log("preset undefined");
+      // console.log("preset undefined");
       this.state = {
         name: []
       };
@@ -60,7 +69,7 @@ class MultipleSelect extends React.Component {
   }
 
   handleChange = event => {
-    this.setState({ name: event.target.value});
+    this.setState({ name: event.target.value });
   };
 
   handleDelete = event => () => {
@@ -72,41 +81,46 @@ class MultipleSelect extends React.Component {
     });
   }
 
+
+
   render() {
     const { classes, theme } = this.props;
 
     return (
       <FormGroup row className={classes.root}>
-        <p className={classes.textBox}>{this.props.label}</p>
-        <FormControl className={classes.formControl}>
-          <Select
-            multiple
-            value={this.state.name}
-            onChange={this.handleChange}
-            input={<Input id="select-multiple-chip" />}
-            renderValue={selected => (
-              <div className={classes.chips}>
-                {selected.map(value => <Chip key={value} label={value} className={classes.chip} onDelete={this.handleDelete(value)}/>)}
-              </div>
-            )}
-            MenuProps={MenuProps}
-          >
-            {this.props.names.map(name => (
-              <MenuItem
-                key={name}
-                value={name}
-                style={{
-                  fontWeight:
-                    this.state.name.indexOf(name) === -1
-                      ? theme.typography.fontWeightRegular
-                      : theme.typography.fontWeightMedium,
-                }}
-              >
-                {name}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+        <div className={classes.mxauto}>
+          <p className={classes.textBox}>{this.props.label}</p>
+          <FormControl className={classes.formControl}>
+            <Select
+              multiple
+              value={this.props.preset}
+              onChange={this.props.onHandleFeaturesChange}
+              input={<Input id="select-multiple-chip" />}
+              renderValue={selected => (
+                <div className={classes.chips}>
+                  {selected.map(value => <Chip key={value} label={enumToStr(value)} className={classes.chip} onDelete={this.props.onHandleFeaturesDelete(value)}/>)}
+                </div>
+              )}
+              className={classes.select}
+              MenuProps={MenuProps}
+            >
+              {this.props.names.map(name => (
+                <MenuItem
+                  key={name}
+                  value={name}
+                  style={{
+                    fontWeight:
+                      this.props.preset.indexOf(name) === -1
+                        ? theme.typography.fontWeightRegular
+                        : theme.typography.fontWeightMedium,
+                  }}
+                >
+                  {enumToStr(name)}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </div>
       </FormGroup>
     );
   }

myapp/src/ReqlyAppBar.js

@@ -1,31 +1,147 @@
 import React from 'react';
 import SearchBar from './SearchBar'
 import DefaultBar from './DefaultBar'
-
+import SearchModalButton from './SearchModalButton'
+const features_map = [12, 11, 5, 1, 4];
 
 class ReqlyAppBar extends React.Component{
   state = {
-    search: false,
+    search_mode: false,
+    search: this.props.search,
+    food: this.props.food, // 0 is false, 1 is simple.
+    cooktime: this.props.cooktime, // 0 is default, 
+    procedure: this.props.procedure, // 0 is default, 1 is easy.
+    features: this.props.features.filter(a => features_map.indexOf(a) >= 0), // array
+    categories: this.props.features.filter(a => a >= 6 && a <= 10 )
   };
 
   handleChange = event => {
-    console.log("handleChange called!");
-    this.setState({ ['search']: !this.state.search });
+    // console.log("handleChange called!");
+    const search_word = event === undefined ? "" : event ;
+    this.setState({search: search_word, search_mode:  !this.state.search_mode });
   };
 
+  backButton = event => {
+    if (this.state.search_mode) {
+      this.setState({
+        search: "",
+        food: 0,
+        cooktime: 0,
+        procedure: 0,
+        features: [],
+        categories: [],
+        search_mode: false
+      });
+    } else {
+      this.handleChange(event);
+    }
+  }
+
+  closeButton = () => {
+    this.setState({
+      search: "",
+      food: 0,
+      cooktime: 0,
+      procedure: 0,
+      features: [],
+      categories: [],
+      search_mode: true
+    });
+  }
+  handleFilterChange = event => {
+    // console.log(event)
+    if (event === "food") {
+      if (this.state.food === 0) {
+        this.setState({food: 1})
+      } else {
+        this.setState({food: 0})
+      }
+    } else if (event === "cooktime") {
+      if (this.state.cooktime === 0) {
+        this.setState({cooktime: 3})
+      } else {
+        this.setState({cooktime: 0})
+      }
+    } else if (event === "procedure") {
+      if (this.state.procedure === 0) {
+        this.setState({procedure: 1})
+      } else {
+        this.setState({procedure: 0})
+      }
+    }
+  }
+
+  handleFeaturesChange = event => {
+    // console.log(event.target.value)
+    this.setState({ features: event.target.value});
+  };
+
+  handleFeaturesDelete = event => () => {
+    this.setState(state => {
+        const features = [...state.features];
+        const chipToDelete = features.indexOf(event);
+        features.splice(chipToDelete, 1);
+        return { features };
+    });
+  }
+
+  handleCategoriesChange = event => {
+    // console.log(event.target.value)
+    this.setState({ categories: event.target.value});
+  };
+
+  handleCategoriesDelete = event => () => {
+    this.setState(state => {
+        const categories = [...state.categories];
+        const chipToDelete = categories.indexOf(event);
+        categories.splice(chipToDelete, 1);
+        return { categories };
+    });
+  }
+
   render () {
-    if (this.state.search) {
+    if (this.state.search_mode) {
+      // Search mode
+      return (<SearchModalButton
+        onHandleFilterChange={this.handleFilterChange}
+        onHandleChange={this.handleChange}
+        onHandleFeaturesChange={this.handleFeaturesChange}
+        onHandleFeaturesDelete={this.handleFeaturesDelete}
+        onHandleCategoriesChange={this.handleCategoriesChange}
+        onHandleCategoriesDelete={this.handleCategoriesDelete}
+        search={this.state.search}
+        food={this.state.food}
+        cooktime={this.state.cooktime}
+        procedure={this.state.procedure}
+        features={this.state.features}
+        categories={this.state.categories}
+        backButton={this.backButton}
+        closeButton={this.closeButton}
+        />)
+    } else if (this.state.search !== "" || this.state.food !== 0 || this.state.cooktime !== 0 || this.state.procedure !== 0 || this.state.features.length > 0) {
+      // Search Result
       return (
         <SearchBar
           onChange={() => console.log('onChange')}
           onRequestSearch={() => console.log('onRequestSearch')}
           onHandleChange={this.handleChange}
+          value={this.state.search}
+          food={this.state.food}
+          cooktime={this.state.cooktime}
+          procedure={this.state.procedure}
+          search_mode={this.state.search_mode}
+          features={this.state.features}
+          categories={this.state.categories}
+          backButton={this.backButton}
+          closeButton={this.closeButton}
         />
         );
     } else {
+      // Default Bar
       return (
         <DefaultBar
           onHandleChange={this.handleChange}
+          user_sign_in={this.props.user_sign_in}
         />
       );
     }