I have a signup component which has a form, and a handleFormSubmit. It calls an api to route to the server which runs a sequelize create. That all works, but once the row is inserted, I would like to redirect to a certain view.
Currently in the promise after the insert, I have a history.push("/dashboard"). However this is just appending to the browser url and not actually redirecting.
here is the signup component so you can see the form, and also the handleFormSubmit. I would simply like it to redirect to the "/dashboard" route:
import React, { Component } from "react";
import PropTypes from "prop-types";
import {
Card,
CardHeader,
ListGroup,
ListGroupItem,
Row,
Col,
Form,
FormGroup,
FormInput,
FormSelect,
FormTextarea,
Button
} from "shards-react";
// GET DATA FROM API (which calls routes from express server)
import API from "../../utils/API";
import Auth from "../../utils/Auth";
import { createHashHistory } from 'history'
export const history = createHashHistory();
class Signup extends Component {
state = {
};
handleInputChange = event => {
const { id, value } = event.target;
this.setState({
[id]: value
});
};
handleFormSubmit = event => {
event.preventDefault();
// console.log("Yo");
API.addUser({
firstName: this.state.feFirstName,
lastName: this.state.feLastName,
email: this.state.feEmail,
password: this.state.fePassword,
address1: this.state.feAddress,
city: this.state.feCity,
state: this.state.feInputState,
zip: this.state.feZipCode,
description: this.state.feDescription,
userName: this.state.feEmail,
imageLink: this.state.feImage,
title: this.state.feTitle,
github: this.state.feGithub,
linkedin: this.state.feLinkedIn,
phone: "",
userRating: "1",
bizRating: "1"
})
.then( res =>
// console.log("Added,apparently");
{
// set the token and then redirect to the "/books" route
// Auth.setToken(res.data.token);
Auth.setToken(res.data.token);
// console.log("TOKEN: " , res.data.token);
console.log(res.data);
history.push(`/dashboard/`);
})
.catch(err => console.log(err));
// }
}
render() {
return (
<Card small className="mb-4">
<CardHeader className="border-bottom">
<h6 className="m-0">Personal Info</h6>
</CardHeader>
<ListGroup flush>
<ListGroupItem className="p-3">
<Row>
<Col>
<Form>
<Row form>
{/* First Name */}
<Col md="6" className="form-group">
<label htmlFor="feFirstName">First Name</label>
<FormInput
id="feFirstName"
placeholder="First Name"
// value=""
onChange={this.handleInputChange}
/>
</Col>
{/* Last Name */}
<Col md="6" className="form-group">
<label htmlFor="feLastName">Last Name</label>
<FormInput
id="feLastName"
placeholder="Last Name"
// value=""
onChange={this.handleInputChange}
/>
</Col>
</Row>
<Row form>
{/* Email */}
<Col md="6" className="form-group">
<label htmlFor="feEmail">Email</label>
<FormInput
type="email"
id="feEmail"
placeholder="Email Address"
// value=""
onChange={this.handleInputChange}
autoComplete="email"
/>
</Col>
{/* Password */}
<Col md="6" className="form-group">
<label htmlFor="fePassword">Password</label>
<FormInput
type="password"
id="fePassword"
placeholder="Password"
// value=""
onChange={this.handleInputChange}
autoComplete="current-password"
/>
</Col>
</Row>
<FormGroup>
<label htmlFor="feAddress">Address</label>
<FormInput
id="feAddress"
placeholder="Address"
// value=""
onChange={this.handleInputChange}
/>
</FormGroup>
<Row form>
{/* City */}
<Col md="6" className="form-group">
<label htmlFor="feCity">City</label>
<FormInput
id="feCity"
placeholder="City"
// value=""
onChange={this.handleInputChange}
/>
</Col>
{/* State */}
<Col md="4" className="form-group">
<label htmlFor="feInputState">State</label>
<FormSelect id="feInputState">
<option>Choose...</option>
<option>...</option>
</FormSelect>
</Col>
{/* Zip Code */}
<Col md="2" className="form-group">
<label htmlFor="feZipCode">Zip</label>
<FormInput
id="feZipCode"
placeholder="Zip"
// value=""
onChange={this.handleInputChange}
/>
</Col>
</Row>
<Row form>
{/* Title */}
<Col md="6" className="form-group">
<label htmlFor="feTitle">Title</label>
<FormInput
id="feTitle"
placeholder="Title"
// value=""
onChange={this.handleInputChange}
/>
</Col>
{/* Image */}
<Col md="6" className="form-group">
<label htmlFor="feImage">Image</label>
<FormInput
id="feImage"
placeholder="Image"
// value=""
onChange={this.handleInputChange}
/>
</Col>
</Row>
<Row form>
{/* Github */}
<Col md="6" className="form-group">
<label htmlFor="feGithub">Github</label>
<FormInput
id="feGithub"
placeholder="Github Profile"
// value=""
onChange={this.handleInputChange}
/>
</Col>
{/* LinkedIn */}
<Col md="6" className="form-group">
<label htmlFor="feLinkedIn">LinkedIn</label>
<FormInput
id="feLinkedIn"
placeholder="LinkedIn Profile"
// value=""
onChange={this.handleInputChange}
/>
</Col>
</Row>
<Row form>
{/* Description */}
<Col md="12" className="form-group">
<label htmlFor="feDescription">Description</label>
<FormTextarea id="feDescription" rows="5"
// value=""
onChange={this.handleInputChange}
/>
</Col>
</Row>
<Button onClick={this.handleFormSubmit} theme="accent">Add Account</Button>
</Form>
</Col>
</Row>
</ListGroupItem>
</ListGroup>
</Card>
);
}
}
export default Signup;
I also want to note that this is the shards dashboard template, so this is how the client app.js is set.
import { BrowserRouter as Router, Route } from "react-router-dom";
import routes from "./routes";
import withTracker from "./withTracker";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles/shards-dashboards.1.1.0.min.css";
export default () => (
<Router basename={process.env.REACT_APP_BASENAME || ""}>
<div>
{routes.map((route, index) => {
return (
<Route
key={index}
path={route.path}
exact={route.exact}
component={withTracker(props => {
return (
<route.layout {...props}>
<route.component {...props} />
</route.layout>
);
})}
/>
);
})}
</div>
</Router>
);
And that being the case, it references my routes.js like this. so I do have routes set.
// CUSTOM ROUTES
import Home from "./views/Home";
import Portfolio from "./views/UserPortfolio";
import AddFolio from "./views/PortfolioAdd";
import AddProject from "./views/ProjectAdd";
import Signup from "./views/SignUp";
import Dashboard from "./views/Dashboard";
export default [
{
path: "/",
exact: true,
layout: DefaultLayout,
component: () => <Redirect to="/home" />
},
{
path: "/home",
layout: DefaultLayout,
component: Home
},
{
path: "/folio",
layout: DefaultLayout,
component: Portfolio
},
{
path: "/addfolio",
layout: DefaultLayout,
component: AddFolio
},
{
path: "/addproject",
layout: DefaultLayout,
component: AddProject
},
// USER ROUTES
{
path: "/signup",
layout: DefaultLayout,
component: Signup
},
{
path: "/dashboard",
layout: DefaultLayout,
component: Dashboard
},
In the end I would simply like to see a redirect to ANY route in the promise, doesn't matter to me which one. Just so I see it working.
so please let me know what info needs to be provided, because i'm not sure how familiar everyone is with a shards implementation, as it is apparently sort of different from a standard react route setup. I'm sure I'm leaving out some info. Thanks all!
