feat: add focus mode

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

@@ -9,11 +9,12 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import useInterval from 'react-use/esm/useInterval';
 import RewardModal from './components/rewards/RewardModal';
 import DevelopmentOnlyMenu from './components/ui/DevelopmentOnlyMenu';
+import { GlobalSnackbar } from './components/ui/GlobalSnackbar';
 import NavBar from './components/ui/NavBar/NavBar';
 import Sidebar from './components/ui/Sidebar';
-import { GlobalSnackbar } from './components/unsorted/GlobalSnackbar';
 import { ExpirienceProgressBar } from './components/users/ExpirienceProgressBar';
 import FAQPage from './pages/FAQPage';
+import { FocusModePage } from './pages/FocusModePage';
 import HomePage from './pages/IndexPage/IndexPage';
 import PrivacyPage from './pages/PrivacyPage';
 import { ProfilePageContainer } from './pages/ProfilePage/ProfilePage';
@@ -134,6 +135,14 @@ export default memo((props: { children?: JSX.Element }) => {
           <Route path="/tasks/:taskId">
             <TaskPage />
           </Route>
+          <Route path="/focus">
+            {/* TODO use a container instead of dumb component. */}
+            <FocusModePage
+              tasksToList={[]}
+              isLoading={false}
+              tasksForAutoComplete={[]}
+            />
+          </Route>
           <Route path="/tasks">
             <TasksPage />
           </Route>

src/components/tasks/DayliTasksStreak.tsx

@@ -4,8 +4,8 @@ import debug from 'debug';
 import React, { memo } from 'react';
 import { useTypedTranslate } from '../../services';
 import DailyStreak from '../../services/dailyStreak';
-import { IDayliStreak } from "../../entities/IDayliStreak";
-import { NumbersAnimatedOnUpdate } from '../unsorted/NumbersAnimatedOnUpdate';
+import { IDayliStreak } from '../../entities/IDayliStreak';
+import { NumbersAnimatedOnUpdate } from '../ui/NumbersAnimatedOnUpdate';
 
 const componentName = 'DayliTasksStreak';
 const log = debug(componentName);

src/components/tasks/TasksDoneToday.tsx

@@ -11,8 +11,8 @@ import { Theme, Zoom } from '@material-ui/core';
 import classNames from 'classnames';
 import { useTypedTranslate } from '../../services/index';
 import DayliTasksStreak from './DayliTasksStreak';
-import { IDayliStreak } from "../../entities/IDayliStreak";
-import { NumbersAnimatedOnUpdate } from '../unsorted/NumbersAnimatedOnUpdate';
+import { IDayliStreak } from '../../entities/IDayliStreak';
+import { NumbersAnimatedOnUpdate } from '../ui/NumbersAnimatedOnUpdate';
 
 const useStyles = makeStyles((theme: Theme) => ({
   successIcon: {

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/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,27 @@
+import { Fab } from '@material-ui/core';
+import React, { memo } from 'react';
+import { Icon } from '../../ui/Icon';
+
+export interface EmotionIconButtonProps {
+  type: 'happy_face' | 'sad_face';
+  color?: 'primary' | 'secondary';
+  onClick?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => void;
+}
+
+const EmotionIconButton = memo(function EmotionIconButton({
+  type,
+  color = 'secondary',
+  onClick,
+}: EmotionIconButtonProps) {
+  return (
+    <Fab color={color} onClick={onClick}>
+      <Icon code={type} size="large" />
+    </Fab>
+  );
+});
+
+EmotionIconButton.displayName = 'EmotionIconButton';
+
+export { EmotionIconButton };

src/components/ui/EmotionIconButton/index.ts

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

src/components/unsorted/GlobalSnackbar.stories.tsx → src/components/ui/GlobalSnackbar.stories.tsx

@@ -7,12 +7,12 @@ import {
 
 export default {
   component: GlobalSnackbar,
-  title: `${sections.unsorted}GlobalSnackbar`,
+  title: `${sections.ui}GlobalSnackbar`,
 };
 
 const props = {
   _isOpenForDevPurposes: true,
 } as GlobalSnackbarProps;
 
-export const Demo = args => <GlobalSnackbar {...args} />;
+export const Demo = (args) => <GlobalSnackbar {...args} />;
 Demo.args = props;

src/components/ui/Icon.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { sections } from '../storybookContants';
+import { Icon, IconProps } from './Icon';
+
+export default {
+  component: Icon,
+  title: `${sections.ui}Icon`,
+};
+
+const props = {
+  code: 'happy_face',
+} as IconProps;
+
+export const Demo = (args) => (
+  <div>
+    <Icon code="happy_face" />
+    <Icon code="sad_face" />
+    <h2>Use controls to change: </h2>
+    <Icon {...args} />
+    <h2>Sizes: </h2>
+    <Icon {...args} size="small" />
+    <Icon {...args} size="default" />
+    <Icon {...args} size="big" />
+  </div>
+);
+Demo.args = props;

src/components/ui/Icon.tsx

@@ -0,0 +1,32 @@
+import { Box } from '@material-ui/core';
+import SatisfiedIcon from '@material-ui/icons/SentimentSatisfiedAlt';
+import DissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
+import React, { memo } from 'react';
+
+export type Icons = 'happy_face' | 'sad_face';
+
+export interface IconProps {
+  code: Icons;
+  size?: 'large' | 'small' | 'default';
+}
+
+const Icon = memo(function Icon({
+  code,
+  size = 'default',
+}: IconProps) {
+  function getIconByCode() {
+    switch (code) {
+      case 'happy_face':
+        return <SatisfiedIcon fontSize={size} />;
+      case 'sad_face':
+        return <DissatisfiedIcon fontSize={size} />;
+      default:
+        return <SatisfiedIcon fontSize={size} />;
+    }
+  }
+  return <Box display="flex">{getIconByCode()}</Box>;
+});
+
+Icon.displayName = 'Icon';
+
+export { Icon };

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,92 @@
+import { Box, TextField } from '@material-ui/core';
+import MuiAutocomplete, {
+  createFilterOptions,
+} from '@material-ui/lab/Autocomplete';
+import React, { memo } from 'react';
+
+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,
+) {
+  return (
+    <Box my={2}>
+      <MuiAutocomplete
+        freeSolo
+        clearOnBlur
+        selectOnFocus
+        handleHomeEndKeys
+        options={props.options}
+        renderOption={(i) => i.label}
+        filterOptions={(options, 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') {
+            return props.onChange(newValue);
+          }
+
+          // TODO: rename this.
+          if (newValue?.inputValue) {
+            newValue.label = newValue.inputValue;
+          }
+
+          props.onChange(newValue);
+        }}
+      />
+    </Box>
+  );
+});
+
+Autocomplete.displayName = 'Autocomplete';
+
+export { Autocomplete };

src/components/unsorted/Autocomplete/index.ts

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