Refactor to Material UI Components

package.json

@@ -3,10 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@fontsource/roboto": "^4.5.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
+    "@mui/icons-material": "^5.0.4",
+    "@mui/material": "^5.0.4",
+    "@mui/system": "^5.0.4",
     "axios": "^0.21.4",
     "bootstrap": "^4.5.2",
     "enzyme": "^3.11.0",
@@ -16,8 +22,8 @@
     "moment": "^2.29.0",
     "normalizr": "^3.6.0",
     "popper.js": "^1.16.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-moment": "^0.9.7",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
@@ -64,8 +70,8 @@
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^26.0.14",
     "@types/jwt-decode": "^2.2.1",
-    "@types/react": "^16.9.51",
-    "@types/react-dom": "^16.9.8",
+    "@types/react": "^17.0.30",
+    "@types/react-dom": "^17.0.9",
     "@types/react-redux": "^7.1.9",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-virtualized": "^9.21.10",

src/__tests__/App.test.jsx

@@ -18,11 +18,10 @@ describe("App", () => {
 
     const signupElement = screen.getAllByRole("link", { name: /sign/i });
     const loginElement = screen.getAllByRole("link", { name: /log/i });
-    const breadElement = screen.getAllByRole("link", { name: /bread/i });
     const imgElement = screen.getByRole("img", { name: /up-arrow/i });
     const headingElement = screen.getByRole("heading", { name: /global/i });
-    const newTagsElement = screen.getByRole("button", { name: /New/i });
-    const topTagsElement = screen.getByRole("button", { name: /Top/i });
+    const newTagsElement = screen.getByRole("tab", { name: /New/i });
+    const topTagsElement = screen.getByRole("tab", { name: /Top/i });
     const searchElement = screen.getByRole("textbox");
     const readingsTextElement = screen.getByText(/readings:/i);
     const websitesReadTextElement = screen.getByText(/websites/i);
@@ -33,7 +32,6 @@ describe("App", () => {
     expect(searchElement).toBeInTheDocument();
     expect(signupElement[0]).toBeInTheDocument();
     expect(loginElement[0]).toBeInTheDocument();
-    expect(breadElement[0]).toBeInTheDocument();
 
     // signup aside
     expect(imgElement).toBeInTheDocument();

src/__tests__/ReadingsList.test.jsx

@@ -273,11 +273,11 @@ describe("Reading List", () => {
     const globalAsideElement = await screen.findByRole("heading", {
       name: /Global Readings/i,
     });
-    const topTagsButtonElement = screen.getByRole("button", {
-      name: /Top Tags/i,
+    const topTagsTabsElement = screen.getByRole("tab", {
+      name: /Top/i,
     });
-    const newTagsButtonElement = screen.getByRole("button", {
-      name: /New Tags/i,
+    const newTagsTabsElement = screen.getByRole("tab", {
+      name: /New/i,
     });
     const firstTagLinkElement = screen.getByRole("link", { name: /#test/i });
     const secondTagLinkElement = screen.getByRole("link", { name: /#:LJKDF/i });
@@ -290,8 +290,8 @@ describe("Reading List", () => {
     const signupTextElement = screen.getByText(/Sign up above/i);
 
     expect(globalAsideElement).toBeInTheDocument();
-    expect(topTagsButtonElement).toBeInTheDocument();
-    expect(newTagsButtonElement).toBeInTheDocument();
+    expect(topTagsTabsElement).toBeInTheDocument();
+    expect(newTagsTabsElement).toBeInTheDocument();
     expect(firstTagLinkElement).toBeInTheDocument();
     expect(secondTagLinkElement).toBeInTheDocument();
     expect(totalReadingsTextElement).toBeInTheDocument();

src/app/Routes.tsx

@@ -44,7 +44,7 @@ export interface ResetParams {
 
 const Routes: React.FC<RouteProps> = ({ alerts, currentUser }) => {
   return (
-    <div className="container-sm container-md container py-2">
+    <div className="container-sm container-md container py-5">
       <Suspense fallback={<div></div>}>
         <Switch>
           <Route

src/common/Card.tsx

@@ -1,7 +1,14 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
+import {
+  Card as CardMUI,
+  CardContent,
+  CardHeader,
+  Avatar,
+  Link,
+  Typography,
+} from "@mui/material";
 import { arrayOfIds } from "../features/subscriptions/types";
-import UserImage from "./UserImage";
 
 interface CardProps {
   id?: string;
@@ -38,39 +45,51 @@ const Card: React.FunctionComponent<CardProps> = ({
   if (image) updatedImage = addImageTransformation(image);
 
   return (
-    <div className="card-demo pb-1">
-      <div className="card">
-        <div className="card__header">
-          {image ? (
-            <UserImage image={updatedImage} username={username} imageSize="xl">
-              <div className="avatar__intro">
-                <h4 className="avatar__name">{username}</h4>
-                <NavLink
-                  exact
-                  to={`/${id}/following`}
-                  activeClassName="bg-light btn-outline-secondary"
-                  className="btn text-primary btn-sm readings-sum"
-                >
-                  Following: {followings ? followings.length : 0}
-                </NavLink>
-                <span> </span>
-                <NavLink
-                  exact
-                  to={`/${id}/followers`}
-                  activeClassName="bg-light btn-outline-secondary"
-                  className="btn text-primary btn-sm readings-sum"
-                >
-                  Followers: {followers ? followers.length : 0}
-                </NavLink>
-              </div>
-            </UserImage>
-          ) : (
-            <h3>{username}</h3>
-          )}
-        </div>
-        <div className="card__footer">{children}</div>
-      </div>
-    </div>
+    <CardMUI>
+      {image ? (
+        <CardHeader
+          avatar={
+            <Avatar
+              alt={username}
+              src={updatedImage}
+              sx={{ width: "6rem", height: "6rem" }}
+            />
+          }
+          title={<Typography sx={{ fontWeight: 700 }}>{username}</Typography>}
+          subheader={
+            <div>
+              <Link
+                component={NavLink}
+                underline="hover"
+                exact
+                to={`/${id}/following`}
+              >
+                Following: {followings ? followings.length : 0}
+              </Link>
+              <br />
+              <Link
+                component={NavLink}
+                underline="hover"
+                exact
+                to={`/${id}/followers`}
+              >
+                Followers: {followers ? followers.length : 0}
+              </Link>
+            </div>
+          }
+        />
+      ) : (
+        <CardHeader
+          disableTypography
+          title={
+            <Typography variant="h5" sx={{ fontWeight: 700 }}>
+              {username}
+            </Typography>
+          }
+        />
+      )}
+      <CardContent sx={{ paddingTop: "0px" }}>{children}</CardContent>
+    </CardMUI>
   );
 };