Use hooks for redux

frontend/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "babel-polyfill": "6.26.0",
-    "connected-react-router": "5.0.1",
+    "connected-react-router": "^6.0.0",
     "core-js": "^3.3.3",
     "dayjs": "^1.8.8",
     "env-cmd": "8.0.2",
@@ -19,7 +19,7 @@
     "react-helmet": "^5.2.1",
     "react-intl": "^3.0.0",
     "react-modal": "^3.8.1",
-    "react-redux": "5.1.0",
+    "react-redux": "^7.0.0",
     "react-redux-toastr": "^7.5.1",
     "react-router": "4.3.1",
     "react-router-dom": "4.3.1",
@@ -101,7 +101,7 @@
     "@types/react-helmet": "^5.0.15",
     "@types/react-intl": "^3.0.0",
     "@types/react-modal": "^3.8.2",
-    "@types/react-redux": "^6.0.12",
+    "@types/react-redux": "^7.0.0",
     "@types/react-redux-toastr": "^7.4.1",
     "@types/react-router": "^4.4.3",
     "@types/react-router-dom": "^4.3.1",

frontend/src/components/Root/components/Header/components/AccountMenu/AccountMenu.tsx

@@ -2,7 +2,7 @@ import Loader from 'components/Loader';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { RouteComponentProps } from 'react-router';
-import { UserState } from 'redux/user/reducer';
+import { useCurrentUser } from 'redux/user/selectors';
 import { routeDefinitions } from 'routes';
 import {
   Container,
@@ -18,12 +18,13 @@ import {
 
 interface OwnProps {
   logoutUser: (redirectTo?: string | undefined) => void;
-  user: UserState;
 }
 
 type Props = OwnProps & RouteComponentProps;
 
-export const AccountMenu: React.FunctionComponent<Props> = ({ logoutUser, user }) => {
+export const AccountMenu: React.FunctionComponent<Props> = ({ logoutUser }) => {
+  const user = useCurrentUser();
+
   const capitalize = (word: any) => {
     if (typeof word !== 'string') {
       return '';

frontend/src/components/Root/components/Header/components/AccountMenu/AccountMenu.wrap.tsx

@@ -3,11 +3,9 @@ import { withRouter } from 'react-router';
 import { Dispatch } from 'redux';
 import { getIsAuthenticated, logoutUserRequest } from 'redux/login';
 import { RootState } from 'redux/types';
-import { getUser } from 'redux/user/selectors';
 import { AccountMenu } from './AccountMenu';
 
 const mapStateToProps = (state: RootState) => ({
-  user: getUser(state),
   isUserAuthenticated: getIsAuthenticated(state),
 });
 

frontend/src/components/Root/components/Menu/components/ProjectMenuContent/ProjectMenuContent.tsx

@@ -9,7 +9,7 @@ import MessagePill from 'components/MessagePill';
 import MenuPageScriptItem from 'components/Root/components/MenuPageScriptItem';
 import { AuditParametersType } from 'redux/entities/auditParameters/types';
 import { ProjectType } from 'redux/entities/projects/types';
-import { UserState } from 'redux/user';
+import { useCurrentUser } from 'redux/user/selectors';
 import { isUserAdminOfProject } from 'services/utils';
 import { getSpacing } from 'stylesheet';
 import {
@@ -29,7 +29,6 @@ interface AuditParametersOption {
 }
 
 export interface OwnProps {
-  user: UserState;
   auditParametersId: string | null;
   currentPageId: string | null;
   project: ProjectType;
@@ -43,7 +42,6 @@ export interface OwnProps {
 type Props = OwnProps;
 
 export const ProjectMenuContent: React.FunctionComponent<Props> = ({
-  user,
   auditParametersId,
   currentPageId,
   project,
@@ -53,6 +51,8 @@ export const ProjectMenuContent: React.FunctionComponent<Props> = ({
   runningAudits,
   launchAudits,
 }) => {
+  const user = useCurrentUser();
+
   const [auditCanBeLaunched, setAuditCanBeLaunched] = React.useState(true);
 
   const auditParametersSelectOptions = auditParametersList.map(auditParameters => ({

frontend/src/components/Root/components/Menu/components/ProjectMenuContent/ProjectMenuContent.wrap.tsx

@@ -8,14 +8,12 @@ import {
   getCurrentScriptStepId,
 } from 'redux/parameters/selectors';
 import { RootStateWithRouter } from 'redux/types';
-import { getUser } from 'redux/user/selectors';
 
 import { Dispatch } from 'redux';
 import { launchAuditAction } from 'redux/entities/audits';
 import { ProjectMenuContent } from './ProjectMenuContent';
 
 const mapStateToProps = (state: RootStateWithRouter) => ({
-  user: getUser(state),
   auditParametersId: getCurrentAuditParametersId(state),
   currentPageId: getCurrentPageId(state),
   auditParametersList: getCurrentProjectAuditParameters(state),

frontend/src/pages/Audits/Audits.tsx

@@ -4,7 +4,6 @@ import { ValueType } from 'react-select/lib/types';
 
 import { AuditParametersType } from 'redux/entities/auditParameters/types';
 import { PageType } from 'redux/entities/pages/types';
-import { ProjectType } from 'redux/entities/projects/types';
 import { ScriptType } from 'redux/entities/scripts/types';
 
 import Badge from 'components/Badge';
@@ -14,7 +13,7 @@ import Select from 'components/Select';
 import dayjs from 'dayjs';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { auditStatus, AuditStatusHistoryType } from 'redux/entities/auditStatusHistories/types';
-import { useFetchProjectIfUndefined } from 'redux/entities/projects/useFetchProjectIfUndefined';
+import { useProjectById } from 'redux/entities/projects/hooks';
 import { routeDefinitions } from 'routes';
 import { colorUsage, getSpacing } from 'stylesheet';
 import AnalyticsBlock from './AnalyticsBlock';
@@ -41,14 +40,12 @@ export type OwnProps = {} & RouteComponentProps<{
 }>;
 
 type Props = {
-  project?: ProjectType | null;
   page?: PageType | null;
   script?: ScriptType | null;
   currentAuditParameters?: AuditParametersType | null;
   scriptSteps: Record<string, string>;
   sortedPageAuditResultsIds: string[] | null;
   sortedScriptAuditResultsIds: Record<string, string[]> | null;
-  fetchProjectsRequest: (projectId: string) => void;
   pageAuditStatusHistory?: AuditStatusHistoryType | null;
   scriptAuditStatusHistory?: AuditStatusHistoryType | null;
   fetchAuditResultsRequest: (
@@ -66,10 +63,8 @@ type Props = {
 
 export const Audits: React.FunctionComponent<Props> = ({
   currentAuditParameters,
-  fetchProjectsRequest,
   history,
   match,
-  project,
   page,
   script,
   scriptSteps,
@@ -87,7 +82,7 @@ export const Audits: React.FunctionComponent<Props> = ({
 
   const { projectId, pageOrScriptId, auditParametersId, scriptStepId } = match.params;
 
-  useFetchProjectIfUndefined(fetchProjectsRequest, projectId, project);
+  const project = useProjectById(projectId);
 
   React.useEffect(
     () => {

frontend/src/pages/Audits/Audits.wrap.tsx

@@ -9,8 +9,6 @@ import {
 } from 'redux/auditResults/selectors';
 import { getAuditParameters } from 'redux/entities/auditParameters/selectors';
 import { getPage, getPageLatestAuditStatusHistory } from 'redux/entities/pages/selectors';
-import { fetchProjectsRequest } from 'redux/entities/projects';
-import { getProject } from 'redux/entities/projects/selectors';
 import { getScript, getScriptLatestAuditStatusHistory } from 'redux/entities/scripts/selectors';
 import {
   setCurrentAuditParametersId,
@@ -22,7 +20,6 @@ import { RootState } from 'redux/types';
 import { Audits, OwnProps } from './Audits';
 
 const mapStateToProps = (state: RootState, props: OwnProps) => ({
-  project: getProject(state, props.match.params.projectId),
   page: getPage(state, props.match.params.pageOrScriptId),
   script: getScript(state, props.match.params.pageOrScriptId),
   currentAuditParameters: getAuditParameters(state, props.match.params.auditParametersId),
@@ -59,8 +56,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     dispatch(
       fetchAuditResultsRequest({ auditParametersId, pageOrScriptId, type, fromDate, toDate }),
     ),
-  fetchProjectsRequest: (projectId: string) =>
-    dispatch(fetchProjectsRequest({ currentProjectId: projectId })),
   setCurrentAuditParametersId: (auditParametersId: string | null | undefined) =>
     dispatch(setCurrentAuditParametersId({ auditParametersId })),
   setCurrentPageId: (pageId: string | null | undefined) => dispatch(setCurrentPageId({ pageId })),

frontend/src/pages/EnvironmentSettings/EnvironmentSettings.tsx

@@ -5,9 +5,8 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import ReduxToastr, { toastr } from 'react-redux-toastr';
 import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
 import { RouteComponentProps } from 'react-router';
-import { ProjectToastrDisplayType, ProjectType } from 'redux/entities/projects/types';
-import { useFetchProjectIfUndefined } from 'redux/entities/projects/useFetchProjectIfUndefined';
-import { UserState } from 'redux/user';
+import { useProjectById, useToastr } from 'redux/entities/projects/hooks';
+import { useCurrentUser } from 'redux/user/selectors';
 import { makeGetRequest } from 'services/networking/request';
 import { isUserAdminOfProject } from 'services/utils';
 import AuditParameterRow, { AddAuditParameterRow } from './Components/AuditParameterTable';
@@ -22,27 +21,14 @@ import {
   ProjectSettingsBlock,
 } from './EnvironmentSettings.style';
 
-export type OwnProps = {} & RouteComponentProps<{
+type Props = RouteComponentProps<{
   projectId: string;
 }>;
 
-type Props = {
-  currentUser: UserState;
-  fetchProjectsRequest: (projectId: string) => void;
-  project?: ProjectType | null;
-  toastrDisplay: ProjectToastrDisplayType;
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) => void;
-} & OwnProps;
-
-const EnvironmentSettings: React.FunctionComponent<Props> = ({
-  fetchProjectsRequest,
-  match,
-  project,
-  currentUser,
-  toastrDisplay,
-  setProjectToastrDisplay,
-}) => {
+const EnvironmentSettings: React.FunctionComponent<Props> = ({ match }) => {
   const intl = useIntl();
+  const currentUser = useCurrentUser();
+  const { currentToastrDisplay, resetToastrDisplay } = useToastr();
 
   interface UserOption {
     value: string;
@@ -58,7 +44,7 @@ const EnvironmentSettings: React.FunctionComponent<Props> = ({
     wpt_instance_url: string;
   }
 
-  useFetchProjectIfUndefined(fetchProjectsRequest, match.params.projectId, project);
+  const project = useProjectById(match.params.projectId);
 
   const [availableAuditParameters, setAvailableAuditParameters] = React.useState<
     Array<{ label: string; uuid: string; wptInstanceURL: string }>
@@ -87,8 +73,8 @@ const EnvironmentSettings: React.FunctionComponent<Props> = ({
 
   React.useEffect(
     () => {
-      if ('' !== toastrDisplay) {
-        switch (toastrDisplay) {
+      if ('' !== currentToastrDisplay) {
+        switch (currentToastrDisplay) {
           case 'addAuditParameterSuccess':
             toastr.success(
               intl.formatMessage({ id: 'Toastr.ProjectSettings.success_title' }),
@@ -119,10 +105,10 @@ const EnvironmentSettings: React.FunctionComponent<Props> = ({
             break;
         }
 
-        setProjectToastrDisplay('');
+        resetToastrDisplay();
       }
     },
-    [toastrDisplay, setProjectToastrDisplay, intl],
+    [currentToastrDisplay, resetToastrDisplay, intl],
   );
 
   if (project === undefined) {

frontend/src/pages/EnvironmentSettings/index.tsx

@@ -1 +1 @@
-export { default } from './EnvironmentSettings.wrap';
+export { default } from './EnvironmentSettings';

frontend/src/pages/GeneralSettings/GeneralSettings.tsx

@@ -5,9 +5,8 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import ReduxToastr, { toastr } from 'react-redux-toastr';
 import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
 import { RouteComponentProps } from 'react-router';
-import { ProjectToastrDisplayType, ProjectType } from 'redux/entities/projects/types';
-import { useFetchProjectIfUndefined } from 'redux/entities/projects/useFetchProjectIfUndefined';
-import { UserState } from 'redux/user';
+import { useProjectById, useToastr } from 'redux/entities/projects/hooks';
+import { useCurrentUser } from 'redux/user/selectors';
 import ProjectDetailsInput from './Components/ProjectDetailsInput';
 import {
   Container,
@@ -17,32 +16,19 @@ import {
   Title,
 } from './GeneralSettings.style';
 
-export type OwnProps = {} & RouteComponentProps<{
-  projectId: string;
-}>;
-
 type Props = {
-  currentUser: UserState;
-  fetchProjectsRequest: (projectId: string) => void;
-  project?: ProjectType | null;
-  toastrDisplay: ProjectToastrDisplayType;
-  setProjectToastrDisplay: (toastrDisplay: ProjectToastrDisplayType) => void;
   editProjectDetailsRequest: (
     projectId: string,
     payload: { name: string; wpt_api_key: string; wpt_instance_url: string },
   ) => void;
-} & OwnProps;
-
-const GeneralSettings: React.FunctionComponent<Props> = ({
-  fetchProjectsRequest,
-  match,
-  project,
-  currentUser,
-  toastrDisplay,
-  setProjectToastrDisplay,
-  editProjectDetailsRequest,
-}) => {
+} & RouteComponentProps<{
+  projectId: string;
+}>;
+
+const GeneralSettings: React.FunctionComponent<Props> = ({ match, editProjectDetailsRequest }) => {
   const intl = useIntl();
+  const currentUser = useCurrentUser();
+  const { currentToastrDisplay, resetToastrDisplay } = useToastr();
 
   interface UserOption {
     value: string;
@@ -57,7 +43,7 @@ const GeneralSettings: React.FunctionComponent<Props> = ({
     location_group: string;
   }
 
-  useFetchProjectIfUndefined(fetchProjectsRequest, match.params.projectId, project);
+  const project = useProjectById(match.params.projectId);
 
   const [projectName, setProjectName] = React.useState('');
   const [projectApiKey, setProjectApiKey] = React.useState('');
@@ -74,8 +60,8 @@ const GeneralSettings: React.FunctionComponent<Props> = ({
 
   React.useEffect(
     () => {
-      if ('' !== toastrDisplay) {
-        switch (toastrDisplay) {
+      if ('' !== currentToastrDisplay) {
+        switch (currentToastrDisplay) {
           case 'editProjectDetailsSuccess':
             toastr.success(
               intl.formatMessage({ id: 'Toastr.ProjectSettings.success_title' }),
@@ -90,10 +76,10 @@ const GeneralSettings: React.FunctionComponent<Props> = ({
             break;
         }
 
-        setProjectToastrDisplay('');
+        resetToastrDisplay();
       }
     },
-    [toastrDisplay, setProjectToastrDisplay, intl],
+    [currentToastrDisplay, resetToastrDisplay, intl],
   );
 
   if (project === undefined) {