From ef6befd8262e5487f489fa9d7380205f3e5546ac Mon Sep 17 00:00:00 2001
From: Nandan-unni <asnqln@gmail.com>
Date: Tue, 6 Jul 2021 15:05:01 +0530
Subject: [PATCH] improved ux

---
 package.json                        |   3 +
 src/app/pages/Writers/ViewWriter.js | 129 ++++++++++++++--------------
 src/redux/actions/index.js          |   0
 src/redux/constants/index.js        |   0
 src/redux/index.js                  |   0
 src/redux/reducers/index.js         |   0
 yarn.lock                           |  90 ++++++++++++++++++-
 7 files changed, 154 insertions(+), 68 deletions(-)
 create mode 100644 src/redux/actions/index.js
 create mode 100644 src/redux/constants/index.js
 create mode 100644 src/redux/index.js
 create mode 100644 src/redux/reducers/index.js

diff --git a/package.json b/package.json
index 82a7725..5239979 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.6.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -15,11 +16,13 @@
     "react-dom": "^17.0.2",
     "react-draft-wysiwyg": "^1.14.7",
     "react-loading-skeleton": "^2.2.0",
+    "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
+    "dev": "react-scripts start",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
diff --git a/src/app/pages/Writers/ViewWriter.js b/src/app/pages/Writers/ViewWriter.js
index 7afa7c8..97c5539 100644
--- a/src/app/pages/Writers/ViewWriter.js
+++ b/src/app/pages/Writers/ViewWriter.js
@@ -1,7 +1,8 @@
 import React, { Component } from "react";
 import Skeleton from "react-loading-skeleton";
-
+import { Link } from "react-router-dom";
 import "./Writers.css";
+import { routes } from "../../router/routes";
 import { Button, Navbar } from "../../components";
 import {
   logoutWriterAPI,
@@ -15,18 +16,18 @@ function Skltn() {
     <span>
       <div className="Profile">
         <center>
-          <Skeleton circle={true} height={"22.5vh"} width={"22.5vh"} />
+          <Skeleton circle={true} size="large" width={"22.5vh"} />
         </center>
         <div className="Prof-dtl">
           <center>
             <nm>
-              <Skeleton width={"20vw"} />{" "}
+              <Skeleton width={"20vw"} />
             </nm>
             <br />
             <unm>
-              <Skeleton width={"5vw"} />{" "}
+              <Skeleton width={"5vw"} />
             </unm>
-            &nbsp; <b>|</b> &nbsp;{" "}
+            &nbsp; <b>|</b> &nbsp;
             <eml>
               <Skeleton width={"6vw"} />
             </eml>
@@ -124,6 +125,7 @@ class ViewAccount extends Component {
     };
     this.handleLogout = this.handleLogout.bind(this);
     this.handleFollow = this.handleFollow.bind(this);
+    this.handleTabChange = this.handleTabChange.bind(this);
   }
   handleLogout = () => {
     logoutWriterAPI(this.state.user.pk);
@@ -140,6 +142,9 @@ class ViewAccount extends Component {
       });
   };
   componentDidMount() {
+    this.handleTabChange();
+  }
+  handleTabChange = () => {
     getWriterAPI(this.props.match.params.username).then((res) => {
       const tab = new URLSearchParams(this.props.location.search).get("tab");
       this.setState({
@@ -158,32 +163,38 @@ class ViewAccount extends Component {
       if (!(this.state.writer.username === this.state.user.username)) {
         if (["archived", "saved"].indexOf(this.state.tab) > 0) {
           this.setState({ published: " item-active", tab: "published" });
-          console.log(this.state.published);
         }
       }
+      ["following", "followers", "published", "archived", "saved"].forEach(
+        (tab) => {
+          if (!(tab === this.state.tab)) {
+            this.setState({ [tab]: "" });
+          }
+        }
+      );
     });
-  }
+  };
   render() {
     const writer = this.state.writer;
     const user = this.state.user;
     return (
       <div className="ViewAccount">
         <Navbar>
-          <a href="/logout/" onClick={this.handleLogout}>
+          <Link to={routes.LOGOUT} onClick={this.handleLogout}>
             <i class="material-icons">power_settings_new</i>
             <br />
             <z>Logout</z>
-          </a>
-          <a href={`/writer/view/${this.state.user.username}`}>
+          </Link>
+          <Link to={routes.VIEW_WRITER(this.state.user.username)}>
             <i class="material-icons">settings</i>
             <br />
             <z> Settings</z>
-          </a>
-          <a href="/feed/">
+          </Link>
+          <Link to={routes.FEED}>
             <i class="material-icons">home</i>
             <br />
             <z> Feeds</z>
-          </a>
+          </Link>
         </Navbar>
         {this.state.loaded ? (
           <span>
@@ -209,27 +220,27 @@ class ViewAccount extends Component {
                   )}
 
                   <div className="Prof-math">
-                    <a href="?tab=published">
+                    <Link to="?tab=published" onClick={this.handleTabChange}>
                       <div className="math-dtl">
                         <n>{writer.no_of_blogs}</n>
                         <br />
                         <t>Blogs</t>
                       </div>
-                    </a>
-                    <a href="?tab=following">
+                    </Link>
+                    <Link to="?tab=following" onClick={this.handleTabChange}>
                       <div className="math-dtl">
                         <n>{writer.no_of_following}</n>
                         <br />
                         <t>Following</t>
                       </div>
-                    </a>
-                    <a href="?tab=followers">
+                    </Link>
+                    <Link to="?tab=followers" onClick={this.handleTabChange}>
                       <div className="math-dtl">
                         <n>{writer.no_of_followers}</n>
                         <br />
                         <t>Followers</t>
                       </div>
-                    </a>
+                    </Link>
                   </div>
 
                   <bio>{writer.bio}</bio>
@@ -285,45 +296,43 @@ class ViewAccount extends Component {
               }
             >
               <div className={`Prof-Nav-item${this.state.following}`}>
-                <a href="?tab=following">
+                <Link to="?tab=following" onClick={this.handleTabChange}>
                   <i class="material-icons">person</i>
                   <br />
                   <z>Following</z>
-                </a>
+                </Link>
               </div>
               <div className={`Prof-Nav-item${this.state.followers}`}>
-                <a href="?tab=followers">
+                <Link to="?tab=followers" onClick={this.handleTabChange}>
                   <i class="material-icons">people</i>
                   <br />
                   <z>Followers</z>
-                </a>
+                </Link>
               </div>
               <div className={`Prof-Nav-item${this.state.published}`}>
-                <a href="?tab=published">
+                <Link to="?tab=published" onClick={this.handleTabChange}>
                   <i class="material-icons">library_books</i>
                   <br />
                   <z>Published</z>
-                </a>
+                </Link>
               </div>
-              {user.username === writer.username ? (
+              {user.username === writer.username && (
                 <span style={{ display: "flex" }}>
                   <div className={`Prof-Nav-item${this.state.archived}`}>
-                    <a href="?tab=archived">
+                    <Link to="?tab=archived" onClick={this.handleTabChange}>
                       <i class="material-icons">archive</i>
                       <br />
                       <z>Archived</z>
-                    </a>
+                    </Link>
                   </div>
                   <div className={`Prof-Nav-item${this.state.saved}`}>
-                    <a href="?tab=saved">
+                    <Link to="?tab=saved" onClick={this.handleTabChange}>
                       <i class="material-icons">bookmarks</i>
                       <br />
                       <z>Saved</z>
-                    </a>
+                    </Link>
                   </div>
                 </span>
-              ) : (
-                <span></span>
               )}
             </div>
           </span>
@@ -332,11 +341,11 @@ class ViewAccount extends Component {
         )}
         <br />
 
-        {this.state.tab === "following" ? (
+        {this.state.tab === "following" && (
           <div className="wrt-dtl">
             <div className="dtl">
               {writer.following.map((avatar) => (
-                <a href={`/writer/view/${avatar.username}`}>
+                <Link to={routes.VIEW_WRITER(avatar.username)}>
                   <div className="wrt-content">
                     <div className="search-result">
                       <div className="result-img">
@@ -352,21 +361,19 @@ class ViewAccount extends Component {
                     <div className="result-divider"></div>
                     <br />
                   </div>
-                </a>
-              ))}{" "}
+                </Link>
+              ))}
               <br />
               <br />
             </div>
           </div>
-        ) : (
-          <div></div>
         )}
 
-        {this.state.tab === "followers" ? (
+        {this.state.tab === "followers" && (
           <div className="wrt-dtl">
             <div className="dtl">
               {writer.followers.map((avatar) => (
-                <a href={`/writer/view/${avatar.username}`}>
+                <Link to={routes.VIEW_WRITER(avatar.username)}>
                   <div className="wrt-content">
                     <div className="search-result">
                       <div className="result-img">
@@ -382,21 +389,19 @@ class ViewAccount extends Component {
                     <div className="result-divider"></div>
                     <br />
                   </div>
-                </a>
-              ))}{" "}
+                </Link>
+              ))}
               <br />
               <br />
             </div>
           </div>
-        ) : (
-          <div></div>
         )}
 
-        {this.state.tab === "published" ? (
+        {this.state.tab === "published" && (
           <div className="item-dtl">
             <div className="dtl">
               {writer.pub_blogs.map((blog) => (
-                <a href={`/blog/view/${blog.pk}/`}>
+                <Link to={routes.VIEW_BLOG(blog.pk)}>
                   <div className="dtl-content">
                     <br />
                     <ttl>{blog.title}</ttl>
@@ -414,26 +419,24 @@ class ViewAccount extends Component {
                         <button>
                           <iu class="material-icons">favorite_border</iu>
                         </button>
-                      )}{" "}
+                      )}
                     </div>
                   </div>
-                </a>
-              ))}{" "}
+                </Link>
+              ))}
               <br />
               <br />
             </div>
           </div>
-        ) : (
-          <div></div>
         )}
 
-        {user.username === writer.username ? (
+        {user.username === writer.username && (
           <div>
-            {this.state.tab === "archived" ? (
+            {this.state.tab === "archived" && (
               <div className="item-dtl">
                 <div className="dtl">
                   {writer.arch_blogs.map((blog) => (
-                    <a href={`/blog/view/${blog.pk}/`}>
+                    <Link to={routes.VIEW_BLOG(blog.pk)}>
                       <div className="dtl-content">
                         <br />
                         <ttl>{blog.title}</ttl>
@@ -451,24 +454,22 @@ class ViewAccount extends Component {
                             <button>
                               <iu class="material-icons">favorite_border</iu>
                             </button>
-                          )}{" "}
+                          )}
                         </div>
                       </div>
-                    </a>
+                    </Link>
                   ))}
                   <br />
                   <br />
                 </div>
               </div>
-            ) : (
-              <div></div>
             )}
 
-            {this.state.tab === "saved" ? (
+            {this.state.tab === "saved" && (
               <div className="item-dtl">
                 <div className="dtl">
                   {writer.saved_blogs.map((blog) => (
-                    <a href={`/blog/view/${blog.pk}/`}>
+                    <Link to={routes.VIEW_BLOG(blog.pk)}>
                       <div className="dtl-content">
                         <br />
                         <ttl>{blog.title}</ttl>
@@ -488,21 +489,17 @@ class ViewAccount extends Component {
                             <button>
                               <iu class="material-icons">favorite_border</iu>
                             </button>
-                          )}{" "}
+                          )}
                         </div>
                       </div>
-                    </a>
+                    </Link>
                   ))}
                   <br />
                   <br />
                 </div>
               </div>
-            ) : (
-              <div></div>
             )}
           </div>
-        ) : (
-          <div></div>
         )}
       </div>
     );
diff --git a/src/redux/actions/index.js b/src/redux/actions/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/redux/constants/index.js b/src/redux/constants/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/redux/index.js b/src/redux/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/yarn.lock b/yarn.lock
index 6c90b2e..602bb1c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1553,6 +1553,16 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
+"@reduxjs/toolkit@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.6.0.tgz#0a17c6941c57341f8b31e982352b495ab69d5add"
+  integrity sha512-eGL50G+Vj5AG5uD0lineb6rRtbs96M8+hxbcwkHpZ8LQcmt0Bm33WyBSnj5AweLkjQ7ZP+KFRDHiLMznljRQ3A==
+  dependencies:
+    immer "^9.0.1"
+    redux "^4.1.0"
+    redux-thunk "^2.3.0"
+    reselect "^4.0.0"
+
 "@rollup/plugin-node-resolve@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
@@ -1826,6 +1836,14 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@^3.3.0":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
@@ -1893,11 +1911,35 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.2.1.tgz#374e31645d58cb18a07b3ecd8e9dede4deb2cccd"
   integrity sha512-DxZZbyMAM9GWEzXL+BMZROWz9oo6A9EilwwOMET2UVu2uZTqMWS5S69KVtuVKaRjCUpcrOXRalet86/OpG4kqw==
 
+"@types/prop-types@*":
+  version "15.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
+
 "@types/q@^1.5.1":
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/react-redux@^7.1.16":
+  version "7.1.16"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.16.tgz#0fbd04c2500c12105494c83d4a3e45c084e3cb21"
+  integrity sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
+"@types/react@*":
+  version "17.0.13"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.13.tgz#6b7c9a8f2868586ad87d941c02337c6888fb874f"
+  integrity sha512-D/G3PiuqTfE3IMNjLn/DCp6umjVCSvtZTPdtAFy5+Ved6CsdRvivfKeCzw79W4AatShtU4nGqgvOv5Gro534vQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -1905,6 +1947,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/scheduler@*":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
+  integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
+
 "@types/source-list-map@*":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
@@ -4063,6 +4110,11 @@ csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e"
   integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==
 
+csstype@^3.0.2:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
+  integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -5727,7 +5779,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -5957,6 +6009,11 @@ immer@8.0.1:
   resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656"
   integrity sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==
 
+immer@^9.0.1:
+  version "9.0.5"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.5.tgz#a7154f34fe7064f15f00554cc94c66cc0bf453ec"
+  integrity sha512-2WuIehr2y4lmYz9gaQzetPR2ECniCifk4ORaQbU3g5EalLt+0IVTosEPJ5BoYl/75ky2mivzdRzV8wWgQGOSYQ==
+
 immutable@~3.7.4:
   version "3.7.6"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
@@ -9705,7 +9762,7 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
-react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9722,6 +9779,18 @@ react-loading-skeleton@^2.2.0:
   dependencies:
     "@emotion/core" "^10.0.22"
 
+react-redux@^7.2.4:
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225"
+  integrity sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/react-redux" "^7.1.16"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.13.1"
+
 react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -9919,6 +9988,18 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux-thunk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
+  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
+
+redux@^4.0.0, redux@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.0.tgz#eb049679f2f523c379f1aff345c8612f294c88d4"
+  integrity sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -10091,6 +10172,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
+  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
+
 resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"