Merge remote-tracking branch 'origin/master' into feat/-focus-mode-(#110

)

package.json

@@ -37,7 +37,7 @@
     "@types/react-test-renderer": "^16.9.1",
     "@types/yup": "^0.29.9",
     "array-move": "^3.0.1",
-    "chromatic": "^5.3.0",
+    "chromatic": "^5.4.0",
     "classnames": "^2.2.6",
     "clsx": "^1.0.4",
     "date-fns": "^2.16.1",
@@ -61,7 +61,7 @@
     "react-countup": "^4.2.3",
     "react-dom": "^16.14.0",
     "react-firebaseui-localized": "^1.0.8",
-    "react-hook-form": "^6.11.2",
+    "react-hook-form": "^6.11.3",
     "react-i18next": "^11.7.3",
     "react-if": "^4.0.1",
     "react-joyride": "^2.1.1",
@@ -134,8 +134,8 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@types/enzyme": "^3.10.8",
     "@types/enzyme-adapter-react-16": "^1.0.5",
-    "@typescript-eslint/eslint-plugin": "^4.7.0",
-    "@typescript-eslint/parser": "^4.7.0",
+    "@typescript-eslint/eslint-plugin": "^4.8.0",
+    "@typescript-eslint/parser": "^4.8.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.1",
     "babel-plugin-import": "^1.13.1",

src/components/tasks/DayliTasksStreakForm.tsx

@@ -5,10 +5,12 @@ import debug from 'debug';
 import Snackbar from '../../services/Snackbar';
 import { useSelector } from 'react-redux';
 import { upsertProfile } from '../../repositories/upsertProfile';
+import { useTypedTranslate } from '../../services';
 
 const log = debug('DayliTasksStreakForm');
 
 function DayliTasksStreakForm() {
+  const t = useTypedTranslate();
   const profile = useSelector(profileSelector);
   const tasksPerDay = profile?.dailyStreak?.perDay;
 
@@ -44,9 +46,7 @@ function DayliTasksStreakForm() {
           name="perDay"
           autoComplete="off"
           disabled={!profile?.userId}
-          // TODO i18n
-          label="Задач в день"
-          // label={t('')}
+          label={t('tasks_per_day')}
           defaultValue={tasksPerDay}
           onChange={onChange}
         />

src/components/ui/Fab.tsx

@@ -5,7 +5,7 @@ import cx from 'clsx';
 import React, { memo } from 'react';
 
 export const useFabStyles = makeStyles((theme: Theme) => ({
-  fab: {
+  root: {
     zIndex: 1300,
     position: 'fixed',
     [theme.breakpoints.down('sm')]: {
@@ -35,7 +35,7 @@ const Fab = ({ isHidden, ...props }: Props) => {
     <MUIFab
       color="primary"
       {...props}
-      className={cx([classes.fab, props.className])}
+      className={cx([classes.root, props.className])}
     />
   );
 };

src/components/ui/ToggleEncouragingMessages.tsx

@@ -3,34 +3,35 @@ import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import FormControl from '@material-ui/core/FormControl';
 import React, { memo } from 'react';
+import { useTypedTranslate } from '../../services';
 
 interface Props {
   value: boolean;
   isLoading?: boolean;
   onChange: (checked: boolean) => void;
 }
 
-const ToggleEncouragingMessages = memo((props: Props) => (
-  <Card>
-    <CardContent>
-      <FormControl fullWidth>
-        {/* TODO i18n */}
-        <FormControlLabel
-          control={(
-            <Switch
-                // TODO
-              name="checkedA"
-              disabled={props.isLoading}
-              checked={!props.value}
-              onChange={e => props.onChange(!e.target.checked)}
-            />
-            )}
-            // TODO i18n
-          label="Мотивационные сообщения экрана с задачей"
-        />
-      </FormControl>
-    </CardContent>
-  </Card>
-  ));
+const ToggleEncouragingMessages = memo((props: Props) => {
+  const t = useTypedTranslate();
+  return (
+    <Card>
+      <CardContent>
+        <FormControl fullWidth>
+          <FormControlLabel
+            control={
+              <Switch
+                name="checkedA"
+                checked={!props.value}
+                disabled={props.isLoading}
+                onChange={(e) => props.onChange(!e.target.checked)}
+              />
+            }
+            label={t('motivational_messages_of_task_page')}
+          />
+        </FormControl>
+      </CardContent>
+    </Card>
+  );
+});
 
 export default ToggleEncouragingMessages;

src/components/unsorted/Autocomplete/Autocomplete.tsx

@@ -3,6 +3,7 @@ import MuiAutocomplete, {
   createFilterOptions,
 } from '@material-ui/lab/Autocomplete';
 import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 interface OptionType {
   value: any;
@@ -21,6 +22,7 @@ const filter = createFilterOptions<OptionType>();
 const Autocomplete = memo(function Autocomplete(
   props: AutocompleteProps,
 ) {
+  const { t } = useTranslation();
   return (
     <Box my={2}>
       <MuiAutocomplete
@@ -33,14 +35,13 @@ const Autocomplete = memo(function Autocomplete(
         filterOptions={(options, params) => {
           const filtered = filter(options, params);
 
-          // Suggest the creation of a new value
+          // Suggest the creation of a new value.
           if (params.inputValue !== '') {
             filtered.push({
               // TODO this.
               value: {},
               inputValue: params.inputValue,
-              // TODO: i18n
-              label: `Add "${params.inputValue}"`,
+              label: t('add_any_value', { value: params.inputValue }),
             });
           }
 

src/locales/en.js

@@ -119,5 +119,9 @@ export default {
     reject_the_task: 'Reject the task',
     dont_hesitate_to_push_this_button: 'Don\'t hesitate to push this button.',
     only_20_percent_gives_results: 'Only 20% of efforts give us 80% of results.',
+    tasks_per_day: 'Tasks per day',
+    motivational_messages_of_task_page: 'Motivational messages of task page',
+    add_any_value: `Add "{{value}}"`,
+    pick_or_create_a_task : "Pick or create a task"
   },
 };

src/locales/ru.js

@@ -122,5 +122,9 @@ export default {
     reject_the_task: 'Откажитесь от задачи',
     dont_hesitate_to_push_this_button: 'Не стесняйтесь жать эту кнопку.',
     only_20_percent_gives_results: 'Лишь 20% усилий дают 80% результата.',
+    tasks_per_day: 'Задач в день',
+    motivational_messages_of_task_page :"Мотивационные сообщения экрана с задачей",
+    add_any_value: `Добавить "{{value}}"`,
+    pick_or_create_a_task : "Выберите или создайте задачу",
   },
 };

src/pages/FAQPage.tsx

@@ -69,17 +69,17 @@ const FAQPage = memo(() => {
         {data.map(([question, ...answerParagpraphs], index) => (
           <Accordion key={index}>
             <AccordionSummary
+              id="panel1a-header"
               expandIcon={<ExpandMoreIcon />}
               aria-controls="panel1a-content"
-              id="panel1a-header"
             >
               <Typography variant="subtitle1" component="h2">
                 {question}
               </Typography>
             </AccordionSummary>
             <AccordionDetails>
               <Box key={index}>
-                {answerParagpraphs.map(answer => (
+                {answerParagpraphs.map((answer) => (
                   <Typography key={answer} paragraph>
                     {answer}
                   </Typography>

src/pages/FocusModePage/FocusModePage.tsx

@@ -5,6 +5,7 @@ import { WhatDoYouFeelSlider } from '../../components/unsorted/WhatDoYouFeelSlid
 import { Task } from '../../entities/Task';
 import { If } from 'react-if';
 import { Autocomplete } from '../../components/unsorted/Autocomplete';
+import { useTypedTranslate } from '../../services';
 
 export interface FocusModePageProps {
   isLoading: boolean;
@@ -17,6 +18,7 @@ const FocusModePage = memo(function FocusModePage({
   tasksToList = [],
   tasksForAutoComplete = [],
 }: FocusModePageProps) {
+  const t = useTypedTranslate();
   const autocompleteOptions = tasksForAutoComplete.map((task) => ({
     value: task,
     label: task.name,
@@ -26,8 +28,7 @@ const FocusModePage = memo(function FocusModePage({
     <Box>
       <Autocomplete
         options={autocompleteOptions}
-        // TODO i18n
-        label="Pick or create a task"
+        label={t('pick_or_create_a_task')}
         onChange={console.log}
       />
       <Box mb={2}>

src/pages/TaskPage/TaskPageFABMenu.tsx

@@ -20,10 +20,12 @@ import {
   useTypedTranslate,
 } from '../../services/index';
 
-const useStyles = makeStyles((theme: Theme) => createStyles({
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
     root: {},
     speedDial: {},
-  }));
+  }),
+);
 
 interface Props {
   taskId?: string;
@@ -68,21 +70,19 @@ export default function TaskPageFABMenu(props: Props) {
     <div className={classes.root}>
       <Backdrop open={open} />
       <SpeedDial
-        //   TODO: i18n
-        ariaLabel="SpeedDial tooltip example"
-        // TODO: change name to "root"
-        className={fabClasses.fab}
-        icon={(
+        open={open}
+        ariaLabel="FAB Menu"
+        className={fabClasses.root}
+        icon={
           <SpeedDialIcon
             icon={<MoreVertIcon />}
             openIcon={<CloseIcon />}
-          />
-        )}
-        open={open}
+          />
+        }
         onOpen={() => toggleOpen(true)}
         onClose={() => toggleOpen(false)}
       >
-        {actions.map(action => (
+        {actions.map((action) => (
           <SpeedDialAction
             key={action.name}
             tooltipOpen

src/store/selectors.ts

@@ -11,12 +11,10 @@ import uniq from 'lodash/uniq';
 import includes from 'ramda/es/includes';
 import { FirebaseReducer } from 'react-redux-firebase';
 import { createSelector } from 'reselect';
-import {
-  RootReducer,
-} from './index';
-import { IDayliStreak } from "../entities/IDayliStreak";
-import { TaskHistory } from "../entities/TaskHistory";
-import { Task } from "../entities/Task";
+import { RootReducer } from './index';
+import { IDayliStreak } from '../entities/IDayliStreak';
+import { TaskHistory } from '../entities/TaskHistory';
+import { Task } from '../entities/Task';
 import { Profile } from '../entities/Profile';
 import { Reward } from './rewardsSlice';
 import { SnackbarsState } from './snackbarsSlice';
@@ -48,10 +46,6 @@ export const tasksDoneTodaySelector = createSelector(
 export const excludedTagsSelector = (state: RootReducer) =>
   state.tasks.excludedTags;
 
-// TODO is this needed? How do we determine if tags are active?
-export const activeTagsSelector = (state: RootReducer) =>
-  state.tasks.activeTags;
-
 export const tasksSelector = createSelector(
   fetchedTasksSelector,
   excludedTagsSelector,

src/store/tasksSlice.ts

@@ -1,24 +1,19 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import xor from 'lodash/xor';
-import { Task } from "../entities/Task";
+import { Task } from '../entities/Task';
 
-// TODO remove unused properties
 interface TasksState {
   tasks?: Task[];
   loading: boolean;
   error: string | null;
   // NOTE: there might be a situation where only one array is used
-  // TODO: make sure only relevant code exists
-  activeTags: string[];
-  // TODO: change to "inactiveTags"?
   excludedTags: string[];
 }
 
 const initialState: TasksState = {
   tasks: [],
   error: null,
   loading: false,
-  activeTags: [],
   excludedTags: [],
 };