Merge branch 'feat/-focus-mode-(#110)' of https://github.com/Undeadlo…

…l1/flow-todo into feat/-focus-mode-(#110)

package.json

@@ -18,7 +18,7 @@
     "@types/babel__core": "^7.1.12",
     "@types/classnames": "^2.2.11",
     "@types/debug": "^4.1.5",
-    "@types/eslint": "^7.2.4",
+    "@types/eslint": "^7.2.5",
     "@types/eslint-plugin-prettier": "^3.1.0",
     "@types/faker": "^5.1.4",
     "@types/jest": "^26.0.15",
@@ -65,6 +65,7 @@
     "react-i18next": "^11.7.3",
     "react-if": "^4.0.1",
     "react-joyride": "^2.1.1",
+    "react-kawaii": "^0.16.0",
     "react-mailto.js": "^2.1.0",
     "react-redux": "^7.2.2",
     "react-redux-firebase": "^3.0.5",

src/@types/libraries.d.ts

@@ -1,2 +1,3 @@
 declare module 'react-use-toggle';
+declare module 'react-kawaii';
 declare module 'react-firebaseui-localized';

src/RouterAndDataLoader.tsx

@@ -135,7 +135,12 @@ export default memo((props: { children?: JSX.Element }) => {
             <TaskPage />
           </Route>
           <Route path="/focus">
-            <FocusModePage tasks={[]} isLoading={false} />
+            {/* TODO use a container instead of dumb component. */}
+            <FocusModePage
+              tasksToList={[]}
+              isLoading={false}
+              tasksForAutoComplete={[]}
+            />
           </Route>
           <Route path="/tasks">
             <TasksPage />

src/components/ui/EmotionIconButton/EmotionIconButton.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { sections } from '../../storybookContants';
+import {
+  EmotionIconButton,
+  EmotionIconButtonProps,
+} from '../EmotionIconButton';
+
+export default {
+  component: EmotionIconButton,
+  title: `${sections.ui}EmotionIconButton`,
+};
+
+const props = {
+  type: 'happy_face',
+  onClick: console.log,
+} as EmotionIconButtonProps;
+
+export const Demo = (args) => <EmotionIconButton {...args} />;
+Demo.args = props;

src/components/ui/EmotionIconButton/EmotionIconButton.tsx

@@ -0,0 +1,50 @@
+import { IconButton, useTheme } from '@material-ui/core';
+import React, { memo } from 'react';
+import { Planet } from 'react-kawaii';
+
+type EmotionTypes = 'happy_face' | 'sad_face';
+
+export interface EmotionIconButtonProps {
+  type: EmotionTypes;
+  onClick?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => void;
+}
+const EmotionIconButton = memo(function EmotionIconButton({
+  type,
+  onClick,
+}: EmotionIconButtonProps) {
+  const theme = useTheme();
+
+  function geticon() {
+    const kawaiiIconSize = 75;
+    switch (type) {
+      case 'happy_face':
+        return (
+          <Planet
+            mood="happy"
+            size={kawaiiIconSize}
+            color={theme.palette.primary.main}
+          />
+        );
+      case 'sad_face':
+        return (
+          <Planet
+            mood="sad"
+            size={kawaiiIconSize}
+            color={theme.palette.secondary.main}
+          />
+        );
+    }
+  }
+
+  return (
+    <IconButton style={{ padding: 0 }} onClick={onClick}>
+      {geticon()}
+    </IconButton>
+  );
+});
+
+EmotionIconButton.displayName = 'EmotionIconButton';
+
+export { EmotionIconButton };

src/components/ui/EmotionIconButton/index.ts

@@ -0,0 +1 @@
+export * from './EmotionIconButton';

src/components/ui/Icon.tsx

@@ -1,11 +1,8 @@
-import { Box, Theme } from '@material-ui/core';
+import { Box } from '@material-ui/core';
 import SatisfiedIcon from '@material-ui/icons/SentimentSatisfiedAlt';
 import DissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
-import { makeStyles } from '@material-ui/styles';
 import React, { memo } from 'react';
 
-const useStyles = makeStyles((theme: Theme) => ({ root: {} }));
-
 export type Icons = 'happy_face' | 'sad_face';
 
 export interface IconProps {
@@ -17,7 +14,6 @@ const Icon = memo(function Icon({
   code,
   size = 'default',
 }: IconProps) {
-  const classes = useStyles();
   function getIconByCode() {
     switch (code) {
       case 'happy_face':
@@ -28,7 +24,7 @@ const Icon = memo(function Icon({
         return <SatisfiedIcon fontSize={size} />;
     }
   }
-  return <Box className={classes.root}>{getIconByCode()}</Box>;
+  return <Box display="flex">{getIconByCode()}</Box>;
 });
 
 Icon.displayName = 'Icon';

src/components/unsorted/Autocomplete/Autocomplete.tsx

@@ -1,11 +1,8 @@
-import React, { memo } from 'react';
-import { makeStyles } from '@material-ui/styles';
-import { Box, TextField, Theme } from '@material-ui/core';
+import { Box, TextField } from '@material-ui/core';
 import MuiAutocomplete, {
   createFilterOptions,
 } from '@material-ui/lab/Autocomplete';
-
-const useStyles = makeStyles((theme: Theme) => ({ root: {} }));
+import React, { memo } from 'react';
 
 interface OptionType {
   value: any;
@@ -24,10 +21,8 @@ const filter = createFilterOptions<OptionType>();
 const Autocomplete = memo(function Autocomplete(
   props: AutocompleteProps,
 ) {
-  const classes = useStyles();
-
   return (
-    <Box className={classes.root}>
+    <Box my={2}>
       <MuiAutocomplete
         freeSolo
         clearOnBlur
@@ -36,7 +31,6 @@ const Autocomplete = memo(function Autocomplete(
         options={props.options}
         renderOption={(i) => i.label}
         filterOptions={(options, params) => {
-          console.log('params: ', params);
           const filtered = filter(options, params);
 
           // Suggest the creation of a new value
@@ -78,16 +72,15 @@ const Autocomplete = memo(function Autocomplete(
           }
 
           if (typeof newValue === 'string') {
-            props.onChange(newValue);
-          } else {
-            console.log('on change newValue: ', newValue);
-            // TODO: rename this.
-            if (newValue?.inputValue) {
-              newValue.label = newValue.inputValue;
-            }
-            console.log('newValue.value: ', newValue?.value);
-            props.onChange(newValue);
+            return props.onChange(newValue);
           }
+
+          // TODO: rename this.
+          if (newValue?.inputValue) {
+            newValue.label = newValue.inputValue;
+          }
+
+          props.onChange(newValue);
         }}
       />
     </Box>

src/components/unsorted/WhatDoYouFeelAboutTheTask.tsx

@@ -3,31 +3,22 @@ import {
   Card,
   CardContent,
   CardHeader,
-  Fab,
   Grid,
-  Theme,
 } from '@material-ui/core';
-import SatisfiedIcon from '@material-ui/icons/SentimentSatisfiedAlt';
-import DissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
-import { makeStyles } from '@material-ui/styles';
 import classNames from 'classnames';
 import React, { memo } from 'react';
 import { Link, useRouteMatch } from 'react-router-dom';
 import { useTypedTranslate } from '../../services';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {},
-}));
+import { EmotionIconButton } from '../ui/EmotionIconButton';
 
 interface Props {
   className?: string;
 }
 
 const WhatDoYouFeelAboutTheTask = memo((props: Props) => {
-  const classes = useStyles();
   const t = useTypedTranslate();
   const { url } = useRouteMatch() || { url: '' };
-  const rootClasses = classNames(classes.root, props.className);
+  const rootClasses = classNames(props.className);
 
   return (
     <Box className={rootClasses} width="100%" textAlign="center">
@@ -36,22 +27,14 @@ const WhatDoYouFeelAboutTheTask = memo((props: Props) => {
         <CardContent>
           <Grid item container xs={12}>
             <Grid item xs>
-              <Fab
-                component={Link}
-                color="secondary"
-                to={`${url}/isGood`}
-              >
-                <SatisfiedIcon fontSize="large" />
-              </Fab>
+              <Link to={`${url}/isGood`}>
+                <EmotionIconButton type="happy_face" />
+              </Link>
             </Grid>
             <Grid item xs>
-              <Fab
-                component={Link}
-                color="primary"
-                to={`${url}/isTroublesome`}
-              >
-                <DissatisfiedIcon fontSize="large" />
-              </Fab>
+              <Link to={`${url}/isTroublesome`}>
+                <EmotionIconButton type="sad_face" />
+              </Link>
             </Grid>
           </Grid>
         </CardContent>

src/components/unsorted/WhatDoYouFeelSlider.tsx

@@ -1,7 +1,6 @@
+import { Box, Grid, Slider } from '@material-ui/core';
 import React, { memo } from 'react';
-import { Box, Fab, Grid, Slider } from '@material-ui/core';
-import SatisfiedIcon from '@material-ui/icons/SentimentSatisfiedAlt';
-import DissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
+import { EmotionIconButton } from '../ui/EmotionIconButton';
 
 export interface WhatDoYouFeelSliderProps {
   onChange: (value: number) => void;
@@ -15,9 +14,7 @@ const WhatDoYouFeelSlider = memo(function WhatDoYouFeelSlider(
       <Grid item container justify="space-between">
         <Grid item xs={2}>
           <Box textAlign="center">
-            <Fab color="secondary">
-              <DissatisfiedIcon fontSize="large" />
-            </Fab>
+            <EmotionIconButton type="sad_face" />
           </Box>
         </Grid>
         <Grid item xs>
@@ -36,9 +33,7 @@ const WhatDoYouFeelSlider = memo(function WhatDoYouFeelSlider(
         </Grid>
         <Grid item xs={2}>
           <Box textAlign="center">
-            <Fab color="primary">
-              <SatisfiedIcon fontSize="large" />
-            </Fab>
+            <EmotionIconButton type="happy_face" />
           </Box>
         </Grid>
       </Grid>

src/pages/FocusModePage/FocusModePage.stories.tsx

@@ -10,7 +10,8 @@ export default {
 
 const props = {
   isLoading: false,
-  tasks: tasksMock,
+  tasksToList: tasksMock,
+  tasksForAutoComplete: tasksMock,
 } as FocusModePageProps;
 
 export const Demo = (args) => <FocusModePage {...args} />;

src/pages/FocusModePage/FocusModePage.tsx

@@ -4,20 +4,34 @@ import { TasksList } from '../../components/tasks/TasksList';
 import { WhatDoYouFeelSlider } from '../../components/unsorted/WhatDoYouFeelSlider';
 import { Task } from '../../entities/Task';
 import { If } from 'react-if';
+import { Autocomplete } from '../../components/unsorted/Autocomplete';
 
 export interface FocusModePageProps {
-  tasks: Task[];
   isLoading: boolean;
+  tasksToList: Task[];
+  tasksForAutoComplete: Task[];
 }
 
 const FocusModePage = memo(function FocusModePage({
-  tasks,
-  isLoading,
+  isLoading = false,
+  tasksToList = [],
+  tasksForAutoComplete = [],
 }: FocusModePageProps) {
+  const autocompleteOptions = tasksForAutoComplete.map((task) => ({
+    value: task,
+    label: task.name,
+  }));
+
   return (
     <Box>
+      <Autocomplete
+        options={autocompleteOptions}
+        // TODO i18n
+        label="Pick or create a task"
+        onChange={console.log}
+      />
       <Box mb={2}>
-        <TasksList tasks={tasks} loading={isLoading} />
+        <TasksList tasks={tasksToList} loading={isLoading} />
       </Box>
       <If condition={!isLoading}>
         <WhatDoYouFeelSlider onChange={console.log} />