From 065aba024259fa22c5c374c37bccd0e7273904f2 Mon Sep 17 00:00:00 2001 From: Mia Wang <yw21218@ic.ac.uk> Date: Tue, 19 Apr 2022 11:59:44 +0100 Subject: [PATCH] connecting react with flask 3 --- .DS_Store | Bin 8196 -> 8196 bytes package.json | 6 +-- src/App.js | 115 ++++++++++++++++++++++++++-------------------- src/pages/Home.js | 18 ++++---- 4 files changed, 76 insertions(+), 63 deletions(-) diff --git a/.DS_Store b/.DS_Store index 9eccfc2722da16d3dadb5c569acd3c025e7c1ca7..9404c57f38564b186e1a89498e6e3ee88cf4da81 100644 GIT binary patch delta 267 zcmZp1XmQw}B9OpptDeokz`(+w$B@pD$xxD;@8Xh_lb-|>;{f7q*V&FZqROY>l`qIJ z3{K9^Edc6aVEwJYFnOJT)Z}>rTUb~ut#c=b3CgjCt~FeGZ1Q|T(aC*+JaC>O3(J`a z43h<fL?+)5+|P8Ed-6;n1?C3!Ba`<CZDSEwdg;_;FJT!GH0QlN33MJ*0>xc$34UY; bi8BdIW)wNgWD+^~f`}xO;<3%IMI^ZaTgXc} delta 267 zcmZp1XmQw}B9OrHboOlq1_l-eJ%)6KOoo!&d>5Cboctu97zYDGgU%7QBaW!@DR|`z zG7N*0^K%P;dKg&q7cfj-Cm=O>p1>9sW|z4KCx;2ju|~Z1Ry;a+zM$yjK0zKhPmzUr z*#(Bl0zx8_ZwT&Zy5l){rjWwq`$7_vFA6PWVPNiHnd~JjBZBO_$*d`&`+?4bN+8^Y gEWwZLAO_|MlNm+MGFgUAz91sWH0j9Z*CLYK0J#WE+W-In diff --git a/package.json b/package.json index 8fbf76ae..9be4245f 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,6 @@ "name": "react_app_metarl", "version": "0.1.0", "private": true, - "proxy": "http://localhost:5000", "dependencies": { "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.1.1", @@ -15,7 +14,7 @@ }, "scripts": { "start": "react-scripts start", - "start-backend": "cd backend && flask run --no-debugger", + "start-backend": "cd backend && env/bin/flask run --no-debugger", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" @@ -37,5 +36,6 @@ "last 1 firefox version", "last 1 safari version" ] - } + }, + "proxy": "http://127.0.0.1:5000" } diff --git a/src/App.js b/src/App.js index 99c38f06..17f212cc 100644 --- a/src/App.js +++ b/src/App.js @@ -2,64 +2,77 @@ import Home from './pages/Home'; import './App.css'; import React, { useState, useEffect } from "react"; import axios from "axios"; +import logo from './logo.svg'; // import {BrowerRouter as Router, Route, Switch} from 'react-router-dom'; function App() { + // new line start + const [profileData, setProfileData] = useState(null) - const [formData, setFormData] = useState(null) + function getData() { + axios({ + method: "GET", + url:"/profile", + }) + .then((response) => { + const res =response.data + setProfileData(({ + profile_name: res.name, + about_me: res.about})) + }).catch((error) => { + if (error.response) { + console.log(error.response) + console.log(error.response.status) + console.log(error.response.headers) + } + })} + //end of new line - function getData() { - axios({ - method: "POST", - url:"/profile", - }) - .then((response) => { - const res =response.data - setProfileData(({ - profile_name: res.name, - about_me: res.about})) - }).catch((error) => { - if (error.response) { - console.log(error.response) - console.log(error.response.status) - console.log(error.response.headers) - } - })} + return ( + <div className="App"> + <header className="App-header"> + <img src={logo} className="App-logo" alt="logo" /> + <p> + Edit <code>src/App.js</code> and save to reload. + </p> + <a + className="App-link" + href="https://reactjs.org" + target="_blank" + rel="noopener noreferrer" + > + Learn React + </a> - return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.js</code> and save to reload. - </p> - <a - className="App-link" - href="https://reactjs.org" - target="_blank" - rel="noopener noreferrer" - > - Learn React - </a> - - {/* new line start*/} - <p>To get your profile details: </p><button onClick={getData}>Click me</button> - {profileData && <div> - <p>Profile name: {profileData.profile_name}</p> - <p>About me: {profileData.about_me}</p> - </div> - } - {/* end of new line */} - </header> - </div> - ); - - // return ( - // <div> - // <Home /> - // </div> - // ); + {/* new line start*/} + <p>To get your profile details: </p><button onClick={getData}>Click me</button> + {profileData && <div> + <p>Profile name: {profileData.profile_name}</p> + <p>About me: {profileData.about_me}</p> + </div> + } + {/* end of new line */} + </header> + </div> + ); } +// useEffect(() => { +// fetch('/', { +// method: 'POST', +// headers: { 'Content-Type': 'application/json' }, +// body: JSON.stringify({ }) +// }) +// .then((response) => response.json()) +// .then((data) => console.log(data)); +// }, []); + +// return ( +// <div> +// <Home /> +// </div> +// ); +// } + export default App; diff --git a/src/pages/Home.js b/src/pages/Home.js index dc1f08bb..2d3d1580 100644 --- a/src/pages/Home.js +++ b/src/pages/Home.js @@ -8,34 +8,34 @@ class Home extends React.Component{ <div> <h1>Meta Reinforcement Learning for Data Augmentation</h1> <h3>Choose your dataset</h3> - <form action="/user_input" method="POST" enctype="multipart/form-data"> - <label for="dataset_upload">You can upload your dataset folder here:</label> - <input type="file" id='dataset_upload' name="dataset_upload" class="upload" /><br></br> + <form action="/user_input" method="POST" encType="multipart/form-data"> + <label htmlFor="dataset_upload">You can upload your dataset folder here:</label> + <input type="file" id='dataset_upload' name="dataset_upload" className="upload" /><br></br> Or you can select a dataset from our database: <br/> <input type="radio" id="dataset1" name="dataset_selection" value="MNIST" /> - <label for="dataset1">MNIST dataset</label><br/> + <label htmlFor="dataset1">MNIST dataset</label><br/> <input type="radio" id="dataset2" name="dataset_selection" value="KMNIST" /> - <label for="dataset2">KMNIST dataset</label><br /> + <label htmlFor="dataset2">KMNIST dataset</label><br /> <input type="radio" id="dataset3" name="dataset_selection" value="FashionMNIST" /> - <label for="dataset3">FashionMNIST dataset</label><br /> + <label htmlFor="dataset3">FashionMNIST dataset</label><br /> <input type="radio" id="dataset4" name="dataset_selection" value="CIFAR10" /> - <label for="dataset4">CIFAR10 dataset</label><br /> + <label htmlFor="dataset4">CIFAR10 dataset</label><br /> <input type="radio" id="dataset5" name="dataset_selection" value="CIFAR100" /> - <label for="dataset5">CIFAR100 dataset</label><br /> + <label htmlFor="dataset5">CIFAR100 dataset</label><br /> <input type="radio" id="dataset6" name="dataset_selection" value="Other" /> - <label for="dataset6">Other dataset DIFFERENT</label><br /><br /> + <label htmlFor="dataset6">Other dataset DIFFERENT</label><br /><br /> <input type="submit"></input> </form> -- GitLab