From ee637b2b8264c5a79ace95c4940de6be7a3a33d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thau=C3=A3=20Magalh=C3=A3es?= Date: Fri, 1 Dec 2023 10:44:15 -0300 Subject: [PATCH] feat: train page added && menu added --- package.json | 1 + src/App.tsx | 8 +++- src/components/menu/menu.tsx | 44 +++++++++++++++++ src/index.tsx | 5 +- src/pages/home.tsx | 5 +- src/pages/train.tsx | 91 ++++++++++++++++++++++++++++++++++++ src/routes/elements.tsx | 1 + src/routes/index.tsx | 6 ++- yarn.lock | 5 ++ 9 files changed, 159 insertions(+), 7 deletions(-) create mode 100644 src/components/menu/menu.tsx create mode 100644 src/pages/train.tsx diff --git a/package.json b/package.json index 55fa47ff..9068f09a 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "electron-process": "^0.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.12.0", "react-papaparse": "^4.1.0", "react-router-dom": "^6.15.0", "react-scripts": "5.0.1", diff --git a/src/App.tsx b/src/App.tsx index 47854d16..83760c8e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,14 @@ +import { HashRouter } from "react-router-dom"; import "./App.css"; import Router from "./routes"; function App() { - return ; + return ( + + {/* HashRouter é rota com # ex: google.com#/rota-aqui*/} + + + ); } export default App; diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx new file mode 100644 index 00000000..26e644e5 --- /dev/null +++ b/src/components/menu/menu.tsx @@ -0,0 +1,44 @@ +import React, { useState } from "react"; +import { HiOutlineMenu, HiOutlineX } from "react-icons/hi"; // Importando ícones do React Icons +import { Link } from "react-router-dom"; + +export function Menu() { + const [isExpanded, setIsExpanded] = useState(false); + + const toggleMenu = () => { + setIsExpanded(!isExpanded); + }; + + return ( + + ); +} diff --git a/src/index.tsx b/src/index.tsx index bc2a2105..cfd77849 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,15 +2,12 @@ import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; -import { HashRouter } from "react-router-dom"; const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); root.render( - {/* HashRouter é rota com # ex: google.com#/rota-aqui*/} - - + ); diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 45517a1f..fe775271 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -2,6 +2,7 @@ import { useState } from "react"; import SelectFileCard from "../components/selectFileCard/selectFileCard"; import axios from "axios"; import ResultTable from "../components/resultTable/resultTable"; +import { Menu } from "../components/menu/menu"; export default function Home() { const [selectedFile, setSelectedFile] = useState(null); @@ -27,7 +28,7 @@ export default function Home() { const handleSubmit = async () => { setIsLoading(true); let selectedData = data.map((row) => row[selectedColumn]); - console.log(selectedData) + console.log(selectedData); console.log(selectedClassifier); const response = await axios .post("http://localhost:5000/classify", { @@ -89,6 +90,8 @@ export default function Home() { return (
+ +

LinguifAI diff --git a/src/pages/train.tsx b/src/pages/train.tsx new file mode 100644 index 00000000..3b069be9 --- /dev/null +++ b/src/pages/train.tsx @@ -0,0 +1,91 @@ +import { useState } from "react"; +import SelectFileCard from "../components/selectFileCard/selectFileCard"; +import axios from "axios"; +import ResultTable from "../components/resultTable/resultTable"; +import { Menu } from "../components/menu/menu"; + +export default function Train() { + const [selectedFile, setSelectedFile] = useState(null); + + const [data, setData] = useState([]); + const [header, setHeader] = useState([]); + + const [selectedColumn, setSelectedColumn] = useState(0); + const [selectedLabel, setSelectedLabel] = useState(""); + + const [result, setResult] = useState<{ [key: string]: any }>({}); + + const [isLoading, setIsLoading] = useState(false); + + const handleChangeSelectedColumn = (event: any) => { + setSelectedColumn(event.target.value); + }; + + const handleChangeSelectedLabel = (event: any) => { + setSelectedLabel(event.target.value); + }; + + const handleSubmit = async () => {}; + + return ( +
+ + +
+

+ LinguifAI +

+ + { + + } + +
+ +
+ +
+ +
+ +
+ +
+
+
+ ); +} diff --git a/src/routes/elements.tsx b/src/routes/elements.tsx index 05929859..b6426206 100644 --- a/src/routes/elements.tsx +++ b/src/routes/elements.tsx @@ -12,3 +12,4 @@ const Loadable = (Component: ElementType) => (props: any) => { }; export const Home = Loadable(lazy(() => import("../pages/home"))); +export const Train = Loadable(lazy(() => import("../pages/train"))); diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 0b70ee7c..3f4a70ba 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,5 +1,5 @@ import { Navigate, useRoutes } from "react-router-dom"; -import { Home } from "./elements"; +import { Home, Train } from "./elements"; export default function Router() { return useRoutes([ @@ -7,6 +7,10 @@ export default function Router() { path: "/", element: , }, + { + path: "/train", + element: , + }, { path: "*", element: }, { path: "/404", element: <>404 }, ]); diff --git a/yarn.lock b/yarn.lock index 2c7833cb..f483db3d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8377,6 +8377,11 @@ react-error-overlay@^6.0.11: resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz" integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg== +react-icons@^4.12.0: + version "4.12.0" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.12.0.tgz#54806159a966961bfd5cdb26e492f4dafd6a8d78" + integrity sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw== + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"