feat/-focus-mode-(#110) (#168)

* feat: add simple way to add tasks to focus page

* fix: remove unused function

* refactor: leveling > Leveling

* feat: add sidebar link to focus page

* style: 🎨 Leveling

* Rename leveling.ts to Leveling.ts

src/components/ui/DevelopmentOnlyMenu.tsx

@@ -12,8 +12,8 @@ import React, { memo, MouseEvent, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useFirestore } from 'react-redux-firebase';
 import { getUniqueId } from '../../helpers/getUniqueId';
-import LevelingService from '../../services/leveling';
-import { addPointsWithSideEffects } from "../../repositories/addPointsWithSideEffects";
+import LevelingService from '../../services/Leveling';
+import { addPointsWithSideEffects } from '../../repositories/addPointsWithSideEffects';
 import { addPointsToUser } from '../../repositories/addPointsToUser';
 import { Profile } from '../../entities/Profile';
 import { createTask } from '../../repositories/createTask';
@@ -85,8 +85,8 @@ function DevelopmentOnlyMenu() {
   function createAReward() {
     firestore.collection('rewards').add({
       userId: auth.uid,
-      name: loremIpsum({ count: random(1, 5), units: 'words' }),
       points: random(0, 100),
+      name: loremIpsum({ count: random(1, 5), units: 'words' }),
     });
   }
 

src/components/ui/NavBar/NavBar.tsx

@@ -20,7 +20,7 @@ import React, { memo } from 'react';
 import { Else, If, Then } from 'react-if';
 import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
-import LevelingService from '../../../services/leveling';
+import LevelingService from '../../../services/Leveling';
 import { useTypedSelector } from '../../../store';
 import {
   authSelector,

src/components/ui/Sidebar.tsx

@@ -26,6 +26,8 @@ import {
   toggleSidebar,
   useTypedTranslate,
 } from '../../services/index';
+import FocusIcon from '@material-ui/icons/FilterCenterFocus';
+import { useTranslation } from 'react-i18next';
 
 const log = debug('Sidebar');
 const useStyles = makeStyles((theme: Theme) => ({
@@ -57,6 +59,7 @@ const Sidebar: React.FC<{
   const cx = useStyles();
   const history = useHistory();
   const t = useTypedTranslate();
+  const { t: sidebarTranslator } = useTranslation('sidebar');
   log('isLoggedIn: ', isLoggedIn);
   log('isOpen: ', isOpen);
 
@@ -71,9 +74,7 @@ const Sidebar: React.FC<{
     if (!isLoggedIn) history.push('/signin');
     else {
       localStorage.removeItem('userId');
-      getFirebase()
-        .logout()
-        .catch(handleErrors);
+      getFirebase().logout().catch(handleErrors);
     }
   }
 
@@ -99,6 +100,12 @@ const Sidebar: React.FC<{
       classes={{ paper: cx.backgroundColor }}
       onClose={toggleSidebar}
     >
+      <ListItem button onClick={redirectAndCloseSidebar('/focus')}>
+        <ListItemIcon>
+          <FocusIcon />
+        </ListItemIcon>
+        <StyledListText primary={sidebarTranslator('focus_mode')} />
+      </ListItem>
       <List>
         <ListItem button onClick={redirectAndCloseSidebar('/faq')}>
           <ListItemIcon>

src/components/users/ExpirienceProgressBar/ExpirienceProgressBar.tsx

@@ -7,7 +7,7 @@ import get from 'lodash/get';
 import isUndefined from 'lodash/isUndefined';
 import React, { memo } from 'react';
 import { Box, Theme } from '@material-ui/core';
-import LevelingService from '../../../services/leveling';
+import LevelingService from '../../../services/Leveling';
 import { Profile } from '../../../entities/Profile';
 
 const log = debug('ExpirienceProgressBar');

src/locales/en.js

@@ -124,4 +124,7 @@ export default {
     add_any_value: `Add "{{value}}"`,
     pick_or_create_a_task : "Pick or create a task"
   },
+  sidebar: {
+    focus_mode: 'Focus Mode',
+  }
 };

src/locales/ru.js

@@ -127,4 +127,7 @@ export default {
     add_any_value: `Добавить "{{value}}"`,
     pick_or_create_a_task : "Выберите или создайте задачу",
   },
+  sidebar: {
+    focus_mode: 'Режим Фокусировки',
+  }
 };

src/pages/FocusModePage/FocusModePage.tsx

@@ -1,10 +1,12 @@
 import { Box } from '@material-ui/core';
 import React, { memo } from 'react';
+import { If } from 'react-if';
+import useList from 'react-use/lib/useList';
 import { TasksList } from '../../components/tasks/TasksList';
+import { Autocomplete } from '../../components/unsorted/Autocomplete';
 import { WhatDoYouFeelSlider } from '../../components/unsorted/WhatDoYouFeelSlider';
 import { Task } from '../../entities/Task';
-import { If } from 'react-if';
-import { Autocomplete } from '../../components/unsorted/Autocomplete';
+import { getUniqueId } from '../../helpers/getUniqueId';
 import { useTypedTranslate } from '../../services';
 
 export interface FocusModePageProps {
@@ -19,6 +21,7 @@ const FocusModePage = memo(function FocusModePage({
   tasksForAutoComplete = [],
 }: FocusModePageProps) {
   const t = useTypedTranslate();
+  const [tasks, { push }] = useList<Task>([]);
   const autocompleteOptions = tasksForAutoComplete.map((task) => ({
     value: task,
     label: task.name,
@@ -29,10 +32,15 @@ const FocusModePage = memo(function FocusModePage({
       <Autocomplete
         options={autocompleteOptions}
         label={t('pick_or_create_a_task')}
-        onChange={console.log}
+        onChange={(payload) => {
+          push({
+            id: getUniqueId(),
+            name: payload.label,
+          } as Task);
+        }}
       />
       <Box mb={2}>
-        <TasksList tasks={tasksToList} loading={isLoading} />
+        <TasksList tasks={tasks || tasksToList} loading={isLoading} />
       </Box>
       <If condition={!isLoading}>
         <WhatDoYouFeelSlider onChange={console.log} />

src/pages/ProfilePage/ProfilePage.tsx

@@ -21,7 +21,7 @@ import DarkOrLightThemePicker from '../../components/ui/DarkOrLightThemePicker';
 import ToggleEncouragingMessages from '../../components/ui/ToggleEncouragingMessages';
 import { MyUserPoints } from '../../components/users/MyUserPoints';
 import { handleErrors } from '../../services/index';
-import LevelingService from '../../services/leveling';
+import LevelingService from '../../services/Leveling';
 import { Profile } from '../../entities/Profile';
 import { upsertProfile } from '../../repositories/upsertProfile';
 import { authSelector, profileSelector } from '../../store/selectors';

src/repositories/addPointsWithSideEffects.ts

@@ -1,35 +1,31 @@
 import {
   getNewlyUnlockedReward,
-
-
-  showLevelUpAnimation
+  showLevelUpAnimation,
 } from '../services/index';
-import LevelingService from '../services/leveling';
+import LevelingService from '../services/Leveling';
 import {
   authSelector,
   profilePointsSelector,
-  rewardsSelector
+  rewardsSelector,
 } from '../store/selectors';
 import { toggleRewardModal } from '../store/uiSlice';
 import { addPointsToUser } from './addPointsToUser';
 import { store } from '../store/index';
 
-
 export function addPointsWithSideEffects(
   userId: string,
-  points: number
+  points: number,
 ): Promise<void> {
   const state = store.getState();
   const auth = authSelector(state);
   const profilePoints = profilePointsSelector(state);
   const nextReward = getNewlyUnlockedReward(
     profilePoints,
     points,
-    rewardsSelector(state)
+    rewardsSelector(state),
   );
   // TODO refactor
-  if (nextReward)
-    store.dispatch(toggleRewardModal());
+  if (nextReward) store.dispatch(toggleRewardModal());
   if (LevelingService.willUserLevelUp(profilePoints, points)) {
     showLevelUpAnimation();
   }

src/services/leveling.ts → src/services/Leveling.ts

@@ -30,7 +30,7 @@ export default class LevelingService {
   }
 
   static calculatePointsToNextLevel(level: number) {
-    const baseXP = 30
+    const baseXP = 30;
     const exponent = 1.1;
     return baseXP * ((level ^ exponent) | 1);
   }
@@ -45,4 +45,4 @@ export default class LevelingService {
     );
     return levelAfterAddingPoints > currentLevel;
   }
-}
+}

src/services/index.ts

@@ -112,24 +112,14 @@ export function initializeFirebase() {
   } else {
     // Use Firestore emulator for local development
     firebase.firestore().settings({
-      // ssl: false,
-      // host: 'localhost:8080',
+      ssl: false,
+      host: 'localhost:8080',
     });
   }
 
   return firebase;
 }
 
-export function normalizeQueryResponse(
-  snapshot: firebase.firestore.QuerySnapshot,
-) {
-  if (snapshot.empty) return [];
-  return snapshot.docs.map((document) => ({
-    id: document.id,
-    ...document.data(),
-  }));
-}
-
 export function handleErrors(
   e: Error | undefined | firebase.auth.Error,
 ) {
@@ -241,6 +231,8 @@ export function initializeI18n() {
       lng: 'ru',
       debug: false,
       fallbackLng: 'en',
+      // ns: ['translation', 'sidebar'],
+      // defaultNS: 'translation',
       interpolation: {
         // not needed for react as it escapes by default
         escapeValue: false,