DONE 2nd screen, Duplicates and Card

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Other
+TODO.txt

src/App.tsx

@@ -3,13 +3,14 @@ import reactLogo from './assets/react.svg'
 import './App.css'
 import { Routes, Route, Router, BrowserRouter } from 'react-router-dom'
 import Home from './pages/Home'
+import Duplicates from './pages/Duplicates'
 
 function App() {
   return (
     <div className="App">
       <BrowserRouter>
         <Routes>
-          <Route path="/validated" element={<h3>Valid Input</h3>}></Route>
+          <Route path="/validated" element={<Duplicates />}></Route>
           <Route path="/" element={<Home />}>
           </Route>
         </Routes>

src/components/Card.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+
+function Card({
+  value,
+  index,
+  input,
+  setInput,
+  setHasNoDuplicates,
+  setFirstRender
+}) {
+
+  const handleCloseButton = ev => {
+    const cardElement = ev.target.nextSibling
+    const selectedChar = cardElement.innerText;
+    const indexSelectedChar = index
+
+    console.log({ selectedChar, indexSelectedChar })
+    const removedDuplicates = Array.from(input)
+    .filter((char, index) =>
+    char !== selectedChar || index === indexSelectedChar)
+    .join("");
+    setInput(removedDuplicates)
+    setHasNoDuplicates(new Set(removedDuplicates).size === removedDuplicates.length)
+    setFirstRender(true)
+  }
+
+  return (
+    <div>
+      <button className="card">
+        <span onClick={handleCloseButton}>❌</span>
+        <h3>{value}</h3>
+      </button>
+    </div>
+  )
+}
+
+export default Card;

src/pages/Duplicates.tsx

@@ -0,0 +1,49 @@
+import { useLocation, useNavigate } from "react-router-dom";
+import Card from "../components/Card";
+import { useState } from "react"
+
+function Duplicates() {
+  const navigate = useNavigate()
+  const location = useLocation();
+  const [input, setInput] = useState(location.state.originalInput);
+  const [hasNoDuplicates, setHasNoDuplicates] = useState(false)
+  const [isFirstRender, setIsFirstRender] = useState(false)
+
+  function Prompt() {
+    return (
+      <div>
+        {hasNoDuplicates
+          ? <p>NO DUPLICATES 😁</p>
+          : <p>Still Duplicates 😭</p>}
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <button onClick={() => navigate(-1)}> ⬅️ GO BACK</button>
+      <h1>You're in the second page</h1>
+      <p>Heres your ORIGINAL input {location.state.originalInput}</p>
+      <p>Heres your CURRENT input {input}</p>
+
+      {
+        isFirstRender
+          ? <Prompt />
+          : null
+      }
+      <div className="cards">
+        {Array.from(input).map((char, index) => <Card
+          value={char}
+          key={index}
+          index={index}
+          input={input}
+          setInput={setInput}
+          setHasNoDuplicates={setHasNoDuplicates}
+          setFirstRender={setIsFirstRender}
+        />)}
+      </div>
+    </div>
+  )
+}
+
+export default Duplicates;

src/pages/Home.tsx

@@ -2,17 +2,17 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 const Home = () => {
-  const [input, setInput] = useState("");
+  const [originalInput, setOriginalInput] = useState("");
   const navigate = useNavigate();
 
   const handleChange = (ev: React.FormEvent<HTMLInputElement>) => {
-    setInput(ev.currentTarget.value);
+    setOriginalInput(ev.currentTarget.value.trim());
   }
 
   const handleSubmit = (ev: React.SyntheticEvent) => {
     ev.preventDefault();
-    validateInput(input)
-      ? navigate("/validated")
+    validateInput(originalInput)
+      ? navigate("/validated", { state: { originalInput } })
       : alert("Can't process empty input")
   }
 
@@ -27,7 +27,7 @@ const Home = () => {
       </h1>
 
       <form onSubmit={ev => handleSubmit(ev)}>
-        <input type="text" value={input} onChange={ev => handleChange(ev)} />
+        <input type="text" value={originalInput} onChange={ev => handleChange(ev)} />
         <button type="submit">Change Your LOIF</button>
       </form>
     </>