Add Place 👨‍💻

src/AddPlace.css

@@ -0,0 +1,38 @@
+.form-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #f5f5f5;
+  border-radius: 5px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  width: 50vw;
+  padding: 5vw;
+}
+
+.form-container h2 {
+  font-size: 35px;
+  text-align: center;
+}
+
+.form-container input {
+  width: 100%;
+  padding: 12px 20px;
+  display: inline-block;
+  border: 1px solid #dededf;
+  border-radius: 5px;
+}
+
+.button {
+  width: 100%;
+  border: rgb(155, 155, 163) 2px solid;
+  padding: 10px;
+  border-radius: 5px;
+  color: #000;
+}
+
+.button:hover {
+  background-color: rgb(168, 219, 25);
+  color: #fff;
+  border: none;
+}

src/App.js

@@ -6,6 +6,7 @@ import Layout from './Components/Layout';
 import PlaceList from './Components/PlaceList';
 import MyReservations from './Components/MyReservations';
 import './App.css';
+import AddPlace from './Components/AddPlace';
 
 function App() {
   const [loggedIn, setLoggedIn] = useState(false);
@@ -29,6 +30,7 @@ function App() {
           >
             <Route path="placelist" element={<PlaceList />} />
             <Route path="myreservations" element={<MyReservations />} />
+            <Route path="addPlace" element={<AddPlace />} />
           </Route>
         ) : null}
       </Routes>

src/Components/AddPlace.js

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import '../AddPlace.css';
+
+function AddPlace() {
+  const [placeData, setPlaceData] = useState({
+    description: '',
+    photo: '',
+    location: '',
+    rate: '',
+    address: '',
+    user_id: localStorage.getItem('userId'),
+  });
+  const [status, setStatus] = useState('idle');
+  const [error, setError] = useState(null);
+
+  const handleChange = (e) => {
+    setPlaceData({ ...placeData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setStatus('loading');
+
+    try {
+      const userId = localStorage.getItem('userId');
+      await axios.post(`http://localhost:3000/api/v1/users/${userId}/places`, placeData);
+      setStatus('succeeded');
+    } catch (error) {
+      setStatus('failed');
+      setError(error.response.data);
+      console.error('Failed to add place:', error);
+    }
+  };
+
+  return (
+    <div className="form-container">
+      <h2>Add Place</h2>
+      <input type="text" name="description" placeholder="Description" value={placeData.description} onChange={handleChange} />
+      <br />
+      <input type="text" name="photo" placeholder="Photo URL" value={placeData.photo} onChange={handleChange} />
+      <br />
+      <input type="text" name="location" placeholder="Location" value={placeData.location} onChange={handleChange} />
+      <br />
+      <input type="number" name="rate" placeholder="Rate" value={placeData.rate} onChange={handleChange} />
+      <br />
+      <input type="text" name="address" placeholder="Address" value={placeData.address} onChange={handleChange} />
+      <br />
+      {' '}
+      {/* Add address input */}
+      {status === 'failed' && (
+      <div className="error-message">
+        Error:
+        {' '}
+        {error}
+      </div>
+      )}
+      <button className="button" type="submit" onClick={handleSubmit} disabled={status === 'loading'}>Add Place</button>
+    </div>
+  );
+}
+
+export default AddPlace;

src/Redux/places/addPlaceSlice.js

@@ -0,0 +1,40 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+export const addPlace = createAsyncThunk(
+  'addPlace/addPlace',
+  async (placeData, thunkAPI) => {
+    try {
+      const userId = localStorage.getItem('userId');
+      const response = await axios.post(`http://localhost:3000/api/v1/users/${userId}/places`, placeData);
+      return response.data;
+    } catch (error) {
+      return thunkAPI.rejectWithValue(error.response.data);
+    }
+  },
+);
+
+const addPlaceSlice = createSlice({
+  name: 'addPlace',
+  initialState: {
+    status: 'idle',
+    error: null,
+  },
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(addPlace.pending, (state) => {
+        state.status = 'loading';
+      })
+      .addCase(addPlace.fulfilled, (state) => {
+        state.status = 'succeeded';
+        state.error = null;
+      })
+      .addCase(addPlace.rejected, (state, action) => {
+        state.status = 'failed';
+        state.error = action.payload;
+      });
+  },
+});
+
+export default addPlaceSlice.reducer;

src/Redux/store.js

@@ -1,9 +1,10 @@
-// store.js
 import { configureStore } from '@reduxjs/toolkit';
 import placesReducer from './places/placesSlice';
+import addPlaceReducer from './places/addPlaceSlice';
 
 export default configureStore({
   reducer: {
     places: placesReducer,
+    addPlace: addPlaceReducer,
   },
 });