Adds search by term (#5)

src/main.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { ChangeEvent, useEffect, useState } from "react";
 // eslint-disable-next-line react/no-deprecated
 import { render } from "react-dom";
 import { ToastContainer, toast } from "react-toastify";
@@ -248,9 +248,12 @@ function App() {
     ?.filter((log) => log.unfollowedSuccessfully)
     .map(({ user }) => <li key={user.username}>{user.username}</li>);
 
-  const showedResults =
-    state.filters &&
-    state.results?.filter((result) => {
+  const showedResults = state.results?.filter((result) => {
+    if (state.searchTerm) {
+      return result.username.toLowerCase().includes(state.searchTerm);
+    }
+
+    if (state.filters) {
       if (state.filters.length === 0) return true;
       const showPrivate = state.filters.includes("private");
       const showVerified = state.filters.includes("verified");
@@ -268,9 +271,10 @@ function App() {
         isNewUnfollower(oldResults, result)
       )
         return true;
+    }
 
-      return false;
-    });
+    return false;
+  });
 
   const handleSelectAll = () => {
     setState((prevState) => {
@@ -290,6 +294,18 @@ function App() {
     });
   };
 
+  const handleSearchTerm = (e: ChangeEvent<HTMLInputElement>) => {
+    const searchTerm = (e.target as HTMLInputElement).value.toLowerCase();
+    setState((prevState) => {
+      if (prevState.status !== "scanning") return prevState;
+
+      return {
+        ...prevState,
+        searchTerm,
+      };
+    });
+  };
+
   return (
     <>
       {state.status === "initial" && (
@@ -343,6 +359,12 @@ function App() {
               Showing {showedResults?.length} of {state.results.length} users
             </div>
 
+            <input
+              type="text"
+              placeholder="Search..."
+              onChange={handleSearchTerm}
+            />
+
             {state.percentage === 100 && (
               <button className="select-all-btn" onClick={handleSelectAll}>
                 {state.selectedResults.length === showedResults?.length

src/styles/index.css

@@ -31,6 +31,12 @@ button {
   border: 0;
 }
 
+input[type="text"] {
+  border-radius: 5px;
+  border: 0;
+  padding: 4px 6px;
+}
+
 body {
   background: var(--gradientBackground);
 }