Feat/activate refactor

src/Components/PackageOverview/PackageOverview.jsx

@@ -24,11 +24,18 @@ const PackageOverview = ({ data }) => {
           translatedWordLanguage: data.translatedWordLanguage,
           //using fixed value until server gives us this property
           languagePackageId: data.id,
+          groupIds: [],
           vocabsToday: data.stats.vocabularies.learnedToday.dueToday,
           staged,
+          onlyActivated: !staged,
+          customLearning: false,
         })
       );
-      history.push("/learn/direction/");
+      if (staged) {
+        history.push("/learn/selection/staged/");
+      } else {
+        history.push("/learn/direction/");
+      }
     },
     [
       data.foreignWordLanguage,

src/i18n/locales/en/default.json

@@ -31,6 +31,7 @@
     "serverNotResponding": "The server is not responding",
     "successMessage": "Success",
     "fetchError": "Something went wrong, please try again later",
+    "internalServerError": "Internal Server Error",
     "paginationPage": "Page {{page}} of {{pageLength}}",
     "paginationShow": "Show {{size}}",
     "learn": "Learn",
@@ -103,6 +104,9 @@
       "unactivated": "Not activated:",
       "today": "Today:"
     },
+    "groupSelection": {
+      "startActivating": "Start activating"
+    },
     "validServerIndicator": {
       "validServer": "✓ valid server (v{{version}})",
       "serverNotVocascanServer": "✗ server isn't a vocascan server",
@@ -362,10 +366,11 @@
       "title": "Progress"
     },
     "custom": {
-      "title": "Custom learning"
+      "title": "Custom learning",
+      "onlyActivatedVocabs": "Only activated vocabs"
     },
     "about": {
-      "title": "About vocascan"
+      "title": "About Vocascan"
     }
   },
   "nav": {

src/redux/Actions/index.js

@@ -23,3 +23,4 @@ export const SET_QUERY_CORRECT = "SET_QUERY_CORRECT";
 export const SET_QUERY_WRONG = "SET_QUERY_WRONG";
 export const SET_ACTUAL_PROGRESS = "SET_ACTUAL_PROGRESS";
 export const CLEAR_QUERY = "CLEAR_QUERY";
+export const SET_GROUP_IDS = "SET_GROUP_IDS";

src/redux/Actions/query.js

@@ -4,23 +4,30 @@ import {
   SET_QUERY_WRONG,
   CLEAR_QUERY,
   SET_ACTUAL_PROGRESS,
+  SET_GROUP_IDS,
 } from "./index.js";
 
 export const setLearnedPackage = ({
   foreignWordLanguage,
   translatedWordLanguage,
   languagePackageId,
+  groupIds,
   vocabsToday,
   staged,
+  onlyActivated,
+  customLearning,
 }) => {
   return {
     type: SET_LEARNED_PACKAGE,
     payload: {
       foreignWordLanguage,
       translatedWordLanguage,
       languagePackageId,
+      groupIds,
       vocabsToday,
       staged,
+      onlyActivated,
+      customLearning,
     },
   };
 };
@@ -52,3 +59,12 @@ export const clearQuery = () => {
     payload: {},
   };
 };
+
+export const setGroupIds = ({ groupIds }) => {
+  return {
+    type: SET_GROUP_IDS,
+    payload: {
+      groupIds,
+    },
+  };
+};

src/redux/Reducers/query.js

@@ -3,6 +3,7 @@ import {
   SET_QUERY_CORRECT,
   SET_QUERY_WRONG,
   CLEAR_QUERY,
+  SET_GROUP_IDS,
   SET_ACTUAL_PROGRESS,
 } from "../Actions/index.js";
 
@@ -12,6 +13,9 @@ const initialState = {
   languagePackageId: "",
   vocabsToday: 0,
   staged: false,
+  onlyActivated: false,
+  customLearning: false,
+  groupIds: [],
   correct: 0,
   wrong: 0,
   actualProgress: 0,
@@ -25,8 +29,11 @@ const queryReducer = (state = initialState, action) => {
         foreignWordLanguage: action.payload.foreignWordLanguage,
         translatedWordLanguage: action.payload.translatedWordLanguage,
         languagePackageId: action.payload.languagePackageId,
+        groupIds: action.payload.groupIds,
         vocabsToday: action.payload.vocabsToday,
         staged: action.payload.staged,
+        onlyActivated: action.payload.onlyActivated,
+        customLearning: action.payload.customLearning,
       };
 
     case SET_QUERY_CORRECT:
@@ -51,6 +58,12 @@ const queryReducer = (state = initialState, action) => {
         ...initialState,
       };
 
+    case SET_GROUP_IDS:
+      return {
+        ...state,
+        groupIds: action.payload.groupIds,
+      };
+
     default:
       return state;
   }

src/screens/Custom/Custom.jsx

@@ -1,16 +1,124 @@
-import React from "react";
+import React, { useEffect, useState, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import { useHistory } from "react-router-dom";
+
+import Switch from "../../Components/Form/Switch/Switch.jsx";
+import Table from "../../Components/Table/Table.jsx";
+import Tooltip from "../../Components/Tooltip/Tooltip.jsx";
+
+import { clearQuery } from "../../redux/Actions/query.js";
+import { setLearnedPackage } from "../../redux/Actions/query.js";
 
 import "./Custom.scss";
 
+import Button from "../../Components/Button/Button";
+import { getPackages } from "../../utils/api";
+
 const Custom = () => {
   const { t } = useTranslation();
+  const history = useHistory();
+  const dispatch = useDispatch();
+
+  const [onlyActivated, setOnlyActivated] = useState(false);
+  const [packages, setPackages] = useState([]);
+
+  useEffect(() => {
+    getPackages(false, false, onlyActivated).then((response) => {
+      setPackages(response.data);
+    });
+  }, [onlyActivated]);
+
+  const selectPackage = useCallback(
+    (languagePackage) => {
+      dispatch(clearQuery());
+      dispatch(
+        setLearnedPackage({
+          foreignWordLanguage: languagePackage.foreignWordLanguage,
+          translatedWordLanguage: languagePackage.translatedWordLanguage,
+          //using fixed value until server gives us this property
+          languagePackageId: languagePackage.id,
+          groupIds: [],
+          vocabsToday: 0,
+          staged: false,
+          onlyActivated: onlyActivated,
+          customLearning: true,
+        })
+      );
+
+      history.push("/learn/selection/custom/");
+    },
+    [dispatch, history, onlyActivated]
+  );
+
+  const onChangeOnlyActivated = useCallback(() => {
+    setOnlyActivated(!onlyActivated);
+
+    // refetch packages
+    getPackages(false, false, onlyActivated).then((response) => {
+      console.log(response.data);
+      setPackages(response.data);
+    });
+  }, [onlyActivated]);
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: t("screens.allGroups.groupName"),
+        accessor: "name",
+        Cell: ({ row }) => row.original.name,
+        headerClassName: "w-25",
+      },
+      {
+        Header: t("screens.allGroups.groupDescription"),
+        accessor: "description",
+        Cell: ({ row }) => (
+          <>
+            <p
+              className="group-description-cell"
+              data-tip={row.original.description}
+              data-for={`description-tooltip-${row.original.id}`}
+            >
+              {row.original.description}
+            </p>
+            <Tooltip id={`description-tooltip-${row.original.id}`} />
+          </>
+        ),
+        headerClassName: "w-50",
+      },
+      {
+        Header: "",
+        accessor: "select",
+        Cell: ({ row }) => (
+          <Button
+            block
+            uppercase
+            onClick={() => {
+              selectPackage(row.original);
+            }}
+          >
+            Start
+          </Button>
+        ),
+      },
+    ],
+    [selectPackage, t]
+  );
 
   return (
-    <div className="custom">
-      <div>
-        <h1>{t("screens.custom.title")}</h1>
-        <h3>{t("global.comingSoon")}</h3>
+    <div className="custom-learning">
+      <div className="custom-learning-wrapper">
+        <div className="custom-learning-switch-wrapper">
+          <Switch
+            appearance="on-off"
+            optionLeft={t("screens.custom.onlyActivatedVocabs")}
+            onChange={onChangeOnlyActivated}
+            checked={onlyActivated}
+          />
+        </div>
+        <div className="table-wrapper">
+          <Table columns={columns} data={packages} />
+        </div>
       </div>
     </div>
   );

src/screens/Custom/Custom.scss

@@ -1,15 +1,30 @@
 @import "../../constants";
 
-.custom {
-  display: flex;
+.custom-learning {
   grid-area: main;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100vh;
-  text-align: center;
-
-  @media screen and (min-width: $bp-md) {
-    height: 100%;
+
+  .custom-learning-wrapper {
+    padding: 50px 12px;
+
+    @media screen and (min-width: $bp-md) {
+      padding: 50px;
+    }
+
+    .custom-learning-switch-wrapper {
+      width: 100%;
+
+      @media screen and (min-width: $bp-md) {
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+
+    .table-wrapper {
+      overflow: scroll;
+
+      @media screen and (min-width: $bp-md) {
+        overflow: hidden;
+      }
+    }
   }
 }