Fetchdata

package.json

@@ -40,6 +40,8 @@
   "dependencies": {
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
+    "axios": "^0.19.0",
+    "history": "^4.9.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1"

src/components/category/container.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Loader from '../common/loader'
 import Error from '../common/error'
+import { getCategoryId } from '../../helpers/api'
 
 class Category extends React.Component {
   constructor() {
@@ -13,12 +14,10 @@ class Category extends React.Component {
 
   componentWillMount() {
     const id = this.props.match.params.id
-    fetch(`http://127.0.0.1:3000/api/v1/category/${id}`)
-      .then(res => res.json())
-      .then(output => {
-        this.setState({ category: output, isloading: false })
-        console.log(output)
-      })
+    getCategoryId(id).then(output => {
+      this.setState({ category: output, isloading: false })
+      console.log(output)
+    })
   }
 
   render() {

src/components/home/container.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Loader from '../common/loader'
 import { Link } from 'react-router-dom'
 import ErrorComponent from '../common/error'
+import { getAllPackage, getAllCategory } from '../../helpers/api'
 
 class Fetch extends React.Component {
   constructor() {
@@ -14,17 +15,15 @@ class Fetch extends React.Component {
     }
   }
 
-  componentWillMount() {
-    fetch('http://127.0.0.1:3000/api/v1/package/all')
-      .then(res => res.json())
+  componentDidMount() {
+    getAllPackage()
       .then(pkg_output => {
         this.setState({ pkg: pkg_output, isloading: false })
         console.log(pkg_output)
       })
       .catch(error => this.setState({ error, isloading: false }))
 
-    fetch('http://127.0.0.1:3000/api/v1/category/all')
-      .then(res => res.json())
+    getAllCategory()
       .then(category_output => {
         this.setState({ category: category_output, isloading: false })
         console.log(category_output)

src/components/home/index.js

@@ -1,8 +1,3 @@
-import React from 'react'
 import Home from './container'
 
-export default class Home extends React.Component {
-  render() {
-    return <Home />
-  }
-}
+export default Home

src/components/login/history.js

@@ -0,0 +1,3 @@
+import { createBrowserHistory } from 'history'
+
+export default createBrowserHistory()

src/components/login/index.js

@@ -0,0 +1,3 @@
+import SignUp from './signup'
+
+export default SignUp

src/components/login/signup.jsx

@@ -0,0 +1,132 @@
+import React, { Component } from 'react'
+// import history from './history'
+import { withRouter } from 'react-router-dom'
+
+import Home from '../home'
+import { PostUser } from '../../helpers/postform'
+
+class Postform extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      first_name: 'aravind',
+      last_name: 'krishnan',
+      email: 'abcde@gmail.com',
+      phone: '987654321',
+      password: 'hbdfufenifnernfin',
+    }
+  }
+
+  changeHandler = event => {
+    this.setState({ [event.target.name]: event.target.value })
+  }
+
+  submitHandler = event => {
+    event.preventDefault()
+    const { history } = this.props
+    console.log(history)
+    const { first_name, last_name, email, password, phone } = this.state
+    const user = {
+      first_name,
+      last_name,
+      email,
+      phone,
+      password,
+    }
+
+    PostUser(user).then(res => {
+      const output = res.data.success
+
+      console.log(output)
+      if ((status = 200 && output == true)) {
+        console.log('reg success')
+        // console.log(props.history)
+        // this.props.history.push('/')
+      } else {
+        console.log('faile')
+      }
+    })
+  }
+  //   const response = await axios({
+  //     method: 'POST',
+  //     url: 'http://localhost:3000/api/v1/user',
+  //     data: user,
+  //   }).then(res => {
+  //     const output = res.data.success
+  //     // console.log(output)
+
+  //     if ((status = 200 && output == true)) {
+  //       console.log('reg success')
+  //     } else {
+  //       console.log('faile')
+  //     }
+  //   })
+
+  // console.log(response.body)
+
+  render() {
+    const { first_name, last_name, email, password, phone } = this.state
+
+    return (
+      <div>
+        <form>
+          <div>
+            <input
+              type="text"
+              name="first_name"
+              placeholder="firstname"
+              value={first_name}
+              onChange={this.changeHandler}
+            />
+          </div>
+
+          <div>
+            <input
+              type="text"
+              name="last_name"
+              placeholder="lastname"
+              value={last_name}
+              onChange={this.changeHandler}
+            />
+          </div>
+          <div>
+            <input
+              type="email"
+              name="email"
+              placeholder="email"
+              value={email}
+              onChange={this.changeHandler}
+            />
+          </div>
+          <div>
+            <input
+              type="password"
+              name="password"
+              placeholder="password"
+              value={password}
+              onChange={this.changeHandler}
+            />
+          </div>
+          <div>
+            <input
+              type="tel"
+              name="phone"
+              placeholder="phone"
+              value={phone}
+              onChange={this.changeHandler}
+            />
+          </div>
+
+          <div>
+            <button type="submit" onClick={this.submitHandler}>
+              Submit
+            </button>
+          </div>
+        </form>
+      </div>
+    )
+  }
+}
+
+export default Postform

src/components/package/container.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Loader from '../common/loader'
 import Error from '../common/error'
-
+import { getPackageId } from '../../helpers/api'
 class Package extends React.Component {
   constructor(props) {
     super(props)
@@ -15,8 +15,7 @@ class Package extends React.Component {
   componentDidMount() {
     const id = this.props.match.params.id
 
-    fetch(`http://127.0.0.1:3000/api/v1/package/${id}`)
-      .then(res => res.json())
+    getPackageId(id)
       .then(output => {
         this.setState({ pkg: output, isloading: false })
         console.log(output)

src/components/router.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Switch, BrowserRouter as Router, Route } from 'react-router-dom'
 import Home from './home'
+import Login from './login/signup'
 import Package from './package'
 import Category from './category'
 
@@ -9,9 +10,11 @@ class Routing extends React.Component {
     return (
       <Router>
         <Switch>
+          <Route exact path="/login" render={props => <Login {...props} />} />
           <Route exact path="/" component={Home} />
           <Route path="/package/:id/" component={Package} />
           <Route path="/category/:id/" component={Category} />
+          {/* <Route path="/login" component={Postform} /> */}
           {/* TODO: <Route component={Nf} /> */}
         </Switch>
       </Router>