Merge pull request #31 from MLH-Fellowship/spellcheck-01

Integration of Spellcheck Feature for Resume
MLH-Fellowship · Sep 30, 2024 · 6daa705 · 6daa705
2 parents 6b0d98c + 51db742
commit 6daa705
Showing 1 changed file with 60 additions and 0 deletions.
diff --git a/src/App.js b/src/App.js
@@ -82,6 +82,7 @@ const MyDoc = ({ resumeData }) => (
 
 function App() {
   const [resumeData, setResumeData] = useState(null);
+  const [spellcheckResults, setSpellcheckResults] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
 
@@ -114,6 +115,43 @@ function App() {
       });
   };
 
+  const handleSpellcheck = () => {
+    if (!resumeData) {
+      setLoading(true);
+      fetch(`${API_URL}/resume/data`)
+        .then((response) => response.json())
+        .then((data) => {
+          setResumeData(data);
+          performSpellcheck(data);
+          setLoading(false);
+        })
+        .catch((err) => {
+          console.error("Error fetching resume data for spellcheck:", err);
+          setError(true);
+          setLoading(false);
+        });
+    } else {
+      performSpellcheck(resumeData);
+    }
+  };
+
+  const performSpellcheck = (data) => {
+    fetch(`${API_URL}/resume/spellcheck`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        experience: data.experience || [],
+        education: data.education || [],
+        skill: data.skill || [],
+      }),
+    })
+      .then((response) => response.json())
+      .then((spellcheckData) => setSpellcheckResults(spellcheckData))
+      .catch((error) => console.error("Spellcheck error:", error));
+  };
+
   return (
     <div className="App">
       <h1>Resume Builder</h1>
@@ -159,6 +197,28 @@ function App() {
         </button>
       )}
 
+      <button onClick={handleSpellcheck}>Check Spelling</button>
+
+      {spellcheckResults && (
+        <div>
+          <h2>Spellcheck Suggestions:</h2>
+          {spellcheckResults
+            .filter((result) => result.after.length > 0)
+            .map((result, index) => (
+              <div key={index}>
+                <p>
+                  <strong>Original:</strong> {result.before}
+                </p>
+                <p>
+                  <strong>Suggestions:</strong> {result.after.join(", ")}
+                </p>
+              </div>
+            ))}
+          {spellcheckResults.filter((result) => result.after.length > 0)
+            .length === 0 && <p>No spelling mistakes found!</p>}
+        </div>
+      )}
+
       <br />
       <br />