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

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

plopfile.js

@@ -17,13 +17,19 @@ module.exports = function (plop) {
             {
                 type: 'add',
                 templateFile: 'templates/DumbComponent.txt',
-                path: './src/components/unsorted/{{pascalCase name}}.tsx',
+                path: './src/components/unsorted/{{pascalCase name}}/{{pascalCase name}}.tsx',
             },
             // Create storybook file.
             {
                 type: 'add',
                 templateFile: 'templates/DumbComponent.stories.txt',
-                path: './src/components/unsorted/{{pascalCase name}}.stories.tsx',
+                path: './src/components/unsorted/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
+            },
+            // Create index file.
+            {
+                type: 'add',
+                templateFile: 'templates/DumbComponent.index.txt',
+                path: './src/components/unsorted/{{pascalCase name}}/index.ts',
             },
         ],
     });

src/RouterAndDataLoader.tsx

@@ -136,7 +136,7 @@ export default memo((props: { children?: JSX.Element }) => {
             <TaskPage />
           </Route>
           <Route path="/focus">
-            <FocusModePage />
+            <FocusModePage tasks={[]} isLoading={false} />
           </Route>
           <Route path="/tasks">
             <TasksPage />

src/components/tasks/TasksList/TasksList.tsx

@@ -11,8 +11,6 @@ import React, { useState } from 'react';
 import { When } from 'react-if';
 import { tasksPerPage } from '../../../contants';
 import { Task } from '../../../entities/Task';
-import { useTypedSelector } from '../../../store/index';
-import { tasksSelector } from '../../../store/selectors';
 import { TasksListItem } from '../TasksListItem';
 
 const log = debug('TasksList');
@@ -85,16 +83,3 @@ function useStyles() {
     };
   })();
 }
-
-// TODO #125 add props types
-export default function TasksListContainer(props: any) {
-  const tasks = useTypedSelector(tasksSelector);
-
-  const mergeProps = {
-    ...props,
-    tasks,
-    loading: tasks === undefined,
-  };
-
-  return <TasksList {...mergeProps} />;
-}

src/components/tasks/TasksList/index.ts

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

src/components/ui/Sidebar.stories.tsx

@@ -7,4 +7,4 @@ export default {
   title: `${sections.ui}Sidebar`,
 };
 
-export const Normal = () => <Sidebar isOpen isLoggedIn isTasksListEmpty />;
+export const Normal = () => <Sidebar isOpen isLoggedIn />;

src/components/unsorted/Autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { sections } from '../../storybookContants';
+import { Autocomplete, AutocompleteProps } from './Autocomplete';
+
+export default {
+  component: Autocomplete,
+  title: `${sections.unsorted}Autocomplete`,
+};
+
+const props: AutocompleteProps = {
+  label: 'Movies',
+  onChange: console.log,
+  options: [
+    { label: 'The Godfather', value: 1972 },
+    { label: 'The Shawshank Redemption', value: 1994 },
+  ],
+};
+
+export const Demo = (args) => <Autocomplete {...args} />;
+Demo.args = props;

src/components/unsorted/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,99 @@
+import React, { memo } from 'react';
+import { makeStyles } from '@material-ui/styles';
+import { Box, TextField, Theme } from '@material-ui/core';
+import MuiAutocomplete, {
+  createFilterOptions,
+} from '@material-ui/lab/Autocomplete';
+
+const useStyles = makeStyles((theme: Theme) => ({ root: {} }));
+
+interface OptionType {
+  value: any;
+  label: string;
+  inputValue?: string;
+}
+
+export interface AutocompleteProps {
+  label: string;
+  options: OptionType[];
+  onChange: (value: any) => void;
+}
+
+const filter = createFilterOptions<OptionType>();
+
+const Autocomplete = memo(function Autocomplete(
+  props: AutocompleteProps,
+) {
+  const classes = useStyles();
+
+  return (
+    <Box className={classes.root}>
+      <MuiAutocomplete
+        freeSolo
+        clearOnBlur
+        selectOnFocus
+        handleHomeEndKeys
+        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
+          if (params.inputValue !== '') {
+            filtered.push({
+              // TODO this.
+              value: {},
+              inputValue: params.inputValue,
+              // TODO: i18n
+              label: `Add "${params.inputValue}"`,
+            });
+          }
+
+          return filtered;
+        }}
+        getOptionLabel={(option) => {
+          // Value selected with enter, right from the input
+          if (typeof option === 'string') {
+            return option;
+          }
+          // Add "xxx" option created dynamically
+          if (option.inputValue) {
+            return option.inputValue;
+          }
+          // Regular option
+          return option.label;
+        }}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            fullWidth
+            variant="outlined"
+            label={props.label}
+          />
+        )}
+        onChange={(event, newValue, reason) => {
+          if (reason !== 'select-option') {
+            return;
+          }
+
+          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);
+          }
+        }}
+      />
+    </Box>
+  );
+});
+
+Autocomplete.displayName = 'Autocomplete';
+
+export { Autocomplete };

src/components/unsorted/Autocomplete/index.ts

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

src/components/unsorted/WhatDoYouFeelSlider.stories.tsx

@@ -1,13 +1,18 @@
 import React from 'react';
 import { sections } from '../storybookContants';
-import { WhatDoYouFeelSlider } from './WhatDoYouFeelSlider';
+import {
+  WhatDoYouFeelSlider,
+  WhatDoYouFeelSliderProps,
+} from './WhatDoYouFeelSlider';
 
 export default {
   component: WhatDoYouFeelSlider,
   title: `${sections.ui}WhatDoYouFeelSlider`,
 };
 
-const props = {};
+const props: WhatDoYouFeelSliderProps = {
+  onChange: console.log,
+};
 
 export const Demo = (args) => <WhatDoYouFeelSlider {...args} />;
 Demo.args = props;

src/components/unsorted/WhatDoYouFeelSlider.tsx

@@ -1,15 +1,17 @@
+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 React, { memo } from 'react';
 
-interface WhatDoYouFeelSliderProps {}
+export interface WhatDoYouFeelSliderProps {
+  onChange: (value: number) => void;
+}
 
 const WhatDoYouFeelSlider = memo(function WhatDoYouFeelSlider(
   props: WhatDoYouFeelSliderProps,
 ) {
   return (
-    <Box mt={10}>
+    <Box>
       <Grid item container justify="space-between">
         <Grid item xs={2}>
           <Box textAlign="center">
@@ -19,14 +21,18 @@ const WhatDoYouFeelSlider = memo(function WhatDoYouFeelSlider(
           </Box>
         </Grid>
         <Grid item xs>
-          <Slider
-            min={0}
-            max={100}
-            step={25}
-            defaultValue={0}
-            valueLabelDisplay="off"
-            onChangeCommitted={console.log}
-          />
+          <Box mt="15px">
+            <Slider
+              min={0}
+              max={100}
+              step={25}
+              defaultValue={0}
+              valueLabelDisplay="off"
+              onChangeCommitted={(event, value) =>
+                props.onChange(value as number)
+              }
+            />
+          </Box>
         </Grid>
         <Grid item xs={2}>
           <Box textAlign="center">

src/pages/FocusModePage/FocusModePage.stories.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
 import { sections } from '../../components/storybookContants';
-import { FocusModePage } from './FocusModePage';
+import { FocusModePage, FocusModePageProps } from './FocusModePage';
+import { tasksMock } from '../../components/dataMocks';
 
 export default {
   component: FocusModePage,
   title: sections.pages + 'FocusModePage',
 };
 
-const props = {};
+const props = {
+  isLoading: false,
+  tasks: tasksMock,
+} as FocusModePageProps;
 
 export const Demo = (args) => <FocusModePage {...args} />;
 Demo.args = props;

src/pages/FocusModePage/FocusModePage.tsx

@@ -1,22 +1,31 @@
+import { Box } from '@material-ui/core';
 import React, { memo } from 'react';
-import { Box, Theme } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
+import { TasksList } from '../../components/tasks/TasksList';
+import { WhatDoYouFeelSlider } from '../../components/unsorted/WhatDoYouFeelSlider';
+import { Task } from '../../entities/Task';
+import { If } from 'react-if';
 
-const useStyles = makeStyles((theme: Theme) => ({ root: {} }));
+export interface FocusModePageProps {
+  tasks: Task[];
+  isLoading: boolean;
+}
 
-interface Props {
-};
-
-const FocusModePage = memo((props: Props) => {
-    const classes = useStyles();
-
-    return (
-        <Box className={classes.root}>
-            Boilerplate is ready for you to work on.
-        </Box>
-    );
+const FocusModePage = memo(function FocusModePage({
+  tasks,
+  isLoading,
+}: FocusModePageProps) {
+  return (
+    <Box>
+      <Box mb={2}>
+        <TasksList tasks={tasks} loading={isLoading} />
+      </Box>
+      <If condition={!isLoading}>
+        <WhatDoYouFeelSlider onChange={console.log} />
+      </If>
+    </Box>
+  );
 });
 
 FocusModePage.displayName = 'FocusModePage';
 
-export { FocusModePage }
+export { FocusModePage };

src/pages/IndexPage/IndexPage.tsx

@@ -14,14 +14,14 @@ import { isLoaded } from 'react-redux-firebase';
 import CreateTaskFab from '../../components/tasks/CreateTaskFab';
 import { TagsList } from '../../components/tasks/TagsList';
 import TasksDoneToday from '../../components/tasks/TasksDoneToday';
-import { TasksList } from '../../components/tasks/TasksList/TasksList';
+import { TasksList } from '../../components/tasks/TasksList';
 import AppTour from '../../components/ui/AppTour';
 import WelcomeCard from '../../components/ui/WelcomeCard';
 import { useScreenIsNarrow } from '../../services/index';
 import { useSelector } from 'react-redux';
-import { IDayliStreak } from "../../entities/IDayliStreak";
-import { TaskHistory } from "../../entities/TaskHistory";
-import { Task } from "../../entities/Task";
+import { IDayliStreak } from '../../entities/IDayliStreak';
+import { TaskHistory } from '../../entities/TaskHistory';
+import { Task } from '../../entities/Task';
 import {
   authSelector,
   profileSelector,

src/pages/TasksPage.tsx

@@ -5,7 +5,7 @@ import React, { memo } from 'react';
 import { Theme } from '@material-ui/core';
 import { useTypedSelector } from '../store';
 import { tasksSelector } from '../store/selectors';
-import { TasksList } from '../components/tasks/TasksList/TasksList';
+import { TasksList } from '../components/tasks/TasksList';
 
 const log = debug('RewardsPage');
 const useStyles = makeStyles((theme: Theme) => ({