Fix Code Climate alerts

CHANGELOG.md

@@ -7,7 +7,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/), and this
 **Table of Contents**
 
 - [[Unreleased]](#unreleased)
-- [[1.4.2] - (2020-12-04)](#142---2020-12-04)
+- [[1.4.2] - (2020-12-18)](#142---2020-12-18)
 - [[v1.4.1] - (2020-12-03)](#v141---2020-12-03)
   - [Added](#added)
   - [Fixed](#fixed)
@@ -43,7 +43,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/), and this
 
 ---
 
-## [1.4.2] - (2020-12-04)
+## [1.4.2] - (2020-12-18)
 
 ---
 

website/package.json

@@ -31,6 +31,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@octokit/rest": "^18.0.9",
+    "lodash.mapvalues": "^4.6.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.1",
@@ -45,16 +46,19 @@
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.5.0",
     "@types/jest": "^26.0.15",
+    "@types/lodash.mapvalues": "^4.6.6",
     "@types/node": "^14.14.10",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-redux": "^7.1.9",
+    "@types/lodash.isequal": "^4.5.5",
     "@types/react-router-dom": "^5.1.5",
     "@typescript-eslint/eslint-plugin": "^4.9.0",
     "@typescript-eslint/parser": "^4.9.0",
     "react-hot-loader": "^4.12.21",
     "react-scripts": "4.0.1",
     "redux-devtools-extension": "^2.13.8",
+    "lodash.isequal": "^4.5.0",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1",
     "workbox-background-sync": "^6.0.2",

website/src/App.tsx

@@ -5,7 +5,7 @@ import "./markdown.css";
 
 //Redux Imports
 import { useDispatch } from "react-redux";
-import { getDocs } from "./Redux/thunks";
+import { getAllDocs } from "./Redux/thunks";
 
 //Page Imports
 import Readme from "./Pages/Readme";
@@ -43,7 +43,7 @@ const App: React.FC = (props) => {
   const classes = useStyles();
 
   useEffect(() => {
-    dispatch(getDocs());
+    dispatch(getAllDocs());
   });
 
   return (

website/src/Components/Header.tsx

@@ -6,7 +6,7 @@ import { useLocation } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import { toggleSidebar } from "../Redux/actions";
 import { onDemandDataRequest } from "../Redux/thunks";
-import { Page } from "../Redux/thunks/docs.thunks";
+import { DocType } from "../Redux/reducers/docs.reducers";
 
 // Material UI Imports
 import {
@@ -38,13 +38,11 @@ const Header: FC<HeaderProps> = () => {
 
   const root = pathname.split("/")[1];
 
-  let page: Page | undefined = undefined;
+  let page: DocType | null = null;
 
   if (root === "readme" || root === "home" || root === "") page = "readme";
-
-  if (root === "components") page = "components";
-
-  if (root === "changelog") page = "changelog";
+  else if (root === "components") page = "components";
+  else if (root === "changelog") page = "changelog";
 
   const isSizeSmall = useMediaQuery<Theme>((theme) =>
     theme.breakpoints.down("md")
@@ -60,18 +58,16 @@ const Header: FC<HeaderProps> = () => {
             </IconButton>
           </Tooltip>
         )}
-        {page && (
-          <Tooltip title={`Get Data - ${capitalize(page)}`}>
-            <IconButton
-              className={classes.refresh}
-              onClick={() => {
-                dispatch(onDemandDataRequest(page ?? "components"));
-              }}
-            >
-              <Cached />
-            </IconButton>
-          </Tooltip>
-        )}
+        <Tooltip title={`Get Data${page && ` - ${capitalize(page)}`}`}>
+          <IconButton
+            className={classes.refresh}
+            onClick={() => {
+              dispatch(onDemandDataRequest(page));
+            }}
+          >
+            <Cached />
+          </IconButton>
+        </Tooltip>
       </Toolbar>
     </AppBar>
   );

website/src/Components/Sidebar.tsx

@@ -1,6 +1,7 @@
 // React Imports
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
+import isEqual from "lodash.isequal";
 
 //Redux Imports
 import { useDispatch, useSelector } from "react-redux";
@@ -88,7 +89,8 @@ const SideBar: React.FC<SideBarProps> = () => {
 interface ContentsProps {}
 
 const Contents: React.FC<ContentsProps> = () => {
-  const components = useSelector(getComponents);
+  const components = useSelector(getComponents, isEqual);
+  const componentNames = Object.keys(components);
   const classes = useStyles();
 
   return (
@@ -97,10 +99,10 @@ const Contents: React.FC<ContentsProps> = () => {
       <Divider />
       <List component="nav" className={classes.list}>
         <ListLink to="/home" name="Home" />
-        {components && (
+        {componentNames.length > 0 && (
           <Category
             name="Components"
-            items={Object.keys(components).map((component) => ({
+            items={componentNames.map((component) => ({
               name: component,
               to: components[component].url,
             }))}

website/src/Pages/Component.tsx

@@ -7,7 +7,7 @@ import Alerter from "../Components/Alerter";
 //Redux Imports
 import { useSelector } from "react-redux";
 import {
-  getAreComponentsLoading,
+  getIsComponentsLoading,
   getComponents,
   getIsComponentsError,
 } from "../Redux/selectors";
@@ -34,7 +34,7 @@ interface ComponentProps {}
 const Component: FC<ComponentProps> = () => {
   const classes = useStyles();
   const components = useSelector(getComponents);
-  const isLoading = useSelector(getAreComponentsLoading);
+  const isLoading = useSelector(getIsComponentsLoading);
   const isError = useSelector(getIsComponentsError);
 
   const { id } = useParams<Params>();

website/src/Redux/actions/docs.actions.ts

@@ -1,67 +1,31 @@
-import { Components } from "../reducers/docs.reducers";
+import { Components, DocType } from "../reducers/docs.reducers";
 
-export const LOAD_COMPONENTS_IN_PROGRESS = "LOAD_COMPONENTS_IN_PROGRESS";
-export const loadComponentsInProgress = () => ({
-  type: LOAD_COMPONENTS_IN_PROGRESS,
-  payload: {},
-});
-
-export const LOAD_README_IN_PROGRESS = "LOAD_README_IN_PROGRESS";
-export const loadReadmeInProgress = () => ({
-  type: LOAD_README_IN_PROGRESS,
-  payload: {},
-});
-
-export const LOAD_CHANGELOG_IN_PROGRESS = "LOAD_CHANGELOG_IN_PROGRESS";
-export const loadChangelogInProgress = () => ({
-  type: LOAD_CHANGELOG_IN_PROGRESS,
-  payload: {},
-});
-
-export const LOAD_COMPONENTS_SUCCESS = "LOAD_COMPONENTS_SUCCESS";
-export const loadComponentsSuccess = (components: Components) => ({
-  type: LOAD_COMPONENTS_SUCCESS,
-  payload: {
-    components,
-  },
-});
+export const LOAD_DOCS_IN_PROGRESS = "LOAD_DOCS_IN_PROGRESS";
 
-export const LOAD_README_SUCCESS = "LOAD_README_SUCCESS";
-export const loadReadmeSuccess = (readme: string) => ({
-  type: LOAD_README_SUCCESS,
+export const loadDocsInProgress = (docType: DocType) => ({
+  type: LOAD_DOCS_IN_PROGRESS,
   payload: {
-    readme,
+    docType,
   },
 });
 
-export const LOAD_CHANGELOG_SUCCESS = "LOAD_CHANGELOG_SUCCESS";
-export const loadChangelogSuccess = (changelog: string) => ({
-  type: LOAD_CHANGELOG_SUCCESS,
+export const LOAD_DOCS_SUCCESS = "LOAD_DOCS_SUCCESS";
+export const loadDocsSuccess = (
+  docType: DocType,
+  docs: string | Components
+) => ({
+  type: LOAD_DOCS_SUCCESS,
   payload: {
-    changelog,
+    docType,
+    docs,
   },
 });
 
 export const LOAD_DOCS_ERROR = "LOAD_DOCS_ERROR";
-export const loadDocsError = (error: string) => ({
+export const loadDocsError = (docType: DocType | null, error: string) => ({
   type: LOAD_DOCS_ERROR,
-  payload: { error },
-});
-
-export const LOAD_COMPONENTS_ERROR = "LOAD_COMPONENTS_ERROR";
-export const loadComponentsError = (error: string) => ({
-  type: LOAD_COMPONENTS_ERROR,
-  payload: { error },
-});
-
-export const LOAD_README_ERROR = "LOAD_README_ERROR";
-export const loadReadmeError = (error: string) => ({
-  type: LOAD_README_ERROR,
-  payload: { error },
-});
-
-export const LOAD_CHANGELOG_ERROR = "LOAD_CHANGELOG_ERROR";
-export const loadChangelogError = (error: string) => ({
-  type: LOAD_CHANGELOG_ERROR,
-  payload: { error },
+  payload: {
+    docType,
+    error,
+  },
 });

website/src/Redux/actions/index.ts

@@ -1,27 +1,13 @@
 export {
   //In Progress
-  LOAD_COMPONENTS_IN_PROGRESS,
-  loadComponentsInProgress,
-  LOAD_README_IN_PROGRESS,
-  loadReadmeInProgress,
-  LOAD_CHANGELOG_IN_PROGRESS,
-  loadChangelogInProgress,
+  LOAD_DOCS_IN_PROGRESS,
+  loadDocsInProgress,
   //Success
-  LOAD_COMPONENTS_SUCCESS,
-  loadComponentsSuccess,
-  LOAD_CHANGELOG_SUCCESS,
-  loadChangelogSuccess,
-  LOAD_README_SUCCESS,
-  loadReadmeSuccess,
+  LOAD_DOCS_SUCCESS,
+  loadDocsSuccess,
   //Error
   LOAD_DOCS_ERROR,
   loadDocsError,
-  LOAD_COMPONENTS_ERROR,
-  loadComponentsError,
-  LOAD_README_ERROR,
-  loadReadmeError,
-  LOAD_CHANGELOG_ERROR,
-  loadChangelogError,
 } from "./docs.actions";
 export { TOGGLE_SIDEBAR, toggleSidebar } from "./display.actions";
 export {