-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #28 from khanh-devos/get-new-ebike
8. [5pts] Add new ebike feature #41
- Loading branch information
Showing
6 changed files
with
283 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| // YourComponent.js | ||
| import React, { useState } from 'react'; | ||
| import { useDispatch } from 'react-redux'; | ||
| import { postEbike } from '../redux/ebike/addingNewbike'; | ||
|
|
||
| function EbikeForm() { | ||
| const dispatch = useDispatch(); | ||
|
|
||
| const [ebikeData, setEbikeData] = useState({ | ||
| name: '', | ||
| model: '', | ||
| image: '', | ||
| description: '', | ||
| price: 0, | ||
| city: '', | ||
| weight: 0, | ||
| }); | ||
|
|
||
| const handleChange = (e) => { | ||
| setEbikeData({ ...ebikeData, [e.target.name]: e.target.value }); | ||
| }; | ||
|
|
||
| const handleSubmit = (e) => { | ||
| e.preventDefault(); | ||
| dispatch(postEbike(ebikeData)); | ||
| setEbikeData({ | ||
| name: '', | ||
| model: '', | ||
| image: '', | ||
| description: '', | ||
| price: 0, | ||
| city: '', | ||
| weight: 0, | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="mainclass"> | ||
| <form onSubmit={handleSubmit} className="getInput"> | ||
| <h1>Add your new ebike</h1> | ||
| <div className=""> | ||
| <input required name="name" value={ebikeData.name} onChange={handleChange} label="set your name" type="text" placeholder="add your name" /> | ||
| </div> | ||
| <div className=""> | ||
| <select type="text" required name="model" value={ebikeData.model} onChange={handleChange} placeholder="Model"> | ||
| <option selected hidden value="Pedego-bike">Select your ebike</option> | ||
| <option value="Rad Power Bikes">Rad Power Bikes</option> | ||
| <option value="Specialized Turbo">Rad Power Bikes</option> | ||
| <option value="Haibike">Haibike</option> | ||
| <option value="Gazelle">Gazelle</option> | ||
| <option value="Trek Electric Bikes">Trek Electric Bikes</option> | ||
| <option value="Raleigh Electric">Raleigh Electric</option> | ||
| <option value="Juiced Bikes">Juiced Bikes</option> | ||
| <option value="Ariel Rider">Ariel Rider</option> | ||
| <option value="Riese & Mülle">Riese & Mülle</option> | ||
| </select> | ||
| </div> | ||
| <div className=""> | ||
| <input type="text" required name="image" value={ebikeData.image} onChange={handleChange} placeholder="Image URL" /> | ||
| </div> | ||
| <div className=""> | ||
| <textarea name="description" required value={ebikeData.description} onChange={handleChange} placeholder="Description" /> | ||
| </div> | ||
| <div className=""> | ||
| <input type="number" required name="price" value={ebikeData.price} onChange={handleChange} placeholder="Price" /> | ||
| </div> | ||
| <div className=""> | ||
| <select type="text" required name="city" value={ebikeData.city} onChange={handleChange} placeholder="City"> | ||
| <option selected hidden value="Pedego-bike">Select your city</option> | ||
| <option value="Kigali">Kigali</option> | ||
| <option value="Zambia">Zambia</option> | ||
| <option value="Ghana">Ghana</option> | ||
| <option value="Tanzania">Tanzania</option> | ||
| <option value="India">India</option> | ||
| <option value="Congo(drc)">Congo(drc)</option> | ||
| <option value="Nigeria">Nigeria</option> | ||
| <option value="Zimbabwe">Zimbabwe</option> | ||
| <option value="Uganda">Uganda</option> | ||
| </select> | ||
| </div> | ||
| <div className=""> | ||
| <input type="number" required name="weight" value={ebikeData.weight} onChange={handleChange} placeholder="Weight" /> | ||
| </div> | ||
| <button type="submit">Submit</button> | ||
| </form> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default EbikeForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| // ebikeSlice.js | ||
| import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'; | ||
| import axios from 'axios'; | ||
|
|
||
| const EBIKE_URL = 'http://localhost:3100/api/v1/ebikes'; | ||
|
|
||
| const initialState = { | ||
| ebikes: {}, | ||
| ebikeLoading: false, | ||
| ebikeError: false, | ||
| ebikeSuccess: false, | ||
| ebikeMessage: '', | ||
| }; | ||
|
|
||
| export const postEbike = createAsyncThunk( | ||
| 'ebike/postEbike', | ||
| async (ebikeData, thunkAPI) => { | ||
| try { | ||
| const { token } = JSON.parse(localStorage.getItem('ebikeData')); | ||
| const res = await axios.post(EBIKE_URL, ebikeData, { | ||
| headers: { | ||
| 'content-type': 'application/json', | ||
| Authorization: `Bearer ${token}`, | ||
| }, | ||
| }); | ||
| return res.data; | ||
| } catch (err) { | ||
| return thunkAPI.rejectWithValue('add new ebike failed'); | ||
| } | ||
| }, | ||
| ); | ||
|
|
||
| const ebikeSliceadding = createSlice({ | ||
| name: 'ebikeSliceadding', | ||
| initialState, | ||
| reducers: {}, | ||
| extraReducers: (builder) => { | ||
| builder | ||
| .addCase(postEbike.pending, (state) => ({ | ||
| ...state, | ||
| ebikeLoading: true, | ||
| })) | ||
| .addCase(postEbike.fulfilled, (state, { payload }) => ({ | ||
| ...state, | ||
| ebikeLoading: false, | ||
| ebikes: payload, | ||
| ebikeSuccess: true, | ||
| })) | ||
| .addCase(postEbike.rejected, (state, { payload }) => ({ | ||
| ...state, | ||
| ebikeLoading: false, | ||
| ebikeError: true, | ||
| ebikeMessage: payload, | ||
| })); | ||
| }, | ||
| }); | ||
|
|
||
| export default ebikeSliceadding.reducer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters