Searching for Hello

Author: Toruitas

djsr/frontend/src/axiosApi.js

@@ -0,0 +1,43 @@
+// djsr/frontend/src/axiosApi.js
+
+import axios from 'axios'
+
+const axiosInstance = axios.create({
+    baseURL: 'http://127.0.0.1:8000/api/',
+    timeout: 5000,
+    headers: {
+        'Authorization': "JWT " + localStorage.getItem('access_token'),
+        'Content-Type': 'application/json',
+        'accept': 'application/json'
+    }
+});
+
+// axiosInstance.interceptors.response.use(
+//     response => response,
+//     error => {
+//       const originalRequest = error.config;
+//
+//       if (error.response.status === 401) {
+//           const refresh_token = localStorage.getItem('refresh_token');
+//
+//           return axiosInstance
+//               .post('/token/refresh/', {refresh: refresh_token})
+//               .then((response) => {
+//
+//                   localStorage.setItem('access_token', response.data.access);
+//                   localStorage.setItem('refresh_token', response.data.refresh);
+//
+//                   axiosInstance.defaults.headers['Authorization'] = "JWT " + response.data.access;
+//                   originalRequest.headers['Authorization'] = "JWT " + response.data.access;
+//
+//                   return axios(originalRequest);
+//               })
+//               .catch(err => {
+//                   console.log(err)
+//               });
+//       }
+//       return Promise.reject(error);
+//   }
+// );
+
+export default axiosInstance

djsr/frontend/src/components/App.js

@@ -2,6 +2,7 @@ import React, { Component} from "react";
 import { Switch, Route, Link } from "react-router-dom";
 import Login from "./login";
 import Signup from "./signup";
+import Hello from "./hello";
 
 class App extends Component {
     render() {
@@ -11,13 +12,15 @@ class App extends Component {
                     <Link className={"nav-link"} to={"/"}>Home</Link>
                     <Link className={"nav-link"} to={"/login/"}>Login</Link>
                     <Link className={"nav-link"} to={"/signup/"}>Signup</Link>
+                    <Link className={"nav-link"} to={"/hello/"}>Hello</Link>
                 </nav>
                 <main>
                     <h1>Ahhh after 10,000 years I'm free. Time to conquer the Earth!</h1>
 
                     <Switch>
                         <Route exact path={"/login/"} component={Login}/>
                         <Route exact path={"/signup/"} component={Signup}/>
+                        <Route exact path={"/hello/"} component={Hello}/>
                         <Route path={"/"} render={() => <div>Home again</div>}/>
                     </Switch>
                 </main>

djsr/frontend/src/components/hello.js

@@ -0,0 +1,47 @@
+import React, { Component } from "react";
+import axiosInstance from "../axiosApi";
+
+class Hello extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            message:"",
+        };
+
+        this.getMessage = this.getMessage.bind(this)
+    }
+
+    getMessage(){
+        try {
+            let response = axiosInstance.get('/hello/');
+            const message = response.data.hello;
+            this.setState({
+                message: message,
+            });
+            return message;
+        }catch(error){
+            console.log("Error: ", JSON.stringify(error, null, 4));
+            throw error;
+        }
+    }
+
+    componentDidMount(){
+        // It's not the most straightforward thing to run an async method in componentDidMount
+
+        // Version 1 - no async: Console.log will output something undefined.
+        const messageData1 = this.getMessage();
+        console.log("messageData1: ", JSON.stringify(messageData1, null, 4));
+
+
+    }
+
+    render(){
+        return (
+            <div>
+                <p>{this.state.message}</p>
+            </div>
+        )
+    }
+}
+
+export default Hello;

djsr/frontend/src/components/login.js

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import axiosInstance from "../axiosApi";
 
 class Login extends Component {
     constructor(props) {
@@ -14,8 +15,19 @@ class Login extends Component {
     }
 
     handleSubmit(event) {
-        alert('A username and password was submitted: ' + this.state.username + " " + this.state.password);
         event.preventDefault();
+        try {
+            const data = axiosInstance.post('/token/obtain/', {
+                username: this.state.username,
+                password: this.state.password
+            });
+            axiosInstance.defaults.headers['Authorization'] = "JWT " + data.access;
+            localStorage.setItem('access_token', data.access);
+            localStorage.setItem('refresh_token', data.refresh);
+            return data;
+        } catch (error) {
+            throw error;
+        }
     }
 
     render() {

djsr/frontend/static/frontend/public/main.js

@@ -18,6 +18,7 @@
     "webpack-cli": "^3.3.4"
   },
   "dependencies": {
+    "axios": "^0.19.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1"