Chore/165 upgrade to react 19

package.json

@@ -3,22 +3,28 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "axios": "^0.22.0",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@mui/material": "^6.1.8",
+    "axios": "^1.7.9",
     "bootstrap": "^5.1.2",
     "dotenv": "^16.4.5",
     "lodash": "^4.17.21",
-    "react": "^17.0.2",
+    "react": "^19.0.1",
     "react-bootstrap": "^1.6.4",
     "react-collapse": "^5.1.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^19.0.1",
     "react-emoji-render": "^1.2.4",
     "react-scripts": "^5.0.1",
     "use-debounce": "^7.0.0",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^4.2.4"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "tailwindcss": "^3.4.7"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -43,9 +49,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "tailwindcss": "^3.4.7"
   }
 }

src/components/CardSet.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useContext } from "react";
 import SingleCard from "./SingleCard";
-import { makeStyles } from "@material-ui/core/styles";
 import axios from "axios";
 import { isEmpty } from "lodash";
 // import { dotenv } from "dotenv";
@@ -9,12 +8,6 @@ import { isEmpty } from "lodash";
 import { ThemeContext } from "../Context/themeContext";
 import Loading from "./Loading/index";
 
-const useStyles = makeStyles((theme) => ({
-  cardSet: {
-    margin: "15px",
-  },
-}));
-
 const CardSet = ({
   language,
   inputSearch,
@@ -26,7 +19,6 @@ const CardSet = ({
   setHidePagination,
 }) => {
   const [repositores, setRepositories] = useState([]);
-  const classes = useStyles();
   const [isLoading, setIsLoading] = useState(false);
   const [wasRejected, setWasRejected] = useState(false);
   const { theme } = useContext(ThemeContext);
@@ -35,9 +27,7 @@ const CardSet = ({
   const [CardSetLength, setCardSetLength] = useState(0);
 
   useEffect(() => {
-    setCardSetLength(
-      document.getElementById("header").getBoundingClientRect().height + "px"
-    );
+    setCardSetLength(document.getElementById("header").getBoundingClientRect().height + "px");
   }, []);
 
   let url = `https://api.github.com/search/repositories?q=good-first-issues:>0+language:${language}${
@@ -53,9 +43,7 @@ const CardSet = ({
       } else if (reducedState.maxForks !== "" && reducedState.minForks === "") {
         setForksQuery(`forks:<=${reducedState.maxForks}`);
       } else if (reducedState.maxForks !== "" && reducedState.minForks !== "") {
-        setForksQuery(
-          `forks:${reducedState.minForks}..${reducedState.maxForks}`
-        );
+        setForksQuery(`forks:${reducedState.minForks}..${reducedState.maxForks}`);
       } else {
         setForksQuery("");
       }
@@ -70,9 +58,7 @@ const CardSet = ({
       } else if (reducedState.maxStars !== "" && reducedState.minStars === "") {
         setStarsQuery(`stars:<=${reducedState.maxStars}`);
       } else if (reducedState.maxStars !== "" && reducedState.minStars !== "") {
-        setStarsQuery(
-          `stars:${reducedState.minStars}..${reducedState.maxStars}`
-        );
+        setStarsQuery(`stars:${reducedState.minStars}..${reducedState.maxStars}`);
       } else {
         setStarsQuery("");
       }
@@ -84,16 +70,7 @@ const CardSet = ({
     };
 
     onAppliedFilters();
-  }, [
-    language,
-    inputSearch,
-    pageNumber,
-    reducedState,
-    sortByForks,
-    sortByStars,
-    forksQuery,
-    starsQuery,
-  ]);
+  }, [language, inputSearch, pageNumber, reducedState, sortByForks, sortByStars, forksQuery, starsQuery]);
 
   if (sortByStars === "desc") urlSuffix = "&sort=stars&order=desc";
   else if (sortByStars === "asc") urlSuffix = "&sort=stars&order=asc";
@@ -116,9 +93,7 @@ const CardSet = ({
           setRepositories(response.data.items);
           setWasRejected(false);
           setIsLoading(false);
-          response.data.items.length
-            ? setHidePagination(false)
-            : setHidePagination(true);
+          response.data.items.length ? setHidePagination(false) : setHidePagination(true);
         },
         (rejection) => {
           if (rejection.response.status === 403) {
@@ -162,13 +137,10 @@ const CardSet = ({
         <div className={` grid grid-cols-1  lg:grid-cols-3 `}>
           {isEmpty(repositores) ? (
             <div>
-              <h5>
-                No issues to be shown at the moment, please try again later.
-              </h5>
+              <h5>No issues to be shown at the moment, please try again later.</h5>
             </div>
           ) : (
-            !isEmpty(repositores) &&
-            repositores.map((repo) => <SingleCard key={repo.id} repo={repo} />)
+            !isEmpty(repositores) && repositores.map((repo) => <SingleCard key={repo.id} repo={repo} />)
           )}
         </div>
       )}

src/components/Header.js

@@ -38,7 +38,7 @@ const Header = ({ language, setLanguage, setInputSearch }) => {
   };
 
   return (
-    <Navbar id="header">
+    <Navbar id="header" expand="lg" variant="light">
       <Container className=" flex lg:flex-row flex-col  justify-center items-center  w-full px-4">
         <Navbar.Brand href="/" className="d-none d-sm-block ">
           {theme.mode === "light" ? (
@@ -63,14 +63,8 @@ const Header = ({ language, setLanguage, setInputSearch }) => {
             <input
               type="text"
               className={`transition-all h-7 ml-2 border-solid border-l-2 border-l-violet-950 pl-2 duration-1000 ease-in-out focus:outline-none outline-none ${
-                inputExpanded
-                  ? "w-1/2 pl-5 border-b-slate-300 border-b-2 border-solid"
-                  : "w-1/2"
-              } bg-transparent  ${
-                theme.mode === "dark"
-                  ? "opacity-100 text-slate-200"
-                  : "opacity-70 text-slate-800"
-              }`}
+                inputExpanded ? "w-1/2 pl-5 border-b-slate-300 border-b-2 border-solid" : "w-1/2"
+              } bg-transparent  ${theme.mode === "dark" ? "opacity-100 text-slate-200" : "opacity-70 text-slate-800"}`}
               placeholder="Search"
               autoComplete="off"
               onMouseEnter={handleSearchClick}
@@ -80,9 +74,7 @@ const Header = ({ language, setLanguage, setInputSearch }) => {
           </label>
           <div
             onClick={changeTheme}
-            className={
-              "cursor-pointer max-lg:!hidden hover:scale-105 transition-all ease-linear duration-200"
-            }
+            className={"cursor-pointer max-lg:!hidden hover:scale-105 transition-all ease-linear duration-200"}
             style={{ fontSize: "1.5rem" }}
             aria-hidden="true"
           >

src/components/Header.test.js

@@ -0,0 +1,17 @@
+import { render } from "@testing-library/react";
+import Header from "./Header";
+import { ThemeContext } from "../Context/themeContext";
+
+const mockTheme = {
+  theme: { mode: "light", color: "black", bg: "white" },
+  changeTheme: jest.fn(),
+};
+
+test("Header component structure remains consistent", () => {
+  const { asFragment } = render(
+    <ThemeContext.Provider value={mockTheme}>
+      <Header language="JavaScript" setLanguage={jest.fn()} setInputSearch={jest.fn()} />
+    </ThemeContext.Provider>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

src/components/SingleCard.js

@@ -1,15 +1,11 @@
-import { Card, Button } from "react-bootstrap";
 import { useState, useEffect, useContext } from "react";
-import Avatar from "@material-ui/core/Avatar";
-import Emoji from "react-emoji-render";
-import backg from "../git9.jpg";
+import Avatar from "@mui/material/Avatar";
 import axios from "axios";
 import { isEmpty } from "lodash";
 import iconButton from "./../button_icon.png";
 import Loading from "./Loading";
 import { ThemeContext } from "../Context/themeContext";
 
-
 const SingleCard = (props) => {
   // console.log(props.repo)
   const [repo, setRepo] = useState(null);
@@ -52,10 +48,14 @@ const SingleCard = (props) => {
       }}
     >
       {wasRejected && (
-        <div className={`min-h-36 flex items-center justify-center p-9 shadow-xl ${theme.mode === "light" ? "bg-slate-200" : "bg-gray-800"} rounded-md`}>
+        <div
+          className={`min-h-36 flex items-center justify-center p-9 shadow-xl ${
+            theme.mode === "light" ? "bg-slate-200" : "bg-gray-800"
+          } rounded-md`}
+        >
           <p className="balance text-red-600 font-medium">
-            You are seeing this message because github imposes rate limit on
-            requests. Please refresh the page or wait a couple of minutes.
+            You are seeing this message because github imposes rate limit on requests. Please refresh the page or wait a
+            couple of minutes.
           </p>
         </div>
       )}
@@ -91,20 +91,13 @@ const SingleCard = (props) => {
                   <span className="font-bold text-sm">Language:</span>
                   <span className=" text-sm">{repo.language}</span>
                 </div>
-                <a
-                  href={`${props.repo.html_url}/labels/good%20first%20issue`}
-                  target="__blank"
-                >
+                <a href={`${props.repo.html_url}/labels/good%20first%20issue`} target="__blank">
                   <button
                     className="hover:scale-105 transition-all ease-linear duration-200 px-2 py-1 flex gap-1 bg-white text-black rounded-2xl justify-center items-center font-bold"
                     onClick={() => setOpen(!openIssues)}
                   >
                     Issues
-                    <img
-                      className="w-5 h-5"
-                      src={iconButton}
-                      alt="Ícone botão"
-                    ></img>
+                    <img className="w-5 h-5" src={iconButton} alt="Ícone botão"></img>
                   </button>
                 </a>
               </div>

src/components/__snapshots__/Header.test.js.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header component structure remains consistent 1`] = `
+<DocumentFragment>
+  <nav
+    class="navbar navbar-expand-lg navbar-light"
+    id="header"
+  >
+    <div
+      class=" flex lg:flex-row flex-col  justify-center items-center  w-full px-4 container"
+    >
+      <a
+        class="d-none d-sm-block  navbar-brand"
+        href="/"
+      >
+        <img
+          alt="Logo"
+          class="w-24 h-24"
+          src="logo-white.png"
+        />
+      </a>
+      <div
+        class="flex justify-around items-center gap-11 w-full"
+      >
+        <label
+          class="bg-slate-200  flex rounded-3xl p-2 h-11 w-full md:w-[40rem]"
+        >
+          <div
+            class="inline-block w-full md:w-40 focus:outline-none"
+          >
+            <button
+              class="w-full flex justify-between items-center px-4 rounded-md border outline-nonebg-slate-200 opacity-55 hover:opacity-100 text-black  transition duration-200 ease-in-out"
+            >
+              JavaScript
+              <span
+                class="ml-2 transform transition-transform duration-200 ease-in-out"
+              >
+                ▼
+              </span>
+            </button>
+          </div>
+          <input
+            autocomplete="off"
+            class="transition-all h-7 ml-2 border-solid border-l-2 border-l-violet-950 pl-2 duration-1000 ease-in-out focus:outline-none outline-none w-1/2 bg-transparent  opacity-70 text-slate-800"
+            placeholder="Search"
+            type="text"
+          />
+        </label>
+        <div
+          aria-hidden="true"
+          class="cursor-pointer max-lg:!hidden hover:scale-105 transition-all ease-linear duration-200"
+          style="font-size: 1.5rem;"
+        >
+          <img
+            alt="lua icone"
+            class="w-10"
+            src="Moon.png"
+          />
+        </div>
+      </div>
+    </div>
+  </nav>
+</DocumentFragment>
+`;

src/index.js

@@ -1,17 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import { ThemeProvider } from './Context/themeContext';
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import { ThemeProvider } from "./Context/themeContext";
+import reportWebVitals from "./reportWebVitals";
+import "./index.css";
 
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container);
+root.render(
   <React.StrictMode>
     <ThemeProvider>
       <App />
     </ThemeProvider>
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function