220. Module Introduction - just intro
221. Building the checkout container
just create Checkout/checkoutSummary JS files
222. Setting up Routing & Routes
<Switch>
<Route path="/checkout" component={Checkout} />
<Route path="/" exact component={BurgerBuilder} />
</Switch>
order is matter and use <Switch> shows only route
223. Navigating to the checkout page
this.props.history.push("/checkout");
yarn add react-router-app and cover {BrowserRouter} in index.js and then work on purchaseContinueHandler(that push('/checkout'))
224. Navigating back & to next page
checkoutCancelled = () => {
this.props.history.goBack();
};
checkoutContinued = () => {
this.props.history.replace("/checkout/contact-data");
};
pass props on each buttons with those 2 functions
225. Passing Ingredients via query params
in BurgerBuilder.js,
const queryParams = [];
for (let i in this.state.ingredients) {
queryParams.push(
encodeURIComponent(i) +
"=" +
encodeURIComponent(this.state.ingredients[i])
);
}
const queryString = queryParams.join("&");
this.props.history.push({
pathname: "/checkout",
search: "?" + queryString,
});
in checkout.js, pass the query from location.search
componentDidMount() {
const query = new URLSearchParams(this.props.location.search);
const ingredients = {};
for (let param of query.entries()) {
ingredients[param[0]] = +param[1]; // ['salad', '1']
}
this.setState({ ingredients: ingredients });
}
226. Navigating to the contact data component
<Route
path={this.props.match.path + "/contact-data"}
component={ContactData}
/>
call contact data component
227. Order Submission & Passing Data Between Pages
... failed to understand this part
228. Adding an Orders Page
just create components
229. Implementing Navigation Links
<NavLink
to={props.link}
exact={props.exact}
activeClassName={classes.active}
>
{props.children}
</NavLink>
230. Fetching orders
componentDidMount() {
axios
.get("./orders.json")
.then((res) => {
const fetchedOrders = [];
for (let key in res.data) {
fetchedOrders.push({ ...res.data[key], id: key });
}
this.setState({ loading: false, orders: fetchedOrders });
})
.catch((err) => {
this.setState({ loading: false });
});
}
make it work with backend
231. Outputting the orders
const ingredients = [];
for (let ingredientName in props.ingredients) {
ingredients.push({
name: ingredientName,
amount: props.ingredients[ingredientName],
});
}
const ingredientsOutput = ingredients.map((ig) => {
return (
<span
style={{
textTransform: "capitalize",
display: "inline-block",
margin: "0 8px",
border: "1px solid #ccc",
padding: "5px",
}}
key={ig.name}
>
{ig.name} ({ig.amount})
</span>
);
});
Comments
Post a Comment