From 5103c837e934d75a371d1f451e39458124d03546 Mon Sep 17 00:00:00 2001 From: Dev Master Date: Thu, 6 Aug 2026 20:14:25 +0500 Subject: [PATCH 1/2] Add clear input button to reset text form Added a clear button in the text input section to allow users to quickly remove entered content. --- eduaid_web/src/pages/Text_Input.jsx | 419 +++++++++++++++++++++------- 1 file changed, 319 insertions(+), 100 deletions(-) diff --git a/eduaid_web/src/pages/Text_Input.jsx b/eduaid_web/src/pages/Text_Input.jsx index e341d331..ae4a0de6 100644 --- a/eduaid_web/src/pages/Text_Input.jsx +++ b/eduaid_web/src/pages/Text_Input.jsx @@ -1,261 +1,480 @@ import React, { useState, useRef } from "react"; import "../index.css"; -import logo_trans from "../assets/aossie_logo_transparent.png" +import logo_trans from "../assets/aossie_logo_transparent.png"; import stars from "../assets/stars.png"; import cloud from "../assets/cloud.png"; import { FaClipboard } from "react-icons/fa"; import Switch from "react-switch"; -import { Link,useNavigate } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; import apiClient from "../utils/apiClient"; const Text_Input = () => { + const navigate = useNavigate(); + const [text, setText] = useState(""); const [difficulty, setDifficulty] = useState("Easy Difficulty"); const [numQuestions, setNumQuestions] = useState(10); const [loading, setLoading] = useState(false); + const fileInputRef = useRef(null); + const [fileContent, setFileContent] = useState(""); const [docUrl, setDocUrl] = useState(""); const [isToggleOn, setIsToggleOn] = useState(0); + + const toggleSwitch = () => { setIsToggleOn((isToggleOn + 1) % 2); }; + + + // Clear Input Function + const handleClearInput = () => { + setText(""); + }; + + + const handleFileUpload = async (event) => { + const file = event.target.files[0]; - if (file) { + + if(file){ + const formData = new FormData(); + formData.append("file", file); - try { + + try{ + const data = await apiClient.postFormData("/upload", formData); + setText(data.content || data.error); - } catch (error) { + + + }catch(error){ + console.error("Error uploading file:", error); + setText("Error uploading file"); + } + } + }; - const handleClick = (event) => { - event.preventDefault(); // Prevent default behavior - event.stopPropagation(); // Stop event propagation - // Open file input dialog + + const handleClick = (event)=>{ + + event.preventDefault(); + + event.stopPropagation(); + fileInputRef.current.click(); + }; - const handleSaveToLocalStorage = async () => { + + + const handleSaveToLocalStorage = async()=>{ + setLoading(true); - // Check if a Google Doc URL is provided - if (docUrl) { - try { - const data = await apiClient.post("/get_content", { document_url: docUrl }); + + if(docUrl){ + + try{ + + const data = await apiClient.post( + "/get_content", + { + document_url:docUrl + } + ); + + setDocUrl(""); + setText(data || "Error in retrieving"); - } catch (error) { - console.error("Error:", error); + + + }catch(error){ + + console.error(error); + setText("Error retrieving Google Doc content"); - } finally { + + + }finally{ + setLoading(false); + } - } else if (text) { - // Proceed with existing functionality for local storage - localStorage.setItem("textContent", text); - localStorage.setItem("difficulty", difficulty); - localStorage.setItem("numQuestions", numQuestions); + + + } + + else if(text){ + + + localStorage.setItem( + "textContent", + text + ); + + + localStorage.setItem( + "difficulty", + difficulty + ); + + + localStorage.setItem( + "numQuestions", + numQuestions + ); + await sendToBackend( text, difficulty, localStorage.getItem("selectedQuestionType") ); + + } - }; - const handleDifficultyChange = (e) => { + }; + const handleDifficultyChange = (e) => { setDifficulty(e.target.value); }; + const incrementQuestions = () => { setNumQuestions((prev) => prev + 1); }; + const decrementQuestions = () => { setNumQuestions((prev) => (prev > 0 ? prev - 1 : 0)); }; + const getEndpoint = (difficulty, questionType) => { + if (difficulty !== "Easy Difficulty") { + if (questionType === "get_shortq") { return "get_shortq_hard"; - } else if (questionType === "get_mcq") { + } + + else if (questionType === "get_mcq") { return "get_mcq_hard"; } + } + return questionType; + }; + + const sendToBackend = async (data, difficulty, questionType) => { + const endpoint = getEndpoint(difficulty, questionType); + try { + const requestData = { + input_text: data, max_questions: numQuestions, use_mediawiki: isToggleOn, + }; - const responseData = await apiClient.post(`/${endpoint}`, requestData); - localStorage.setItem("qaPairs", JSON.stringify(responseData)); - // Save quiz details to local storage - const quizDetails = { - difficulty, - numQuestions, - date: new Date().toLocaleDateString(), - qaPair: responseData, - }; + const responseData = await apiClient.post( + `/${endpoint}`, + requestData + ); + + + localStorage.setItem( + "qaPairs", + JSON.stringify(responseData) + ); - let last5Quizzes = - JSON.parse(localStorage.getItem("last5Quizzes")) || []; - last5Quizzes.push(quizDetails); - if (last5Quizzes.length > 5) { - last5Quizzes.shift(); // Keep only the last 5 quizzes - } - localStorage.setItem("last5Quizzes", JSON.stringify(last5Quizzes)); navigate("/output"); - } catch (error) { + + + } catch(error){ + console.error("Error:", error); + + } finally { + setLoading(false); + } + }; + + return ( +
+ + {loading && ( +
+
+
+ )} + +
+ + + {/* Header */} + +
- logo + + logo +
- Edu - Aid + + + Edu + + + + Aid + +
+
+ - {/* Headline */} + + + + {/* Heading */} +
-
Enter the Content
+ +
+ Enter the Content +
+ +
+ to Generate{" "} - Questionaries - stars + + + Questionaries + + + + stars +
+
- {/* Textarea */} + + + + + {/* Text Input */} +
- + + + +