connecting react with flask 3

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"
 }

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;

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>