├── src
    ├── components
    │   ├── themeColor.js
    │   ├── Loading.jsx
    │   ├── PrivateRoute.jsx
    │   ├── Theme.jsx
    │   ├── Singup.jsx
    │   ├── ProfileOption.jsx
    │   ├── OAuth.jsx
    │   ├── SingIn.jsx
    │   ├── SocketConnection.jsx
    │   ├── mobileMenu.jsx
    │   ├── Contact.jsx
    │   ├── ListingCard.jsx
    │   ├── PostCard.jsx
    │   ├── RentListing.jsx
    │   ├── SaleListing.jsx
    │   ├── OfferedListing.jsx
    │   ├── Conversations.jsx
    │   ├── Header.jsx
    │   ├── Chat.jsx
    │   ├── SkletonLoading.jsx
    │   └── Footer.jsx
    ├── redux
    │   ├── search
    │   │   └── searchSlice.js
    │   ├── saveListing
    │   │   └── saveListingSlice.js
    │   ├── notifications
    │   │   └── notificationSlice.js
    │   ├── store.js
    │   └── user
    │   │   └── userSlice.js
    ├── main.jsx
    ├── firebase.js
    ├── App.jsx
    ├── index.css
    └── pages
    │   ├── SaveListing.jsx
    │   ├── Login.jsx
    │   ├── Home.jsx
    │   ├── Message.jsx
    │   ├── Profile.jsx
    │   ├── Search.jsx
    │   └── ListingPage.jsx
├── utils
    └── apiHooks.js
├── postcss.config.js
├── dist
    ├── assets
    │   ├── ajax-loader-e7b44c86.gif
    │   └── slick-12459f22.svg
    └── index.html
├── .gitignore
├── vite.config.js
├── index.html
├── .eslintrc.cjs
├── tailwind.config.js
├── README.md
└── package.json


/src/components/themeColor.js:
--------------------------------------------------------------------------------
1 | export const themeColor = '313A67'
2 | 
3 | 


--------------------------------------------------------------------------------
/utils/apiHooks.js:
--------------------------------------------------------------------------------
1 | export const baseUrl = "https://property-sale-backend.onrender.com/api";
2 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/dist/assets/ajax-loader-e7b44c86.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Emoncr/Property-Sale/HEAD/dist/assets/ajax-loader-e7b44c86.gif


--------------------------------------------------------------------------------
/src/components/Loading.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const Loading = () => {
 4 |     return (
 5 |         <div className='h-full w-full flex items-center justify-center'>
 6 |             <p className="loading mt-20 loading-infinity h-20 w-20  text-brand-blue"></p>
 7 |         </div>
 8 |     )
 9 | }
10 | 
11 | export default Loading


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | *.local
12 | 
13 | # Editor directories and files
14 | .vscode/*
15 | !.vscode/extensions.json
16 | .idea
17 | .DS_Store
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | .env


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | // vite.config.js
 2 | import { defineConfig } from "vite";
 3 | import react from "@vitejs/plugin-react";
 4 | 
 5 | export default defineConfig({
 6 |   server: {
 7 |     proxy: {
 8 |       "/api": {
 9 |         target: "http://localhost:3000",
10 |         changeOrigin: true,
11 |         secure: false,
12 |       },
13 |     },
14 |   },
15 |   plugins: [react()],
16 | });
17 | 


--------------------------------------------------------------------------------
/src/components/PrivateRoute.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { useSelector } from 'react-redux'
 3 | import { Navigate, Outlet } from 'react-router-dom'
 4 | 
 5 | const PrivateRoute = () => {
 6 |     const { currentUser } = useSelector(state => state.user)
 7 | 
 8 |     return (
 9 |         currentUser ? <Outlet /> : <Navigate to={'/login'} />
10 |     )
11 | }
12 | 
13 | export default PrivateRoute


--------------------------------------------------------------------------------
/src/redux/search/searchSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from "@reduxjs/toolkit";
 2 | 
 3 | const initialState = {
 4 |   searchTermState: "",
 5 | };
 6 | 
 7 | const searchSlice = createSlice({
 8 |   name: "search",
 9 |   initialState,
10 |   reducers: {
11 |     setSearchTermState: (state, action) => {
12 |       state.searchTermState = action.payload;
13 |     },
14 |   },
15 | });
16 | 
17 | export const { setSearchTermState, } = searchSlice.actions;
18 | 
19 | export default searchSlice.reducer;
20 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.jsx'
 4 | import './index.css'
 5 | import { Provider } from 'react-redux'
 6 | import { persistor, store } from './redux/store.js'
 7 | import { PersistGate } from 'redux-persist/integration/react'
 8 | 
 9 | ReactDOM.createRoot(document.getElementById('root')).render(
10 |   <Provider store={store}>
11 |     <PersistGate loading={null} persistor={persistor} >
12 |       <App />
13 |     </PersistGate>
14 |   </Provider>,
15 | )
16 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link
 8 |       rel="shortcut icon"
 9 |       href="https://img.icons8.com/sf-black-filled/128/313a67/home.png"
10 |       type="image/x-icon"
11 |     />
12 |     <title>Property Sale</title>
13 |   </head>
14 |   <body>
15 |     <div id="root"></div>
16 |     <script type="module" src="/src/main.jsx"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/src/components/Theme.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { AiOutlineSetting } from 'react-icons/ai';
 3 | 
 4 | 
 5 | 
 6 | 
 7 | const Theme = () => {
 8 | 
 9 |     return (
10 |         <div className='sticky  z-50 top-1/2 transform -translate-y-1/2 right-0  p-0'>
11 |             <div className="button_container">
12 |                 <button className='p-2 rounded-l-md bg-white'>
13 |                     <AiOutlineSetting className='text-xl sm:text-3xl'/>
14 |                 </button>
15 |             </div>
16 |         </div>
17 |     );
18 | };
19 | 
20 | export default Theme; 
21 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     "eslint:recommended",
 6 |     "plugin:react/recommended",
 7 |     "plugin:react/jsx-runtime",
 8 |     "plugin:react-hooks/recommended",
 9 |   ],
10 |   ignorePatterns: ["dist", ".eslintrc.cjs"],
11 |   parserOptions: { ecmaVersion: "latest", sourceType: "module" },
12 |   settings: { react: { version: "18.2" } },
13 |   plugins: ["react-refresh"],
14 |   rules: {
15 |     "react-refresh/only-export-components": [
16 |       "warn",
17 |       { allowConstantExport: true },
18 |     ],
19 |   },
20 | };
21 | 


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link
 8 |       rel="shortcut icon"
 9 |       href="https://img.icons8.com/sf-black-filled/128/313a67/home.png"
10 |       type="image/x-icon"
11 |     />
12 |     <title>Property Sale</title>
13 |     <script type="module" crossorigin src="/assets/index-6566544b.js"></script>
14 |     <link rel="stylesheet" href="/assets/index-87f72a8d.css">
15 |   </head>
16 |   <body>
17 |     <div id="root"></div>
18 |     
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/redux/saveListing/saveListingSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from "@reduxjs/toolkit";
 2 | 
 3 | const initialState = {
 4 |   saveListings: [],
 5 | };
 6 | 
 7 | const saveSlice = createSlice({
 8 | 
 9 |   name: "saved_listings",
10 |   initialState,
11 |   
12 |   reducers: {
13 |     handleSave: (state, action) => {
14 |       state.saveListings.push(action.payload);
15 |     },
16 |     handleLisingRemove: (state, action) => {
17 |       state.saveListings = action.payload;
18 |     },
19 |     clearSavedListing: (state) => {
20 |       state.saveListings = [];
21 |     },
22 |   },
23 | });
24 | 
25 | export const { handleSave, handleLisingRemove,clearSavedListing } = saveSlice.actions;
26 | 
27 | export default saveSlice.reducer;
28 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | 
 3 | import { themeColor } from "./src/components/themeColor";
 4 | 
 5 | export default {
 6 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
 7 |   theme: {
 8 |     extend: {
 9 |       fontFamily: {
10 |         heading: ["KoHo", "sans-serif"],
11 |         content: ["Open Sans", "sans-serif"],
12 |         oswald: ["Oswald", "sans-serif"],
13 |       },
14 |       colors: {
15 |         "brand-blue": `#${themeColor}`,
16 |         "ui-bg": "#f1f5f1",
17 |       },
18 |       boxShadow: {
19 |         brand: "0 2px 5px",
20 |       },
21 |     },
22 |   },
23 |   darkMode: "media",
24 |   plugins: [require("daisyui"), "prettier-plugin-tailwindcss"],
25 | };
26 | 


--------------------------------------------------------------------------------
/src/redux/notifications/notificationSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from "@reduxjs/toolkit";
 2 | 
 3 | const initialState = {
 4 |   notificationsDB: [],
 5 |   conversationActive: { chatId: "" },
 6 | };
 7 | 
 8 | const notificationSlice = createSlice({
 9 |   name: "notification_slice",
10 |   initialState,
11 |   reducers: {
12 |     setNotification: (state, action) => {
13 |       state.notificationsDB = action.payload;
14 |     },
15 |     deleteNotification: (state, action) => {
16 |       state.notificationsDB.pop(action.payload);
17 |     },
18 |     setSingleNotification: (state, action) => {
19 |       state.notificationsDB.push(action.payload);
20 |     },
21 |   },
22 | });
23 | 
24 | export const {
25 |   setNotification,
26 |   deleteNotification,
27 |   setSingleNotification,
28 |   setConversationActive,
29 | } = notificationSlice.actions;
30 | 
31 | export default notificationSlice.reducer;
32 | 


--------------------------------------------------------------------------------
/src/firebase.js:
--------------------------------------------------------------------------------
 1 | // Import the functions you need from the SDKs you need
 2 | import { initializeApp } from "firebase/app";
 3 | import { getAnalytics } from "firebase/analytics";
 4 | // TODO: Add SDKs for Firebase products that you want to use
 5 | // https://firebase.google.com/docs/web/setup#available-libraries
 6 | 
 7 | // Your web app's Firebase configuration
 8 | // For Firebase JS SDK v7.20.0 and later, measurementId is optional
 9 | const firebaseConfig = {
10 |   apiKey: import.meta.env.VITE_FIRIBASE_API_KEY ,
11 |   authDomain: "property-sell-401819.firebaseapp.com",
12 |   projectId: "property-sell-401819",
13 |   storageBucket: "property-sell-401819.appspot.com",
14 |   messagingSenderId: "588716927912",
15 |   appId: "1:588716927912:web:a6d64c89172800b05a4b9d",
16 |   measurementId: "G-NQ79YSEFBT"
17 | };
18 | 
19 | // Initialize Firebase
20 | export const firebaseApp = initializeApp(firebaseConfig);
21 | // const analytics = getAnalytics(firebaseApp);


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Hi There ! 
 2 | 
 3 | This is a real estate application 
 4 | =======
 5 | LIVE_URL: https://property-sell.vercel.app/
 6 | 
 7 | Excited to announce the completion of my latest project, 'Property Sale'! 🏡 Built on MERN stack with real-time chat functionality using Socket.io. A platform where you can buy, sell, or rent properties.
 8 | 
 9 | Here is the overview of the project.
10 | 
11 | Technology: 🚀
12 | Backend - Node Js, Express Js, Socket Io, Mongoose, Jwt.
13 | 
14 | Database - Mongodb.
15 | 
16 | Fronted - React Js, React Router Dom, React Hook Form, Firebase, Tailwind Css, Socket Io Client.
17 | 
18 | 
19 | Features: 🚀
20 | 1. Real time conversation and local notification.
21 | 2. Search and sort result.
22 | 3. Buyer and saler role management.
23 | 4. Authentication with google or email.
24 | 5. Property Image upload facilities.
25 | 6. Pagination for all posts.
26 | 
27 | Ahhh😪...there are many more features here is live url and don't forget to check it out.
28 | 
29 | Live URL - https://property-sell.vercel.app/


--------------------------------------------------------------------------------
/src/redux/store.js:
--------------------------------------------------------------------------------
 1 | import userReducer from "../redux/user/userSlice";
 2 | import { combineReducers, configureStore } from "@reduxjs/toolkit";
 3 | import { persistReducer } from "redux-persist";
 4 | import persistStore from "redux-persist/es/persistStore";
 5 | import storage from "redux-persist/lib/storage";
 6 | import searchSlice from "./search/searchSlice";
 7 | import saveListingSlice from "./saveListing/saveListingSlice";
 8 | import notificationSlice from "./notifications/notificationSlice";
 9 | 
10 | //===== Redux Persist's Code ======//
11 | const rootReducer = combineReducers({
12 |   user: userReducer,
13 |   search: searchSlice,
14 |   notification: notificationSlice,
15 |   savedListing: saveListingSlice,
16 | });
17 | 
18 | const persistConfig = {
19 |   key: "root",
20 |   storage,
21 |   whitelist: ["user", "savedListing"],
22 | };
23 | const persistedReducer = persistReducer(persistConfig, rootReducer);
24 | 
25 | //===== Redux Store ======//
26 | export const store = configureStore({
27 |   reducer: persistedReducer,
28 | 
29 |   //==== Middlware for serializable check =====//
30 |   middleware: (getDefaultMiddleware) =>
31 |     getDefaultMiddleware({
32 |       serializableCheck: false,
33 |     }),
34 | });
35 | 
36 | export const persistor = persistStore(store);
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "property-sell",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview",
11 |     "start": "serve -s dist -l $PORT"
12 |   },
13 |   "dependencies": {
14 |     "@preact/signals-react": "^1.3.7",
15 |     "@reduxjs/toolkit": "^1.9.7",
16 |     "dotenv": "^16.3.1",
17 |     "firebase": "^10.5.0",
18 |     "js-cookie": "^3.0.5",
19 |     "postcss-plugin": "^1.0.0",
20 |     "react": "^18.2.0",
21 |     "react-dom": "^18.2.0",
22 |     "react-hook-form": "^7.47.0",
23 |     "react-icons": "^4.11.0",
24 |     "react-redux": "^8.1.3",
25 |     "react-router-dom": "^6.16.0",
26 |     "react-slick": "^0.29.0",
27 |     "react-toastify": "^9.1.3",
28 |     "redux-persist": "^6.0.0",
29 |     "serve": "^14.2.4",
30 |     "slick-carousel": "^1.8.1",
31 |     "socket.io-client": "^4.7.2"
32 |   },
33 |   "devDependencies": {
34 |     "@types/react": "^18.2.15",
35 |     "@types/react-dom": "^18.2.7",
36 |     "@vitejs/plugin-react": "^4.0.3",
37 |     "autoprefixer": "^10.4.16",
38 |     "daisyui": "^4.0.3",
39 |     "eslint": "^8.45.0",
40 |     "eslint-plugin-react": "^7.32.2",
41 |     "eslint-plugin-react-hooks": "^4.6.0",
42 |     "eslint-plugin-react-refresh": "^0.4.3",
43 |     "postcss": "^8.2.9",
44 |     "prettier": "^3.1.0",
45 |     "prettier-plugin-tailwindcss": "^0.5.7",
46 |     "tailwindcss": "^3.3.3",
47 |     "vite": "^4.4.5"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter, Route, Routes } from 'react-router-dom'
 2 | import Home from './pages/Home'
 3 | import Login from './pages/Login'
 4 | import Header from './components/Header'
 5 | import Theme from './components/Theme'
 6 | import Profile from './pages/Profile'
 7 | import PrivateRoute from './components/PrivateRoute'
 8 | import CreatePost from './pages/CreatePost'
 9 | import UpdatePost from './pages/UpdatePost'
10 | import ListingPage from './pages/ListingPage'
11 | import SaveListing from './pages/SaveListing'
12 | import Search from './pages/Search'
13 | import Message from './pages/Message'
14 | import SocketConnection from './components/SocketConnection'
15 | 
16 | 
17 | function App() {
18 |   return (
19 |     <>
20 |       <SocketConnection />
21 |       <BrowserRouter>
22 |         <Header />
23 |         {/* <Theme/> */}
24 |         <Routes>
25 |           <Route path='/' element={<Home />} />
26 |           <Route path='/home' element={<Home />} />
27 |           <Route path='/login' element={<Login />} />
28 |           <Route path='/listing/:id' element={<ListingPage />} />
29 |           <Route path='/search?' element={<Search />} />
30 | 
31 |           {/* /---------Private Routes-----------/ */}
32 |           <Route element={<PrivateRoute />}>
33 |             <Route path='/profile' element={<Profile />} />
34 |             <Route path='/create_post' element={<CreatePost />} />
35 |             <Route path='/update_post/:id' element={<UpdatePost />} />
36 |             <Route path='/saved_listing' element={<SaveListing />} />
37 |             <Route path='/message' element={<Message />} />
38 |           </Route>
39 |         </Routes>
40 |       </BrowserRouter>
41 |     </>
42 |   )
43 | }
44 | 
45 | export default App
46 | 


--------------------------------------------------------------------------------
/dist/assets/slick-12459f22.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg xmlns="http://www.w3.org/2000/svg">
 4 | <metadata>Generated by Fontastic.me</metadata>
 5 | <defs>
 6 | <font id="slick" horiz-adv-x="512">
 7 | <font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
 8 | <missing-glyph horiz-adv-x="512" />
 9 | 
10 | <glyph unicode="&#8594;" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
11 | <glyph unicode="&#8592;" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
12 | <glyph unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
13 | <glyph unicode="&#97;" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
14 | </font></defs></svg>
15 | 


--------------------------------------------------------------------------------
/src/redux/user/userSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from "@reduxjs/toolkit";
 2 | 
 3 | const initialState = {
 4 |   currentUser: null,
 5 |   loading: false,
 6 |   signinError: null,
 7 |   error: null,
 8 | };
 9 | 
10 | const userSlice = createSlice({
11 |   name: "user",
12 |   initialState,
13 |   reducers: {
14 |     loddingStart: (state) => {
15 |       state.loading = true;
16 |     },
17 |     signinSuccess: (state, action) => {
18 |       state.currentUser = action.payload;
19 |       state.loading = false;
20 |       state.signinError = false;
21 |     },
22 |     signinFailed: (state, action) => {
23 |       state.signinError = action.payload;
24 |       state.loading = false;
25 |     },
26 |     userUpdateSuccess: (state, action) => {
27 |       state.currentUser = action.payload;
28 |       state.loading = false;
29 |       state.error = false;
30 |     },
31 |     userUpdateFailed: (state, action) => {
32 |       state.loading = false;
33 |       state.error = action.payload;
34 |     },
35 | 
36 |     //=====Handlle User Delete State =====//
37 | 
38 |     userDeleteSuccess: (state) => {
39 |       state.loading = false;
40 |       state.currentUser = null;
41 |       state.error = false;
42 |     },
43 |     userDeleteFail: (state, action) => {
44 |       state.loading = false;
45 |       state.error = action.payload;
46 |     },
47 | 
48 |     // Handle Sign Out
49 |     signoutSuccess: (state) => {
50 |       state.loading = false;
51 |       state.currentUser = null;
52 |       state.error = false;
53 |     },
54 |     signoutFailed: (state, action) => {
55 |       state.loading = false;
56 |       state.error = action.payload;
57 |     },
58 | 
59 |     // HANDLE lISTINS SAVED ITEMS
60 |     handleSave: (state, action) => {
61 |       state.savedListing.push(action.payload);
62 |     },
63 |     handleLisingRemove: (state, action) => {
64 |       state.savedListing = action.payload;
65 |     },
66 |   },
67 | });
68 | 
69 | export const {
70 |   loddingStart,
71 |   signinSuccess,
72 |   signinFailed,
73 |   userUpdateFailed,
74 |   userUpdateSuccess,
75 |   userDeleteStart,
76 |   userDeleteSuccess,
77 |   userDeleteFail,
78 |   signoutSuccess,
79 |   signoutFailed,
80 |   handleSave,
81 |   handleLisingRemove,
82 | } = userSlice.actions;
83 | 
84 | export default userSlice.reducer;
85 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=KoHo:wght@700&family=Open+Sans:wght@400;500;600;700&display=swap");
 2 | 
 3 | body {
 4 |   @apply bg-[#f1f5f1]  min-h-screen scroll-smooth;
 5 | }
 6 | 
 7 | #root {
 8 |   @apply bg-[#f1f5f1]  h-full relative;
 9 | }
10 | 
11 | .container {
12 |   @apply max-w-[1400px] mx-auto px-4 sm:px-10;
13 | }
14 | .search {
15 |   @apply input w-full h-10  mx-auto  border-2 rounded-md border-brand-blue max-w-full  sm:max-w-sm focus:outline-0 text-sm font-semibold bg-transparent text-slate-900 placeholder:text-brand-blue placeholder:font-semibold px-3;
16 | }
17 | .search_btn {
18 |   @apply absolute  right-0 bg-brand-blue h-full w-10 sm:w-14 sm:max-w-[56px] rounded-e-md max-w-[40px] flex items-center justify-center hover:bg-brand-blue/80 duration-300;
19 | }
20 | 
21 | /*=================Form styles start here =========== */
22 | .form_input {
23 |   @apply py-2 border-0 border-b-[1px] border-slate-300 placeholder:font-content placeholder:font-medium placeholder:text-sm  focus:border-brand-blue focus:outline-none px-2 w-full text-sm text-slate-900 font-content font-semibold bg-white;
24 | }
25 | 
26 | /*========tostify design==========*/
27 | .Toastify__toast {
28 |   @apply bg-brand-blue;
29 | }
30 | .Toastify__toast-body {
31 |   @apply text-white;
32 | }
33 | .Toastify__close-button > svg {
34 |   @apply text-white;
35 | }
36 | 
37 | .scrollbar-hide::-webkit-scrollbar {
38 |   display: none;
39 | }
40 | 
41 | .scrollbar-hide {
42 |   -ms-overflow-style: none;
43 |   scrollbar-width: none;
44 | }
45 | .slick-dots li {
46 |   @apply bg-white rounded-full;
47 | }
48 | .post_container .slick-list {
49 |   @apply pb-11 sm:pb-16;
50 | }
51 | .post_container .slick-slide {
52 |   @apply p-3;
53 | }
54 | 
55 | .chats_container {
56 |   height: calc(100vh - 75px);
57 | }
58 | .message_container {
59 |   height: calc(100vh - 200px);
60 | }
61 | 
62 | /* Universal Styles */
63 | h1,
64 | h2,
65 | h3,
66 | h4,
67 | h5,
68 | h6 {
69 |   @apply text-[#1f2937];
70 | }
71 | p,
72 | label,
73 | li,
74 | span {
75 |   @apply text-[#1f2937];
76 | }
77 | .label-text {
78 |   @apply !text-[#1f2937];
79 | }
80 | button > span {
81 |   @apply text-white;
82 | }
83 | input {
84 |   @apply !text-[#1f2937];
85 | }
86 | 
87 | @tailwind base;
88 | @tailwind components;
89 | @tailwind utilities;
90 | 


--------------------------------------------------------------------------------
/src/components/Singup.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import { useForm } from 'react-hook-form'
 3 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
 4 | 
 5 | 
 6 | 
 7 | const Singup = ({ userState }) => {
 8 |     const { setResponseData, setIsformSubmit } = userState;
 9 | 
10 |     const [loading, setLoading] = useState(false)
11 |     const {
12 |         register,
13 |         handleSubmit,
14 |         formState: { errors },
15 |     } = useForm();
16 | 
17 | 
18 | 
19 |     //======handling form submting function =====//
20 |     const onSubmit = async (formData) => {
21 |         setLoading(true)
22 |         const res = await fetch(`${API_BASE}/api/auth/signup`, {
23 |             method: 'POST',
24 |             headers: {
25 |                 'Content-Type': 'application/json'
26 |             },
27 |             body: JSON.stringify(formData)
28 |         });
29 |         const data = await res.json();
30 | 
31 |         setIsformSubmit(true)
32 |         setResponseData(data)
33 |         setLoading(false)
34 |     };
35 | 
36 | 
37 |     return (
38 |         <>
39 |             <form
40 |                 onSubmit={handleSubmit(onSubmit)}
41 |             >
42 |                 <input {...register("username", { required: true })} type="text" placeholder="Username" className="form_input" />
43 |                 {errors.username && <span className='text-red-700 font-semibold text-sm mb-2 mt-1'>This field is required</span>}
44 | 
45 | 
46 |                 <input {...register("email", { required: true })} type="email" placeholder="Email" className="form_input mt-5" />
47 |                 {errors.email && <span className='text-red-700 font-semibold text-sm mb-2 mt-1'>This field is required</span>}
48 | 
49 | 
50 |                 <input {...register("password", { required: true })} type="password" placeholder="Password" className="form_input mt-5" />
51 |                 {errors.password && <span className='text-red-700 font-semibold text-sm mb-2 mt-1'>This field is required</span>}
52 | 
53 | 
54 |                 <button
55 |                     type='submit'
56 |                     disabled={loading}
57 |                     className="btn bg-brand-blue text-white mt-5 rounded-md w-full hover:bg-brand-blue/[.90]">
58 |                     {
59 |                         loading ? 'Loading...' : 'Create an account'
60 |                     }
61 |                 </button>
62 |             </form>
63 | 
64 |         </>
65 |     )
66 | }
67 | 
68 | export default Singup


--------------------------------------------------------------------------------
/src/components/ProfileOption.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { useDispatch } from 'react-redux';
 3 | import { Link } from 'react-router-dom'
 4 | import { signoutFailed, signoutSuccess } from '../redux/user/userSlice';
 5 | import { ToastContainer, toast } from 'react-toastify';
 6 | import { clearSavedListing } from '../redux/saveListing/saveListingSlice';
 7 | import { FaBookmark, FaSignOutAlt, FaUser } from 'react-icons/fa';
 8 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
 9 | 
10 | const ProfileOption = ({ user }) => {
11 |     const dispatch = useDispatch();
12 | 
13 |     const handleLogOut = async () => {
14 |         try {
15 |             const res = await  fetch(`${API_BASE}/api/auth/signout`);
16 |             const data = await res.json();
17 |             if (data.success === false) {
18 |                 useDispatch(signoutFailed(data.message))
19 |                 toast.error(data.message, {
20 |                     autoClose: 2000,
21 |                 })
22 |             }
23 |             else {
24 |                 dispatch(signoutSuccess())
25 |                 dispatch(clearSavedListing())
26 |             }
27 |         } catch (error) {
28 |             dispatch(signoutFailed(error.message))
29 |             toast.error(error.message, {
30 |                 autoClose: 2000,
31 |             })
32 |         }
33 |     }
34 | 
35 | 
36 | 
37 | 
38 |     return (
39 |         <div className="flex-none gap-2">
40 |             <div className="dropdown dropdown-end">
41 |                 <label tabIndex={0} className="btn btn-ghost btn-circle avatar hover:outline-0 hover:border-0">
42 |                     <div className="w-7 rounded-full">
43 |                         <img className='rounded-full border border-brand-blue/20 h-8 w-8 object-cover' src={user.avatar} alt="profile image" />
44 |                     </div>
45 |                 </label>
46 |                 <ul tabIndex={0} className="mt-3 z-[999999999] bg-[#fff] font-heading p-2 shadow menu menu-sm dropdown-content rounded-md w-52 ">
47 |                     <li>
48 |                         <Link to={'/profile'} className="justify-start text-brand-blue hover:text-brand-blue">
49 |                             <FaUser className='text-brand-blue' /> Profile
50 |                         </Link>
51 |                     </li>
52 |                     <li>
53 |                         <Link to={"/saved_listing"} className='hover:text-brand-blue'>
54 |                             <FaBookmark className='text-amber-500' /> Saved Listings
55 |                         </Link>
56 |                     </li>
57 |                     <li onClick={handleLogOut}>
58 |                         <Link className='hover:text-brand-blue'>
59 |                             <FaSignOutAlt className='text-red-500' /> Logout
60 |                         </Link>
61 |                     </li>
62 |                 </ul>
63 |             </div>
64 |             <ToastContainer />
65 |         </div>
66 |     )
67 | };
68 | 
69 | export default ProfileOption;


--------------------------------------------------------------------------------
/src/components/OAuth.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { GoogleAuthProvider, getAuth, signInWithPopup } from "firebase/auth";
 3 | import { firebaseApp } from '../firebase.js';
 4 | import { useDispatch } from 'react-redux';
 5 | import { signinFailed, signinSuccess } from '../redux/user/userSlice.js';
 6 | import { ToastContainer, toast } from 'react-toastify';
 7 | import 'react-toastify/dist/ReactToastify.css';
 8 | import { useNavigate } from 'react-router-dom';
 9 | 
10 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
11 | 
12 | 
13 | const OAuth = () => {
14 |     const dispatch = useDispatch();
15 |     const navigate = useNavigate();
16 |     const handleGoogleSignIn = async () => {
17 |         try {
18 |             const auth = getAuth(firebaseApp);
19 |             const provider = new GoogleAuthProvider();
20 |             const result = await signInWithPopup(auth, provider)
21 |             const { displayName, email, photoURL } = result.user;
22 | 
23 |             //=====Fetch The Data To Backend====//
24 |             const res = await  fetch(`${API_BASE}/api/auth/google`, {
25 |                 method: "POST",
26 |                 headers: {
27 |                     "Content-Type": 'application/json'
28 |                 },
29 |                 body: JSON.stringify({
30 |                     name: displayName,
31 |                     email,
32 |                     photo: photoURL,
33 |                 })
34 |             })
35 |             const userData = await res.json();
36 |             if (userData.success === false) {
37 |                 dispatch(signinFailed(userData.message));
38 |                 toast(userData.message);
39 |             }
40 |             else {
41 |                 dispatch(signinSuccess(userData));
42 |                 navigate('/home');
43 |             }
44 | 
45 |         } catch (error) {
46 |             console.log(error);
47 |         };
48 |     };
49 | 
50 | 
51 | 
52 | 
53 | 
54 | 
55 |     return (
56 |         <>
57 |             <div>
58 |                 <p className='text-lg text-brand-blue font-heading font-bold text-center mt-3' >OR</p>
59 | 
60 |                 <button
61 |                     onClick={handleGoogleSignIn}
62 |                     className="group mt-3 h-12 px-6 border-2 border-gray-300 rounded-md transition duration-300 hover:border-brand-blue focus:bg-blue-50 active:bg-brand-blue w-full">
63 |                     <div className="relative flex items-center space-x-4 justify-center">
64 |                         <img className="absolute left-0 w-5" alt="google logo" src="https://www.svgrepo.com/show/475656/google-color.svg" />
65 | 
66 |                         <span
67 |                             className="block w-max font-semibold tracking-wide text-gray-700  text-sm transition duration-300 group-hover:text-brand-blue sm:text-base">Continue
68 |                             with Google
69 |                         </span>
70 |                     </div>
71 |                 </button>
72 |                 <ToastContainer />
73 |             </div>
74 |         </>
75 | 
76 |     )
77 | }
78 | 
79 | export default OAuth


--------------------------------------------------------------------------------
/src/components/SingIn.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import { useForm } from 'react-hook-form'
 3 | import { useNavigate } from 'react-router-dom';
 4 | import { useSelector, useDispatch } from "react-redux";
 5 | import { loddingStart, signinSuccess, signinFailed } from '../redux/user/userSlice';
 6 | import { ToastContainer, toast } from 'react-toastify';
 7 | import 'react-toastify/dist/ReactToastify.css';
 8 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
 9 | 
10 | 
11 | const SingIn = () => {
12 |     const {
13 |         register,
14 |         handleSubmit,
15 |         formState: { errors },
16 |     } = useForm();
17 |     const navigate = useNavigate();
18 |     const dispatch = useDispatch();
19 | 
20 |     const { loading } = useSelector((state) => state.user)
21 | 
22 | 
23 | 
24 | 
25 |     //======handling form submting function =====//
26 |     const onSubmit = async (formData) => {
27 |         dispatch(loddingStart())
28 |         try {
29 |             const res = await  fetch(`${API_BASE}/api/auth/signin`, {
30 |                 method: 'POST',
31 |                 headers: {
32 |                     'Content-Type': 'application/json'
33 |                 },
34 |                 body: JSON.stringify(formData)
35 |             });
36 |             const userData = await res.json();
37 | 
38 |             //===checking reqest success or not ===//
39 |             if (userData.success === false) {
40 |                 dispatch(signinFailed(userData.message))
41 | 
42 |                 //===showing error in tostify====//
43 |                 toast.error(userData.message, {
44 |                     autoClose: 2000,
45 |                 })
46 |             }
47 |             else {
48 |                 dispatch(signinSuccess(userData))
49 |                 navigate('/home')
50 |             }
51 |         }
52 |         catch (error) {
53 |             dispatch(signinFailed(error.message))
54 |             toast.error(userData.message, {
55 |                 autoClose: 2000,
56 |             })
57 |         }
58 |     };
59 | 
60 | 
61 | 
62 | 
63 | 
64 |     return (
65 |         <>
66 |             <form
67 |                 onSubmit={handleSubmit(onSubmit)}
68 |             >
69 |                 <input {...register("email", { required: true })} type="email" placeholder="Email" className="form_input mt-5" />
70 |                 {errors.email && <span className='text-red-700 font-semibold text-sm mb-2 mt-1'>This field is required</span>}
71 | 
72 | 
73 |                 <input {...register("userPassword", { required: true })} type="password" placeholder="Password" className="form_input mt-5" />
74 |                 {errors.password && <span className='text-red-700 font-semibold text-sm mb-2 mt-1'>This field is required</span>}
75 | 
76 | 
77 |                 <button
78 |                     type='submit'
79 |                     disabled={loading}
80 |                     className="btn bg-brand-blue text-white mt-5 rounded-md w-full hover:bg-brand-blue/[.90]">
81 |                     {
82 |                         loading ? 'Loading...' : 'Login'
83 |                     }
84 |                 </button>
85 |             </form>
86 |             <ToastContainer limit={0} />
87 |         </>
88 |     )
89 | }
90 | 
91 | export default SingIn


--------------------------------------------------------------------------------
/src/components/SocketConnection.jsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react";
  2 | import { useDispatch, useSelector } from "react-redux";
  3 | import { io } from "socket.io-client";
  4 | import {
  5 |   setNotification,
  6 |   setSingleNotification,
  7 | } from "../redux/notifications/notificationSlice";
  8 | import { activeChatId } from "./Conversations";
  9 | import { signal } from "@preact/signals-react";
 10 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
 11 | 
 12 | //production
 13 | // const Node_Env = "local"
 14 | export const socket = io("https://thunder-scarlet-wizard.glitch.me/", {
 15 |   headers: {
 16 |     "user-agent": "chrome",
 17 |   },
 18 | });
 19 | 
 20 | export const notifySignal = signal({
 21 |   notifications: [],
 22 | });
 23 | 
 24 | const SocketConnection = () => {
 25 |   const { currentUser } = useSelector((state) => state.user);
 26 |   const dispatch = useDispatch();
 27 | 
 28 |   //======== Get Notification From DB =========//
 29 |   useEffect(() => {
 30 |     const loadPrevNotification = async () => {
 31 |       try {
 32 |         const unseenNotificaton = await  fetch(
 33 |           `${API_BASE}/api/notification/${currentUser._id}`
 34 |         );
 35 |         const res = await unseenNotificaton.json();
 36 |         if (res.success === false) {
 37 |           console.log(res);
 38 |         } else {
 39 |           notifySignal.value.notifications = res;
 40 |           dispatch(setNotification(res));
 41 |         }
 42 |       } catch (error) {
 43 |         console.log(error.message);
 44 |       }
 45 |     };
 46 |     currentUser && loadPrevNotification();
 47 |   }, []);
 48 | 
 49 |   //=========== Store notificaions to DB =============//
 50 | 
 51 |   const sendNotificationToDB = async (notificationData) => {
 52 |     try {
 53 |       const sendNotification = await  fetch(
 54 |         `${API_BASE}/api/notification/create`,
 55 |         {
 56 |           method: "POST",
 57 |           headers: { "Content-Type": "application/json" },
 58 |           body: JSON.stringify(notificationData),
 59 |         }
 60 |       );
 61 |       const response = await sendNotification.json();
 62 |       if (response.success === false) {
 63 |         console.log(response);
 64 |       }
 65 |     } catch (error) {
 66 |       console.log(error);
 67 |     }
 68 |   };
 69 | 
 70 |   //----- Get Notification from socket and setNotification---------//
 71 |   useEffect(() => {
 72 |     socket.on(`${currentUser?._id}`, (socketNotification) => {
 73 |       const currentPath = window.location.pathname;
 74 | 
 75 |       if (currentPath !== "/message") {
 76 |         activeChatId.value.chatId = "";
 77 |       }
 78 | 
 79 |       if (socketNotification.chatId !== activeChatId.value.chatId) {
 80 |         const isNotificationExist = notifySignal.value.notifications.some(
 81 |           (notify) => notify.chatId === socketNotification.chatId
 82 |         );
 83 | 
 84 |         if (!isNotificationExist) {
 85 |           notifySignal.value.notifications = [
 86 |             ...notifySignal.value.notifications,
 87 |             socketNotification,
 88 |           ];
 89 |           dispatch(setSingleNotification(socketNotification));
 90 |           sendNotificationToDB(socketNotification);
 91 |         }
 92 |       }
 93 |     });
 94 |   });
 95 | 
 96 |   return <></>;
 97 | };
 98 | 
 99 | export default SocketConnection;
100 | 


--------------------------------------------------------------------------------
/src/pages/SaveListing.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { useSelector } from 'react-redux'
 3 | import ListingCard from '../components/ListingCard'
 4 | import { FaArrowRight } from 'react-icons/fa'
 5 | import { useNavigate } from 'react-router-dom'
 6 | import Footer from '../components/Footer'
 7 | 
 8 | const SaveListing = () => {
 9 |     const { saveListings } = useSelector(state => state.savedListing)
10 |     const navigate = useNavigate()
11 |     return (
12 |         <>
13 |             <section>
14 |                 <div className="container py-10 ">
15 |                     <div className="heading_cotainer  border-b-2 pb-5 border-brand-blue flex items-center justify-center sm:justify-between flex-col sm:flex-row gap-3">
16 |                         <h1 className='font-heading text-2xl text-left '>Your saved Listing</h1>
17 |                         <button
18 |                             className="group relative inline-flex items-center overflow-hidden rounded bg-brand-blue px-6 py-2 text-white "
19 |                             onClick={() => navigate('/search')}
20 |                         >
21 |                             <span className="absolute -end-full transition-all group-hover:end-4">
22 |                                 <svg
23 |                                     className="h-5 w-5 rtl:rotate-180"
24 |                                     xmlns="http://www.w3.org/2000/svg"
25 |                                     fill="none"
26 |                                     viewBox="0 0 24 24"
27 |                                     stroke="currentColor"
28 |                                 >
29 |                                     <path
30 |                                         strokeLinecap="round"
31 |                                         strokeLinejoin="round"
32 |                                         strokeWidth="2"
33 |                                         d="M17 8l4 4m0 0l-4 4m4-4H3"
34 |                                     />
35 |                                 </svg>
36 |                             </span>
37 | 
38 |                             <span className="text-sm font-medium transition-all  group-hover:me-4">
39 |                                 Explore More
40 |                             </span>
41 |                         </button>
42 |                     </div>
43 |                     <div className="listings pt-5">
44 |                         {
45 |                             saveListings.length === 0 ?
46 |                                 <div className='py-20'>
47 | 
48 |                                     <p className='bg-white text-center text-sm sm:text-2xl font-heading font-bold flex flex-col items-center justify-center max-w-3xl mx-auto py-10 text-black px-5 rounded shadow-md'>
49 |                                         <span>Your saved listings are currently empty.</span>
50 |                                     </p>
51 | 
52 |                                 </div>
53 |                                 :
54 |                                 <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 px-5 gap-y-8 pb-20">
55 |                                     {
56 |                                         saveListings && saveListings.map(listing => <ListingCard key={listing._id} listing={listing} />)
57 |                                     }
58 |                                 </div>
59 |                         }
60 | 
61 |                     </div>
62 |                 </div>
63 |             </section>
64 |             <>
65 |                 <Footer />
66 |             </>
67 |         </>
68 |     )
69 | }
70 | 
71 | export default SaveListing


--------------------------------------------------------------------------------
/src/pages/Login.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useLayoutEffect, useState } from 'react'
 2 | import Singup from '../components/Singup'
 3 | import SingIn from '../components/SingIn'
 4 | import { ToastContainer, toast } from 'react-toastify';
 5 | import 'react-toastify/dist/ReactToastify.css';
 6 | import OAuth from '../components/OAuth';
 7 | import Footer from '../components/Footer';
 8 | import { useSelector } from 'react-redux';
 9 | import { useNavigate } from 'react-router-dom';
10 | 
11 | 
12 | 
13 | const Login = () => {
14 |     const { currentUser } = useSelector(state => state.user)
15 |     const [isNewUser, setIsNewUser] = useState(true)
16 |     const [isFormSubmit, setIsformSubmit] = useState(false);
17 |     const [responseData, setResponseData] = useState();
18 |     const navigate = useNavigate()
19 | 
20 |     //======handlign Notification for user =====//
21 |     const handleTostify = async () => {
22 |         await responseData.success && setIsNewUser(!isNewUser)
23 |         toast(responseData.message, {
24 |             autoClose: 2000,
25 |         })
26 |     }
27 |     useEffect(() => {
28 |         isFormSubmit && handleTostify();
29 |         setIsformSubmit(false)
30 |     }, [responseData])
31 | 
32 |     useEffect(() => {
33 |         if (currentUser && currentUser.email) {
34 |             navigate("/profile")
35 |         }
36 |     }, [])
37 | 
38 | 
39 | 
40 |     return (
41 |         <>
42 |             {
43 |                 currentUser && currentUser.email
44 |                     ?
45 |                     <section className='form-section py-20  '>
46 |                         <div className="container">
47 |                             <p className='text-base md:text-xl text-center text-brand-blue font-heading font-bold '>User exist! Redirecting to profile page</p>
48 |                         </div>
49 |                     </section>
50 |                     :
51 |                     <section className='form-section py-10 md:py-20 '>
52 |                         <div className="container ">
53 |                             <div className="form-container px-4 sm:px-8 bg-white py-6 pb-8 sm:py-9 sm:pb-12 max-w-lg mx-auto rounded-sm border-[1px] border-brand-blue/50 shadow-brand shadow-brand-blue/40">
54 |                                 <h1 className='text-left text-brand-blue mb-3 font-medium font-heading text-md sm:text-xl'>
55 |                                     {
56 |                                         isNewUser ? "Login" : 'Create an account'
57 |                                     }
58 |                                 </h1>
59 |                                 {
60 |                                     isNewUser ?
61 |                                         <SingIn />
62 |                                         :
63 |                                         <Singup userState={{ setResponseData, setIsformSubmit }} />
64 |                                 }
65 | 
66 |                                 <p className="content text-center font-heading text-black mt-4">
67 |                                     {
68 |                                         isNewUser ? "Don’t have an account?" : 'Already have an account?'
69 |                                     }
70 |                                     <u className='ml-1 border-brand-blue text-brand-blue cursor-pointer'
71 |                                         onClick={() => setIsNewUser(!isNewUser)}
72 |                                     >
73 |                                         {isNewUser ? 'Create an account' : 'Login'}
74 |                                     </u>
75 |                                 </p>
76 | 
77 |                                 <OAuth />
78 |                                 <ToastContainer limit={0} />
79 |                             </div>
80 |                         </div>
81 |                     </section>
82 |             }
83 |             <>
84 |                 <Footer />
85 |             </>
86 |         </>
87 |     )
88 | }
89 | 
90 | export default Login


--------------------------------------------------------------------------------
/src/components/mobileMenu.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import {
  3 |   FaBookmark,
  4 |   FaHome,
  5 |   FaSignInAlt,
  6 |   FaSignOutAlt,
  7 |   FaUser,
  8 |   FaUsers,
  9 | } from "react-icons/fa";
 10 | import { useDispatch, useSelector } from "react-redux";
 11 | import { useNavigate } from "react-router-dom";
 12 | import { signoutFailed, signoutSuccess } from "../redux/user/userSlice";
 13 | import { ToastContainer, toast } from "react-toastify";
 14 | import { clearSavedListing } from "../redux/saveListing/saveListingSlice";
 15 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
 16 | 
 17 | const MobileMenu = ({ menuStatus }) => {
 18 |   const { currentUser } = useSelector((state) => state.user);
 19 |   const { setisActiveMoblie, isActiveMoblie } = menuStatus;
 20 |   const dispatch = useDispatch();
 21 |   const navigate = useNavigate();
 22 |   const handleLogOut = async () => {
 23 |     try {
 24 |       const res = await  fetch(`${API_BASE}/api/auth/signout`);
 25 |       const data = await res.json();
 26 |       if (data.success === false) {
 27 |         useDispatch(signoutFailed(data.message));
 28 |         toast.error(data.message, {
 29 |           autoClose: 2000,
 30 |         });
 31 |       } else {
 32 |         dispatch(signoutSuccess());
 33 |         dispatch(clearSavedListing());
 34 |       }
 35 |     } catch (error) {
 36 |       dispatch(signoutFailed(error.message));
 37 |       toast.error(error.message, {
 38 |         autoClose: 2000,
 39 |       });
 40 |     }
 41 |   };
 42 | 
 43 |   return (
 44 |     <menu className=" absolute  right-0  bg-white h-72 py-5 px-5 text-brand-blue font-semibold  w-full !z-50 shadow-lg shadow-brand-blue/40">
 45 |       <ul className=" ">
 46 |         <li
 47 |           onClick={() => {
 48 |             navigate("/home"), setisActiveMoblie(!isActiveMoblie);
 49 |           }}
 50 |           className="p-2 cursor-pointer rounded-sm mb-3  font-heading hover:bg-brand-blue/40 duration-300"
 51 |         >
 52 |           <p className="flex items-center gap-2">
 53 |             <FaHome /> Home
 54 |           </p>
 55 |         </li>
 56 |         {currentUser && currentUser.email ? (
 57 |           <>
 58 |             <li
 59 |               onClick={() => {
 60 |                 navigate("/profile"), setisActiveMoblie(!isActiveMoblie);
 61 |               }}
 62 |               className="p-2 cursor-pointer rounded-sm mb-3  font-heading hover:bg-brand-blue/40 duration-300"
 63 |             >
 64 |               <p to="/profile" className="flex items-center gap-2">
 65 |                 <FaUser className="text-green-600" /> Profile
 66 |               </p>
 67 |             </li>
 68 |             <li
 69 |               onClick={() => {
 70 |                 navigate("/saved_listing"), setisActiveMoblie(!isActiveMoblie);
 71 |               }}
 72 |               className="p-2 cursor-pointer rounded-sm mb-3  font-heading hover:bg-brand-blue/40 duration-300"
 73 |             >
 74 |               <p to="/saved_listing" className="flex items-center gap-2">
 75 |                 <FaBookmark className="text-amber-600" /> Saved Listings
 76 |               </p>
 77 |             </li>
 78 |             <li
 79 |               onClick={handleLogOut}
 80 |               className="p-2  rounded-sm mb-3  cursor-pointer font-heading hover:bg-brand-blue/40 duration-300"
 81 |             >
 82 |               <p className="flex items-center gap-2">
 83 |                 <FaSignOutAlt className="text-red-500" /> Log Out
 84 |               </p>
 85 |             </li>
 86 |           </>
 87 |         ) : (
 88 |           <li
 89 |             onClick={() => {
 90 |               navigate("/login"), setisActiveMoblie(!isActiveMoblie);
 91 |             }}
 92 |             className="p-2  rounded-sm mb-3 cursor-pointer font-heading hover:bg-brand-blue/40 duration-300"
 93 |           >
 94 |             <p to="/login" className="flex items-center gap-2">
 95 |               <FaSignInAlt className="text-green-600" /> Login
 96 |             </p>
 97 |           </li>
 98 |         )}
 99 |       </ul>
100 |       <ToastContainer />
101 |     </menu>
102 |   );
103 | };
104 | 
105 | export default MobileMenu;
106 | 


--------------------------------------------------------------------------------
/src/components/Contact.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { BsSend } from "react-icons/bs";
  3 | import { useSelector } from "react-redux";
  4 | import { Link } from "react-router-dom";
  5 | 
  6 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
  7 | 
  8 | const Contact = ({ listing }) => {
  9 |   const { currentUser } = useSelector((state) => state.user);
 10 |   const [ownerInfo, setOwnerInfo] = useState({});
 11 |   const [loading, setLoading] = useState(false);
 12 |   const [message, setMessage] = useState(null);
 13 |   const [responseMsg, setResponseMsg] = useState("");
 14 |   const [sending, setSending] = useState(false);
 15 |   const [messageSendSuccess, setMessageSendSuccess] = useState(false);
 16 | 
 17 |   // =====Load Property Owner Data =====//
 18 |   useEffect(() => {
 19 |     (async () => {
 20 |       setLoading(true);
 21 |       const res = await  fetch(`${API_BASE}/api/users/${listing.userRef}`);
 22 |       const json = await res.json();
 23 |       if (json.success === false) {
 24 |         setLoading(false);
 25 |       } else {
 26 |         setOwnerInfo(json);
 27 |         setLoading(false);
 28 |       }
 29 |     })();
 30 |   }, []);
 31 | 
 32 |   const handleChange = (e) => {
 33 |     setMessage(e.target.value);
 34 |   };
 35 | 
 36 |   const handleSendMsg = async () => {
 37 |     const conversationApiData = {
 38 |       creatorId: currentUser._id,
 39 |       participantId: listing.userRef,
 40 |       chatPartner: ownerInfo,
 41 |       chatCreator: currentUser,
 42 |     };
 43 | 
 44 |     try {
 45 |       setSending(true);
 46 |       const res = await  fetch(`${API_BASE}/api/conversation/create`, {
 47 |         method: "POST",
 48 |         headers: { "Content-Type": "application/json" },
 49 |         body: JSON.stringify(conversationApiData),
 50 |       });
 51 |       const json = await res.json();
 52 |       //===checking reqest success or not ===//
 53 |       if (json.success === false) {
 54 |         setResponseMsg("Message sending failed. Try again!");
 55 |         setSending(false);
 56 |       } else {
 57 |         // IF Conversation created successfully
 58 |         const resMsg = await  fetch(`${API_BASE}/api/message/create`, {
 59 |           method: "POST",
 60 |           headers: { "Content-Type": "application/json" },
 61 |           body: JSON.stringify({
 62 |             sender: currentUser._id,
 63 |             receiver: listing.userRef,
 64 |             message: message,
 65 |           }),
 66 |         });
 67 |         const msgJson = await resMsg.json();
 68 |         //===checking Message request success or not ===//
 69 |         if (msgJson.success === false) {
 70 |           setResponseMsg("Message sending failed. Try again!");
 71 |           setSending(false);
 72 |         } else {
 73 |           setResponseMsg(msgJson);
 74 |           setMessageSendSuccess(true);
 75 |           setSending(false);
 76 |         }
 77 |       }
 78 |     } catch (error) {
 79 |       console.log(error);
 80 |       setSending(false);
 81 |     }
 82 |   };
 83 | 
 84 |   return (
 85 |     <>
 86 |       {loading ? (
 87 |         "Loading..."
 88 |       ) : (
 89 |         <div className="contact_component">
 90 |           <div className="property_owner mt-10">
 91 |             <div className="image_container flex items-center justify-start gap-2">
 92 |               <img
 93 |                 src={ownerInfo.avatar}
 94 |                 alt="Property Owner"
 95 |                 className="h-16 w-16 rounded-full border-[1px] shadow-lg border-brand-blue"
 96 |               />
 97 |               <div className="tittle">
 98 |                 <h3 className="text-lg font-heading capitalize truncate">
 99 |                   {ownerInfo.username}
100 |                 </h3>
101 |                 <p className="font-content font-bold ,text-sm text-gray-500">
102 |                   Property Owner
103 |                 </p>
104 |               </div>
105 |             </div>
106 |           </div>
107 |           {sending ? (
108 |             <div>
109 |               <p
110 |                 className=" text-amber-600 font-heading text-left
111 |                                         flex items-center justify-start mt-5"
112 |               >
113 |                 <BsSend className="mr-2" />
114 |                 Sending...
115 |               </p>
116 |             </div>
117 |           ) : (
118 |             <div className="contact_form mt-5">
119 |               {messageSendSuccess ? (
120 |                 <div>
121 |                   <p
122 |                     className=" text-green-600 font-heading text-left
123 |                                         "
124 |                   >
125 |                     {responseMsg}
126 |                   </p>
127 |                   <Link to={"/message"}>
128 |                     <button className="text-sm font-heading mt-2 px-5 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 duration-300">
129 |                       Goto Messanger
130 |                     </button>
131 |                   </Link>
132 |                 </div>
133 |               ) : (
134 |                 <>
135 |                   <textarea
136 |                     id="message"
137 |                     type="text"
138 |                     placeholder="Write your message..."
139 |                     name="message"
140 |                     className="form_input border-[1px] border-gray-400  focus:border-brand-blue h-44 rounded-md placeholder:text-sm mt-3"
141 |                     onChange={handleChange}
142 |                   />
143 |                   <button
144 |                     disabled={!message}
145 |                     onClick={handleSendMsg}
146 |                     className="w-full px-2 py-3 text-lg font-heading text-white bg-brand-blue disabled:bg-brand-blue/60"
147 |                   >
148 |                     Send Messages
149 |                   </button>
150 |                   <p
151 |                     className=" text-red-600 font-heading text-left
152 |                                         "
153 |                   >
154 |                     {responseMsg}
155 |                   </p>
156 |                 </>
157 |               )}
158 |             </div>
159 |           )}
160 |         </div>
161 |       )}
162 |     </>
163 |   );
164 | };
165 | 
166 | export default Contact;
167 | 


--------------------------------------------------------------------------------
/src/components/ListingCard.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react'
  2 | import { FaBath, FaBed, FaChartArea, FaBookmark  , FaLocationArrow, } from 'react-icons/fa'
  3 | import { useDispatch, useSelector } from 'react-redux';
  4 | import { useNavigate } from 'react-router-dom'
  5 | import { clearSavedListing, handleLisingRemove, handleSave } from '../redux/saveListing/saveListingSlice';
  6 | 
  7 | const ListingCard = ({ listing }) => {
  8 |     const [heart, setHeart] = useState(false);
  9 |     const { saveListings } = useSelector(state => state.savedListing)
 10 |     const { currentUser } = useSelector(state => state.user)
 11 |     const dispatch = useDispatch()
 12 |     const navigate = useNavigate();
 13 |     const { title, address, area, bath, bed, discountPrice, imgUrl, offer, price, type, _id } = listing;
 14 | 
 15 |     const handleSaveListings = (id) => {
 16 |         if (currentUser && currentUser.email) {
 17 |             const isSaved = saveListings.some(saveListing => saveListing._id === id);
 18 |             if (isSaved) {
 19 |                 const restListings = saveListings.filter(savedListing => savedListing._id !== id);
 20 |                 dispatch(handleLisingRemove(restListings));
 21 |                 setHeart(false);
 22 |             } else {
 23 |                 const listingToAdd = listing
 24 |                 dispatch(handleSave(listingToAdd));
 25 |                 setHeart(true);
 26 |             }
 27 |         }
 28 |         else {
 29 |             navigate('/login')
 30 |         }
 31 |     };
 32 | 
 33 | 
 34 | 
 35 |     useEffect(() => {
 36 |         if (currentUser) {
 37 |             const isSaved = saveListings.some(saveListing => saveListing._id === _id);
 38 |             if (isSaved) {
 39 |                 setHeart(true);
 40 |             } else {
 41 |                 setHeart(false);
 42 |             }
 43 |         }
 44 |         else {
 45 |             dispatch(clearSavedListing())
 46 |         }
 47 |     }, [])
 48 | 
 49 | 
 50 | 
 51 |     return (
 52 |         <div className="listing_card bg-white shadow-lg shadow-black/10  hover:shadow-brand-blue/20 rounded-sm w-full hover:shadow-lg group sm:mr-auto sm:ml-0 mx-auto">
 53 |             <div className="card-container">
 54 |                 <div
 55 |                     className="image_container relative overflow-hidden cursor-pointer"
 56 |                     onClick={() => navigate(`/listing/${_id}`)}
 57 |                 >
 58 |                     <img
 59 |                         className='max-h-[150px] min-h-[150px] w-full object-cover rounded-t-sm hover:scale-105 duration-300'
 60 |                         src={imgUrl[0]} alt="property image"
 61 |                     />
 62 |                     <div className="absolute bottom-2 left-2 bg-brand-blue py-1 px-2 ">
 63 |                         <p className='text-xs text-white  font-heading uppercase rounded-sm shadow-sm'>{type}</p>
 64 |                     </div>
 65 |                     {
 66 |                         offer && <div className="absolute top-2 right-0 bg-amber-400 py-1 px-2 ">
 67 |                             <p className='text-xs capitalize text-black font-heading'>Discount!</p>
 68 |                         </div>
 69 |                     }
 70 |                 </div>
 71 | 
 72 | 
 73 | 
 74 |                 <div className="card_body group-hover:bg-brand-blue/5 duration-500  border-x border-b border-brand-blue/20 ">
 75 | 
 76 |                     <div
 77 |                         className="content-container p-3 pb-0 cursor-pointer"
 78 |                         onClick={() => navigate(`/listing/${_id}`)}
 79 |                     >
 80 |                         <h2 className="text-lg font-heading truncate uppercase duration-300 group-hover:text-brand-blue ">{title}</h2>
 81 |                         <p
 82 |                             className='font-content text-xs font-bold truncate flex items-center justify-start mt-1'>
 83 |                             <FaLocationArrow className='mr-1 text-brand-blue' />
 84 |                             {address}
 85 |                         </p>
 86 | 
 87 | 
 88 | 
 89 | 
 90 |                         <div className="info_container mt-4 flex items-center truncate">
 91 |                             <p
 92 |                                 className='font-content text-xs font-bold truncate flex items-center justify-start'>
 93 |                                 <FaBed className='mr-1 text-brand-blue' />
 94 |                                 {bed} Bed
 95 |                             </p>
 96 |                             <p
 97 |                                 className='font-content text-xs font-bold truncate flex items-center justify-start ml-4'>
 98 |                                 <FaBath className='mr-1 text-brand-blue' />
 99 |                                 {bath} Bath
100 |                             </p>
101 |                             <p
102 |                                 className='font-content text-xs font-bold truncate flex items-center justify-start ml-4'>
103 |                                 <FaChartArea className='mr-1 text-brand-blue' />
104 |                                 {area} Area
105 |                             </p>
106 |                         </div>
107 |                     </div>
108 | 
109 | 
110 | 
111 |                     {/* PRICE CONTAINER SECTION  */}
112 |                     <div className="listing_footer grid grid-cols-2 align-middle border-t border-brand-blue/40 mt-5 p-3 pb-4">
113 | 
114 |                         <div className="price_container truncate">
115 |                             {offer ?
116 |                                 <p className='text-xl font-content text-brand-blue font-bold  flex items-center justify-start truncate'>${discountPrice} <s className='text-gray-400  text-xs mt-1 ml-1'>${price}</s> </p>
117 | 
118 |                                 : <p className='text-xl font-content text-brand-blue font-bold  flex items-center justify-start truncate'>${price}</p>
119 |                             }
120 |                         </div>
121 |                         <div className="footer_btn flex items-center justify-end mr-1">
122 |                             <button
123 |                                 onClick={() => handleSaveListings(_id)}
124 |                                 className={`text-lg drop-shadow-sm duration-300  ${heart ? 'text-brand-blue' : "text-gray-300"} `}>
125 |                                 <FaBookmark className='' />
126 |                             </button>
127 |                         </div>
128 |                     </div>
129 |                 </div>
130 |             </div>
131 |         </div>
132 | 
133 |     )
134 | }
135 | 
136 | export default ListingCard


--------------------------------------------------------------------------------
/src/components/PostCard.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { FaBath, FaBed, FaCamera, FaCheck } from "react-icons/fa"
  3 | import { useNavigate } from 'react-router-dom';
  4 | 
  5 | 
  6 | 
  7 | 
  8 | 
  9 | const PostCard = ({ postInfo }) => {
 10 |     const {
 11 |         bed,
 12 |         address,
 13 |         bath,
 14 |         description,
 15 |         discountPrice,
 16 |         furnished,
 17 |         imgUrl,
 18 |         offer,
 19 |         parking,
 20 |         price,
 21 |         title,
 22 |         type,
 23 |         _id } = postInfo.post;
 24 |     const navigate = useNavigate();
 25 | 
 26 |     return (
 27 |         <>
 28 |             <div
 29 |                 className="rounded-md  bg-white  shadow-lg hover:shadow-xl "
 30 |             >
 31 |                 <div
 32 |                     onClick={() => navigate(`/listing/${_id}`)}
 33 |                     className="relative flex items-end overflow-hidden rounded-md h-[200px] cursor-pointer "
 34 |                 >
 35 |                     <img className='hover:scale-105 object-cover h-full w-full duration-300' src={imgUrl[0]} alt="wallpaper" />
 36 | 
 37 | 
 38 | 
 39 |                     <div className="absolute bottom-3 left-3 inline-flex items-center rounded-sm bg-brand-blue px-2 py-1 shadow-md">
 40 |                         <span className=" text-xs text-white uppercase font-heading">
 41 |                             For {type}
 42 |                         </span>
 43 |                     </div>
 44 |                     <div className="absolute bottom-3 right-3 inline-flex items-center rounded-sm  px-2 py-1 ">
 45 |                         <span className=" text-xs text-white uppercase font-heading flex items-center ">
 46 |                             <FaCamera className='mr-1' />{imgUrl.length}
 47 |                         </span>
 48 |                     </div>
 49 |                     {
 50 |                         offer && <div className="absolute top-3 left-0 inline-flex items-center rounded-sm bg-amber-400  px-2 py-1 ">
 51 |                             <span className=" text-xs text-black uppercase font-heading flex items-center ">
 52 |                                 Discount!
 53 |                             </span>
 54 |                         </div>
 55 |                     }
 56 |                 </div>
 57 | 
 58 | 
 59 | 
 60 |                 {/* CARD BODY START HERE  */}
 61 |                 <div className="p-4">
 62 |                     <div
 63 |                         onClick={() => navigate(`/listing/${_id}`)}
 64 |                         className='cursor-pointer'
 65 |                     >
 66 |                         <h2
 67 |                             className="text-brand-blue font-heading text-xl truncate cursor-pointer">
 68 |                             {title}
 69 |                         </h2>
 70 |                         <p className="mt-1 text-sm text-slate-500 font-content font-medium truncate"> {description}</p>
 71 |                         <p className="mt-2 text-sm text-slate-600 font-content font-bold truncate"><span className='font-medium'>Address:</span> {address}</p>
 72 |                         <div className='mt-3 flex items-end justify-start'>
 73 | 
 74 | 
 75 |                             <p className='text-slate-700 w-1/2 font-content font-semibold text-sm flex items-center '><FaBed className='mr-1' /><span className='font-heading font-bold mr-1'>{bed}</span> Bed</p>
 76 | 
 77 | 
 78 | 
 79 |                             <p className='text-slate-700 w-1/2 font-content font-semibold text-sm flex items-center '><FaBath className='mr-1' /><span className='font-heading font-bold mr-1'>{bath}</span> Bath</p>
 80 |                         </div>
 81 |                         <div className='mt-2 flex items-end justify-start'>
 82 |                             <p className='text-slate-700 w-1/2 font-content font-semibold text-sm flex items-center '><FaCheck className={` mr-1 mt-[2px] ${parking ? 'text-green-600' : "text-gray-400"}`} />parking</p>
 83 | 
 84 |                             <p className='text-slate-700 w-1/2 font-content font-semibold text-sm flex items-center '><FaCheck className={`mr-1 mt-[2px] ${furnished ? 'text-green-600' : "text-gray-400"}`} />furnished</p>
 85 |                         </div>
 86 | 
 87 | 
 88 | 
 89 |                         <div className="mt-3 flex items-end justify-between">
 90 |                             {offer ?
 91 |                                 <p className='font-content truncate'>
 92 |                                     <span className="text-2xl font-bold font-content text-brand-blue ">${discountPrice}</span>
 93 |                                     {
 94 |                                         type === 'rent' && <span className="text-sm text-slate-700">/m</span>
 95 |                                     }
 96 |                                     <s className='font-bold text-sm text-gray-600 ml-2 truncate'>${price}</s>
 97 |                                 </p>
 98 | 
 99 |                                 : <p className='font-content truncate'>
100 |                                     <span className="text-2xl font-bold font-content text-brand-blue ">${price}</span>
101 |                                     {
102 |                                         type === 'rent' && <span className="text-sm text-slate-700">/m</span>
103 |                                     }
104 |                                 </p>}
105 | 
106 |                             <div className="inline-flex rounded-xl max-w-[150px]  duration-500">
107 |                                 <p className='font-heading text-lg truncate'>{postInfo.post.area ? postInfo.post.area : 0} <span className='font-content'>/sqft</span> </p>
108 |                             </div>
109 |                         </div>
110 |                     </div>
111 | 
112 |                     <div className='mt-4 flex items-end justify-between'>
113 |                         <button
114 |                             onClick={() => navigate(`/update_post/${_id}`)}
115 |                             className='bg-brand-blue rounded-sm py-2 px-7 font-heading text-white hover:opacity-95 text-sm'>
116 |                             Edit
117 |                         </button>
118 |                         <button
119 |                             onClick={() => postInfo.handlePostDelete(_id)}
120 |                             className='bg-red-800 py-2 px-5 rounded-sm  font-heading text-white hover:opacity-95 text-sm z-10'>
121 |                             Delete
122 |                         </button>
123 |                     </div>
124 |                 </div>
125 |             </div>
126 | 
127 |         </>
128 | 
129 |     )
130 | }
131 | 
132 | export default PostCard


--------------------------------------------------------------------------------
/src/pages/Home.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { useNavigate } from "react-router-dom";
  3 | import Footer from "../components/Footer";
  4 | import SaleListing from "../components/SaleListing";
  5 | import RentListing from "../components/RentListing";
  6 | import OfferedListing from "../components/OfferedListing";
  7 | 
  8 | const Home = () => {
  9 |   const navigate = useNavigate();
 10 | 
 11 |   return (
 12 |     <>
 13 |       <section className="relative bg-[url(https://images.unsplash.com/photo-1604014237800-1c9102c219da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80)] bg-cover bg-center bg-no-repeat">
 14 |         <div className="absolute inset-0 bg-brand-blue/50 sm:bg-brand-blue/10 sm:bg-gradient-to-r sm:from-brand-blue/70 sm:to-white/5"></div>
 15 | 
 16 |         <div className="relative mx-auto max-w-screen-xl px-4 py-32 sm:px-6 lg:flex lg:h-screen lg:items-center lg:px-8">
 17 |           <div className="max-w-xl text-center sm:text-left">
 18 |             <h1 className="text-3xl font-extrabold sm:text-5xl xl:text-6xl font-heading  text-white sm:text-left">
 19 |               Let us find your
 20 |               <strong className="block font-extrabold bg-white mt-2 text-brand-blue max-w-xs mx-auto sm:ml-0 sm:mr-auto sm:max-w-md font-oswald uppercase sm:text-left xl:max-w-3xl">
 21 |                 Forever Home.
 22 |               </strong>
 23 |             </h1>
 24 | 
 25 |             <p className="mt-4 max-w-md sm:text-md font-content text-white">
 26 |               Welcome to our home listings designed for you. Explore to find
 27 |               your perfect match. We're here to make finding your dream home a
 28 |               smooth, enjoyable experience.
 29 |             </p>
 30 | 
 31 |             <div className="mt-8 flex flex-wrap gap-4 text-center">
 32 |               <button
 33 |                 onClick={() => navigate("/search")}
 34 |                 className="block w-full rounded bg-brand-blue px-12 py-3 text-sm font-heading uppercase text-white shadow hover:bg-white hover:text-brand-blue duration-300 ease-in-out  sm:w-auto"
 35 |               >
 36 |                 Get Started
 37 |               </button>
 38 | 
 39 |               <button
 40 |                 onClick={() => navigate("/about")}
 41 |                 className="block w-full rounded hover:bg-brand-blue px-12 py-3 text-sm font-heading uppercase hover:text-white shadow bg-white text-brand-blue duration-300 ease-in-out  sm:w-auto"
 42 |               >
 43 |                 Learn More
 44 |               </button>
 45 |             </div>
 46 |           </div>
 47 |         </div>
 48 |       </section>
 49 | 
 50 |       {/* offer Post Listings */}
 51 |       <OfferedListing />
 52 | 
 53 |       {/* Anousment Section  */}
 54 |       <section className="bg-brand-blue">
 55 |         <div className="mx-auto max-w-screen-xl  space-y-8 px-4 py-16 sm:px-6 lg:space-y-16 lg:px-8">
 56 |           <div className="anoucement grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-3 ">
 57 |             <h2 className="font-oswald uppercase text-3xl text-center sm:text-left sm:text-3xl text-white  font-bold">
 58 |               Want to sell your property?
 59 |             </h2>
 60 |             <div className="btn_container flex items-center sm:justify-end justify-center">
 61 |               <button
 62 |                 className="group relative inline-flex items-center overflow-hidden rounded bg-white font-heading  px-8 py-3 text-brand-blue focus:outline-none"
 63 |                 onClick={() => navigate("/create_post")}
 64 |               >
 65 |                 <span className="absolute -end-full transition-all group-hover:end-4 text-brand-blue">
 66 |                   <svg
 67 |                     className="h-5 w-5 rtl:rotate-180"
 68 |                     xmlns="http://www.w3.org/2000/svg"
 69 |                     fill="none"
 70 |                     viewBox="0 0 24 24"
 71 |                     stroke="currentColor"
 72 |                   >
 73 |                     <path
 74 |                       strokeLinecap="round"
 75 |                       strokeLinejoin="round"
 76 |                       strokeWidth="2"
 77 |                       d="M17 8l4 4m0 0l-4 4m4-4H3"
 78 |                     />
 79 |                   </svg>
 80 |                 </span>
 81 | 
 82 |                 <span className="text-sm font-medium transition-all text-brand-blue group-hover:me-4">
 83 |                   {"Let's Sell Now!"}
 84 |                 </span>
 85 |               </button>
 86 |             </div>
 87 |           </div>
 88 |         </div>
 89 |       </section>
 90 | 
 91 |       {/* Sale Post Listings */}
 92 |       <SaleListing />
 93 | 
 94 |       {/* Anousment Section  */}
 95 |       <section className="bg-brand-blue">
 96 |         <div className="mx-auto max-w-screen-xl  space-y-8 px-4 py-16 sm:px-6 lg:space-y-16 lg:px-8">
 97 |           <div className="anoucement grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-3 ">
 98 |             <h2 className="font-oswald uppercase text-3xl text-center sm:text-left sm:text-3xl text-white  font-bold">
 99 |               Ready to rent your dream property?
100 |             </h2>
101 |             <div className="btn_container flex items-center sm:justify-end justify-center">
102 |               <button
103 |                 className="group relative inline-flex items-center overflow-hidden rounded bg-white font-heading  px-8 py-3 text-brand-blue "
104 |                 onClick={() => navigate("/search")}
105 |               >
106 |                 <span className="absolute -end-full transition-all group-hover:end-4 text-brand-blue">
107 |                   <svg
108 |                     className="h-5 w-5 rtl:rotate-180"
109 |                     xmlns="http://www.w3.org/2000/svg"
110 |                     fill="none"
111 |                     viewBox="0 0 24 24"
112 |                     stroke="currentColor"
113 |                   >
114 |                     <path
115 |                       strokeLinecap="round"
116 |                       strokeLinejoin="round"
117 |                       strokeWidth="2"
118 |                       d="M17 8l4 4m0 0l-4 4m4-4H3"
119 |                     />
120 |                   </svg>
121 |                 </span>
122 | 
123 |                 <span className="text-sm font-medium transition-all  group-hover:me-4 text-brand-blue">
124 |                   {"Let's Take Rent!"}
125 |                 </span>
126 |               </button>
127 |             </div>
128 |           </div>
129 |         </div>
130 |       </section>
131 |       {/* Rent Post Listings */}
132 |       <RentListing />
133 | 
134 |       {/* // Footer section code here */}
135 |       <Footer />
136 |     </>
137 |   );
138 | };
139 | 
140 | export default Home;
141 | 


--------------------------------------------------------------------------------
/src/components/RentListing.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react'
  2 | import ListingCard from '../components/ListingCard'
  3 | import "slick-carousel/slick/slick.css";
  4 | import "slick-carousel/slick/slick-theme.css";
  5 | import Slider from "react-slick";
  6 | import { BsArrowRight, BsArrowLeft, } from "react-icons/bs";
  7 | import SkletonLoading from './SkletonLoading';
  8 | import { useNavigate } from 'react-router-dom';
  9 | 
 10 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
 11 | 
 12 | 
 13 | const RentListing = () => {
 14 |     const [loading, setLoading] = useState(true)
 15 |     const [rentListings, setRentlisting] = useState([])
 16 |     const navigate = useNavigate()
 17 | 
 18 |     //===Load Data ===//
 19 |     useEffect(() => {
 20 |         (async () => {
 21 |             try {
 22 |                 setLoading(true)
 23 |                 const res = await  fetch(`${API_BASE}/api/posts?type=rent`)
 24 |                 const json = await res.json()
 25 |                 if (json.success === false) {
 26 |                     setLoading(false)
 27 |                 }
 28 |                 else {
 29 |                     setRentlisting(json)
 30 |                     setLoading(false)
 31 |                 }
 32 |             } catch (error) {
 33 |                 console.log(error);
 34 |                 setLoading(false)
 35 |             }
 36 |         })()
 37 |     }, [])
 38 | 
 39 | 
 40 |     //====SLider Functions=====//
 41 |     function SamplePrevArrow({ onClick }) {
 42 |         return (
 43 |             <div
 44 |                 className='absolute bottom-0 left-5 z-10   p-2 px-5 sm:px-8 sm:p-4 sm:py-3 rounded-s-md bg-brand-blue flex items-center justify-center border-2 border-transparent cursor-pointer shadow-lg hover:bg-white/90 
 45 |                 hover:border-2 hover:border-brand-blue  duration-300 group sm:right-32  sm:left-auto'
 46 |                 onClick={onClick}
 47 |             >
 48 |                 <BsArrowLeft className='text-white text-xl sm:text-xl group-hover:text-brand-blue ' />
 49 |             </div>
 50 |         )
 51 |     }
 52 |     function SampleNextArrow({ onClick }) {
 53 |         return (
 54 |             <div
 55 |                 className='absolute bottom-0 right-5 sm:right-2 px-5 sm:px-8 sm:py-3 z-10  p-2 sm:p-4 rounded-e-md bg-brand-blue flex items-center justify-center border-2 border-transparent cursor-pointer shadow-lg hover:bg-white/90 duration-300 group hover:border-brand-blue'
 56 |                 onClick={onClick}
 57 |             >
 58 |                 <BsArrowRight className='text-white text-xl sm:text-xl group-hover:text-brand-blue ' />
 59 |             </div>
 60 |         )
 61 |     }
 62 | 
 63 |     const settings = {
 64 |         dots: false,
 65 |         infinite: true,
 66 |         lazyLoad: false,
 67 |         speed: 400,
 68 |         slidesToShow: 4,
 69 |         slidesToScroll: 1,
 70 |         nextArrow: <SampleNextArrow to="next" />,
 71 |         prevArrow: <SamplePrevArrow to="prev" />,
 72 |         responsive: [
 73 |             {
 74 |                 breakpoint: 1024,
 75 |                 settings: {
 76 |                     slidesToShow: 3,
 77 |                 }
 78 |             },
 79 |             {
 80 |                 breakpoint: 720,
 81 |                 settings: {
 82 |                     slidesToShow: 2,
 83 |                 }
 84 |             },
 85 |             {
 86 |                 breakpoint: 480,
 87 |                 settings: {
 88 |                     slidesToShow: 1,
 89 |                     slidesToScroll: 1
 90 |                 }
 91 |             }
 92 |         ]
 93 |     };
 94 | 
 95 |     return (
 96 |         < section >
 97 |             <div
 98 |                 className="mx-auto max-w-screen-xl  space-y-8 px-4 py-16 sm:px-6 lg:space-y-16 lg:px-8"
 99 |             >
100 |                 <div className="content">
101 |                     <h2 className='text-3xl font-bold sm:text-5xl font-heading  text-brand-blue sm:text-left '>
102 |                         Explore Our Rental Listings
103 |                     </h2>
104 |                     <p className='font-content  font-medium text-sm sm:text-lg mt-3 max-w-3xl'>
105 |                         Discover our Rental Showcase! Step into a world of diverse properties waiting for you. Embrace the possibilities of comfortable living spaces and find your perfect rental match. Start exploring your next home now!
106 |                     </p>
107 |                 </div>
108 | 
109 |                 <div className="post_container !mt-4">
110 |                     {
111 |                         loading ?
112 |                             <SkletonLoading />
113 |                             :
114 |                             <div className="slider_container">
115 |                                 <Slider {...settings} className='z-10 relative gap-3'>
116 |                                     {
117 |                                         rentListings && rentListings.map(listing => <ListingCard key={listing._id} listing={listing} />)
118 |                                     }
119 |                                 </Slider>
120 |                             </div>
121 |                     }
122 |                 </div>
123 | 
124 |                 <div className="btn_container flex items-center justify-center">
125 |                     <button
126 |                         className="group relative inline-flex items-center overflow-hidden rounded bg-brand-blue px-8 py-3 text-white "
127 |                         onClick={() => navigate('/search')}
128 |                     >
129 |                         <span className="absolute -end-full transition-all group-hover:end-4">
130 |                             <svg
131 |                                 className="h-5 w-5 rtl:rotate-180"
132 |                                 xmlns="http://www.w3.org/2000/svg"
133 |                                 fill="none"
134 |                                 viewBox="0 0 24 24"
135 |                                 stroke="currentColor"
136 |                             >
137 |                                 <path
138 |                                     strokeLinecap="round"
139 |                                     strokeLinejoin="round"
140 |                                     strokeWidth="2"
141 |                                     d="M17 8l4 4m0 0l-4 4m4-4H3"
142 |                                 />
143 |                             </svg>
144 |                         </span>
145 | 
146 |                         <span className="text-sm font-medium transition-all  group-hover:me-4">
147 |                             Explore More
148 |                         </span>
149 |                     </button>
150 |                 </div>
151 | 
152 |             </div>
153 |         </section>
154 |     )
155 | }
156 | 
157 | export default RentListing


--------------------------------------------------------------------------------
/src/components/SaleListing.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react'
  2 | import ListingCard from '../components/ListingCard'
  3 | import "slick-carousel/slick/slick.css";
  4 | import "slick-carousel/slick/slick-theme.css";
  5 | import Slider from "react-slick";
  6 | import { BsArrowRight, BsArrowLeft, } from "react-icons/bs";
  7 | import SkletonLoading from './SkletonLoading';
  8 | import { useNavigate } from 'react-router-dom';
  9 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
 10 | 
 11 | 
 12 | 
 13 | const SaleListing = () => {
 14 |     const [loading, setLoading] = useState(true)
 15 |     const [saleListings, setSaleListings] = useState([])
 16 | 
 17 |     const navigate = useNavigate()
 18 | 
 19 |     //===Load Data ===//
 20 |     useEffect(() => {
 21 |         (async () => {
 22 |             try {
 23 |                 setLoading(true)
 24 |                 const res = await  fetch(`${API_BASE}/api/posts?type=sale`)
 25 |                 const json = await res.json()
 26 |                 if (json.success === false) {
 27 |                     setLoading(false)
 28 |                 }
 29 |                 else {
 30 |                     setSaleListings(json)
 31 |                     setLoading(false)
 32 |                 }
 33 |             } catch (error) {
 34 |                 console.log(error);
 35 |                 setLoading(false)
 36 |             }
 37 |         })()
 38 |     }, [])
 39 | 
 40 | 
 41 |     //====SLider Functions=====//
 42 |     function SamplePrevArrow({ onClick }) {
 43 |         return (
 44 |             <div
 45 |                 className='absolute bottom-0 left-5 z-10   p-2 px-5 sm:px-8 sm:p-4 sm:py-3 rounded-s-md bg-brand-blue flex items-center justify-center border-2 border-transparent cursor-pointer shadow-lg hover:bg-white/90 
 46 |                 hover:border-2 hover:border-brand-blue  duration-300 group sm:right-32  sm:left-auto'
 47 |                 onClick={onClick}
 48 |             >
 49 |                 <BsArrowLeft className='text-white text-xl sm:text-xl group-hover:text-brand-blue ' />
 50 |             </div>
 51 |         )
 52 |     }
 53 |     function SampleNextArrow({ onClick }) {
 54 |         return (
 55 |             <div
 56 |                 className='absolute bottom-0 right-5 sm:right-2 px-5 sm:px-8 sm:py-3 z-10  p-2 sm:p-4 rounded-e-md bg-brand-blue flex items-center justify-center border-2 border-transparent cursor-pointer shadow-lg hover:bg-white/90 duration-300 group hover:border-brand-blue'
 57 |                 onClick={onClick}
 58 |             >
 59 |                 <BsArrowRight className='text-white text-xl sm:text-xl group-hover:text-brand-blue ' />
 60 |             </div>
 61 |         )
 62 |     }
 63 | 
 64 |     const settings = {
 65 |         dots: false,
 66 |         infinite: true,
 67 |         lazyLoad: false,
 68 |         speed: 400,
 69 |         slidesToShow: 4,
 70 |         slidesToScroll: 1,
 71 |         nextArrow: <SampleNextArrow to="next" />,
 72 |         prevArrow: <SamplePrevArrow to="prev" />,
 73 |         responsive: [
 74 |             {
 75 |                 breakpoint: 1024,
 76 |                 settings: {
 77 |                     slidesToShow: 3,
 78 |                 }
 79 |             },
 80 |             {
 81 |                 breakpoint: 720,
 82 |                 settings: {
 83 |                     slidesToShow: 2,
 84 |                 }
 85 |             },
 86 |             {
 87 |                 breakpoint: 480,
 88 |                 settings: {
 89 |                     slidesToShow: 1,
 90 |                     slidesToScroll: 1
 91 |                 }
 92 |             }
 93 |         ]
 94 |     };
 95 | 
 96 |     return (
 97 |         < section >
 98 |             <div
 99 |                 className="mx-auto max-w-screen-xl  space-y-8 px-4 py-16 sm:px-6 lg:space-y-16 lg:px-8"
100 |             >
101 |                 <div className="content">
102 |                     <h2 className='text-3xl font-bold sm:text-5xl font-heading  text-brand-blue sm:text-left '>
103 |                         Explore Our Sale Post
104 |                     </h2>
105 |                     <p className='font-content font-medium text-sm sm:text-lg mt-3 max-w-3xl'>
106 |                         Step into our Sale Event and discover an array of incredible offers waiting for you! Unleash your shopping desires with discounts on a wide range of products. Embrace the savings—start shopping now!
107 |                     </p>
108 |                 </div>
109 | 
110 |                 <div className="post_container !mt-4">
111 |                     {
112 |                         loading ?
113 |                             <SkletonLoading />
114 |                             :
115 |                             <div className="slider_container">
116 |                                 <Slider {...settings} className='z-10 relative gap-3'>
117 |                                     {
118 |                                         saleListings && saleListings.map(listing => <ListingCard key={listing._id} listing={listing} />)
119 |                                     }
120 |                                 </Slider>
121 |                             </div>
122 |                     }
123 |                 </div>
124 | 
125 | 
126 |                 
127 | 
128 |                 <div className="btn_container flex items-center justify-center">
129 |                     <button
130 |                         className="group relative inline-flex items-center overflow-hidden rounded bg-brand-blue px-8 py-3 text-white "
131 |                        onClick={()=>navigate('/search')}
132 |                     >
133 |                         <span className="absolute -end-full transition-all group-hover:end-4">
134 |                             <svg
135 |                                 className="h-5 w-5 rtl:rotate-180"
136 |                                 xmlns="http://www.w3.org/2000/svg"
137 |                                 fill="none"
138 |                                 viewBox="0 0 24 24"
139 |                                 stroke="currentColor"
140 |                             >
141 |                                 <path
142 |                                     strokeLinecap="round"
143 |                                     strokeLinejoin="round"
144 |                                     strokeWidth="2"
145 |                                     d="M17 8l4 4m0 0l-4 4m4-4H3"
146 |                                 />
147 |                             </svg>
148 |                         </span>
149 | 
150 |                         <span className="text-sm font-medium transition-all  group-hover:me-4">
151 |                             Explore More
152 |                         </span>
153 |                     </button>
154 |                 </div>
155 | 
156 |             </div>
157 |         </section>
158 |     )
159 | }
160 | 
161 | export default SaleListing


--------------------------------------------------------------------------------
/src/components/OfferedListing.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react'
  2 | import ListingCard from '../components/ListingCard'
  3 | import "slick-carousel/slick/slick.css";
  4 | import "slick-carousel/slick/slick-theme.css";
  5 | import Slider from "react-slick";
  6 | import { BsArrowRight, BsArrowLeft, } from "react-icons/bs";
  7 | import SkletonLoading from './SkletonLoading';
  8 | import { useNavigate } from 'react-router-dom';
  9 | 
 10 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
 11 | 
 12 | 
 13 | 
 14 | 
 15 | const OfferedListing = () => {
 16 |     const [loading, setLoading] = useState(true)
 17 |     const [offerListings, setOfferListings] = useState([])
 18 |     const navigate = useNavigate()
 19 | 
 20 |     //===Load Data ===//
 21 |     useEffect(() => {
 22 |         (async () => {
 23 |             try {
 24 |                 setLoading(true)
 25 |                 const res = await  fetch(`${API_BASE}/api/posts?type=all&offer=true`)
 26 |                 const json = await res.json()
 27 |                 if (json.success === false) {
 28 |                     setLoading(false)
 29 |                 }
 30 |                 else {
 31 |                     setOfferListings(json)
 32 |                     setLoading(false)
 33 |                 }
 34 |             } catch (error) {
 35 |                 console.log(error);
 36 |                 setLoading(false)
 37 |             }
 38 |         })()
 39 |     }, [])
 40 | 
 41 | 
 42 |     //====SLider Functions=====//
 43 |     function SamplePrevArrow({ onClick }) {
 44 |         return (
 45 |             <div
 46 |                 className='absolute bottom-0 left-5 z-10   p-2 px-5 sm:px-8 sm:p-4 sm:py-3 rounded-s-md bg-brand-blue flex items-center justify-center border-2 border-transparent cursor-pointer shadow-lg hover:bg-white/90 
 47 |                 hover:border-2 hover:border-brand-blue  duration-300 group sm:right-32  sm:left-auto'
 48 |                 onClick={onClick}
 49 |             >
 50 |                 <BsArrowLeft className='text-white text-xl sm:text-xl group-hover:text-brand-blue ' />
 51 |             </div>
 52 |         )
 53 |     }
 54 |     function SampleNextArrow({ onClick }) {
 55 |         return (
 56 |             <div
 57 |                 className='absolute bottom-0 right-5 sm:right-2 px-5 sm:px-8 sm:py-3 z-10  p-2 sm:p-4 rounded-e-md bg-brand-blue flex items-center justify-center border-2 border-transparent cursor-pointer shadow-lg hover:bg-white/90 duration-300 group hover:border-brand-blue'
 58 |                 onClick={onClick}
 59 |             >
 60 |                 <BsArrowRight className='text-white text-xl sm:text-xl group-hover:text-brand-blue ' />
 61 |             </div>
 62 |         )
 63 |     }
 64 | 
 65 |     const settings = {
 66 |         dots: false,
 67 |         infinite: true,
 68 |         lazyLoad: false,
 69 |         speed: 400,
 70 |         slidesToShow: 4,
 71 |         slidesToScroll: 1,
 72 |         nextArrow: <SampleNextArrow to="next" />,
 73 |         prevArrow: <SamplePrevArrow to="prev" />,
 74 |         responsive: [
 75 |             {
 76 |                 breakpoint: 1024,
 77 |                 settings: {
 78 |                     slidesToShow: 3,
 79 |                 }
 80 |             },
 81 |             {
 82 |                 breakpoint: 720,
 83 |                 settings: {
 84 |                     slidesToShow: 2,
 85 |                 }
 86 |             },
 87 |             {
 88 |                 breakpoint: 480,
 89 |                 settings: {
 90 |                     slidesToShow: 1,
 91 |                     slidesToScroll: 1
 92 |                 }
 93 |             }
 94 |         ]
 95 |     };
 96 | 
 97 | 
 98 | 
 99 |     return (
100 |         < section >
101 |             <div
102 |                 className="mx-auto max-w-screen-xl  space-y-8 px-4 py-16 sm:px-6 lg:space-y-16 lg:px-8"
103 |             >
104 |                 <div className="content">
105 |                     <h2 className='text-3xl font-bold sm:text-5xl font-heading  text-brand-blue sm:text-left '>
106 |                         Enjoy Our <span className='bg-amber-400 px-1 pb-1'>Exciting Discount</span>
107 |                     </h2>
108 |                     <p className='font-content  font-medium text-sm sm:text-lg mt-4 max-w-3xl'>
109 |                         Find Your Perfect Home! Whether you want to rent or buy, we've got great deals for you. Discover comfortable rentals and awesome properties for sale. Your dream home is just a click away!
110 |                     </p>
111 |                 </div>
112 | 
113 |                 <div className="post_container !mt-4">
114 |                     {
115 |                         loading ?
116 |                             <SkletonLoading />
117 |                             :
118 |                             <div className="slider_container">
119 |                                 <Slider {...settings} className='z-10 relative gap-3'>
120 |                                     {
121 |                                         offerListings && offerListings.map(listing => <ListingCard key={listing._id} listing={listing} />)
122 |                                     }
123 |                                 </Slider>
124 |                             </div>
125 |                     }
126 |                 </div>
127 | 
128 |                 <div className="btn_container flex items-center justify-center">
129 |                     <button
130 |                         className="group relative inline-flex items-center overflow-hidden rounded bg-brand-blue px-8 py-3 text-white "
131 |                         onClick={() => navigate('/search')}
132 |                     >
133 |                         <span className="absolute -end-full transition-all group-hover:end-4">
134 |                             <svg
135 |                                 className="h-5 w-5 rtl:rotate-180"
136 |                                 xmlns="http://www.w3.org/2000/svg"
137 |                                 fill="none"
138 |                                 viewBox="0 0 24 24"
139 |                                 stroke="currentColor"
140 |                             >
141 |                                 <path
142 |                                     strokeLinecap="round"
143 |                                     strokeLinejoin="round"
144 |                                     strokeWidth="2"
145 |                                     d="M17 8l4 4m0 0l-4 4m4-4H3"
146 |                                 />
147 |                             </svg>
148 |                         </span>
149 | 
150 |                         <span className="text-sm font-medium transition-all  group-hover:me-4">
151 |                             Explore More
152 |                         </span>
153 |                     </button>
154 |                 </div>
155 | 
156 |             </div>
157 |         </section>
158 |     )
159 | }
160 | 
161 | export default OfferedListing


--------------------------------------------------------------------------------
/src/components/Conversations.jsx:
--------------------------------------------------------------------------------
  1 | import { useDispatch, useSelector } from 'react-redux'
  2 | import { signal } from '@preact/signals-react'
  3 | import { notifySignal } from './SocketConnection'
  4 | import { setNotification } from '../redux/notifications/notificationSlice'
  5 | 
  6 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
  7 | export const activeChatId = signal({
  8 |     chatId: ""
  9 | })
 10 | 
 11 | const Conversations = ({ conversationInfo }) => {
 12 |     const { conversation,
 13 |         trackConversation,
 14 |         setTrackConversation,
 15 |     } = conversationInfo
 16 |     const dispatch = useDispatch();
 17 |     let notifications = notifySignal.value.notifications;
 18 | 
 19 |     const { currentUser } = useSelector(state => state.user)
 20 |     const { notificationsDB } = useSelector(state => state.notification)
 21 | 
 22 | 
 23 |     const isNotify = notificationsDB.some(notify => notify.chatId === conversation._id);
 24 | 
 25 |     const handleNotificationClick = (conversationId) => {
 26 |         const notificationIndex = notifications.some(notify => notify.chatId === conversationId);
 27 | 
 28 |         if (notificationIndex) {
 29 |             const restNotifications = notifications.filter(notify => notify.chatId !== conversationId)
 30 |             notifySignal.value.notifications = restNotifications;
 31 |             dispatch(setNotification(restNotifications));
 32 |         }
 33 |     };
 34 | 
 35 | 
 36 | 
 37 |     //===== Delete Notification From DB========//
 38 |     const notifyDeleteFromDB = async (notify_from) => {
 39 |         const isNotifyExistDB = notifications.some(notify => notify.from === notify_from);
 40 |         if (isNotifyExistDB) {
 41 |             try {
 42 |                 const dltNotify = await  fetch(`${API_BASE}/api/notification/delete/${notify_from}`, {
 43 |                     method: 'DELETE'
 44 |                 })
 45 |                 const res = await dltNotify.json();
 46 |                 if (res.success === false) {
 47 |                     console.log(res.error);
 48 |                 }
 49 |             } catch (error) {
 50 |                 console.log(error);
 51 |             }
 52 |         }
 53 |     }
 54 | 
 55 | 
 56 |     return (
 57 |         <>
 58 |             {
 59 |                 conversation.participantId && conversation.participantId === currentUser._id
 60 |                     ?
 61 |                     // When current user is in participent role 
 62 |                     <>
 63 |                         <div
 64 |                             onClick={() => (
 65 | 
 66 |                                 setTrackConversation(
 67 | 
 68 |                                     {
 69 |                                         ...trackConversation,
 70 |                                         conversationActive: conversation.chatCreator._id,
 71 |                                         sender: conversation.chatPartner._id,
 72 |                                         receiver: conversation.chatCreator._id,
 73 |                                         conversation,
 74 |                                         chatId: conversation._id
 75 | 
 76 |                                     }
 77 |                                 ),
 78 |                                 notifyDeleteFromDB(conversation.chatCreator._id),
 79 |                                 handleNotificationClick(conversation._id),
 80 |                                 activeChatId.value.chatId = conversation._id
 81 | 
 82 |                             )
 83 |                             }
 84 |                             className={`chat_user flex items-center justify-center sm:justify-start sm:flex-row sm:gap-4 hover:bg-brand-blue/90 active:bg-brand-blue  group w-full p-2 sm:p-3 gap-1 duration-300  cursor-pointer ${trackConversation.conversationActive === conversation.chatCreator._id ? "bg-brand-blue text-white" : "bg-gray-200 text-brand-blue"}`}
 85 |                         >
 86 |                             <div className='relative rounded-full'>
 87 |                                 <img
 88 |                                     className='h-8 w-8 sm:h-12 sm:w-12 rounded-full border-2 border-brand-blue duration-400 ease-in-out'
 89 |                                     src={conversation.chatCreator.avatar}
 90 |                                     alt="user image" />
 91 |                                 <div className='absolute h-3 w-3 bottom-0 right-0 rounded-full bg-green-600 border-[.1px] border-black'>
 92 |                                 </div>
 93 |                             </div>
 94 |                             <p className='hidden sm:block  font-semibold font-content text-sm truncate duration-400 ease-in-out group-hover:text-white'>{conversation.chatCreator.username}</p>
 95 |                             {isNotify && <p className=' hidden md:block font-heading px-2 py-[2px] rounded-md capitalize  text-xs text-white bg-red-600'>new!</p>}
 96 | 
 97 |                             {isNotify && <p className='text-red-600 md:hidden font-heading  rounded-md capitalize  text-lg '>!</p>}
 98 |                         </div>
 99 |                     </>
100 |                     :
101 | 
102 |                     // When current user is in creator role 
103 |                     <>
104 |                         <div
105 |                             onClick={() => (
106 |                                 setTrackConversation({
107 |                                     ...trackConversation,
108 |                                     conversationActive: conversation.chatPartner._id,
109 |                                     sender: conversation.chatCreator._id,
110 |                                     receiver: conversation.chatPartner._id,
111 |                                     conversation,
112 |                                     chatId: conversation._id
113 |                                 }),
114 |                                 // setSocketMessages([]),
115 |                                 notifyDeleteFromDB(conversation.chatPartner._id),
116 |                                 handleNotificationClick(conversation._id),
117 |                                 activeChatId.value.chatId = conversation._id
118 |                             )
119 |                             }
120 |                             className={`chat_user flex items-center justify-center sm:justify-start sm:flex-row sm:gap-4 hover:bg-brand-blue/90 active:bg-brand-blue group w-full p-2 sm:p-3 gap-1 duration-300  cursor-pointer 
121 |                         ${trackConversation.conversationActive === conversation.chatPartner._id ? "bg-brand-blue text-white" : "bg-gray-200 text-brand-blue"}
122 |                         `}
123 |                         >
124 |                             <div className='relative rounded-full'>
125 |                                 <img
126 |                                     className='h-8 w-8 sm:h-12 sm:w-12 rounded-full border-2 border-brand-blue duration-400 ease-in-out '
127 |                                     src={conversation.chatPartner.avatar}
128 |                                     alt="user image"
129 |                                 />
130 |                                 <div className='absolute h-3 w-3 bottom-0 right-0 rounded-full bg-green-600 border-[.1px] border-black'></div>
131 |                             </div>
132 | 
133 |                             <p className='hidden sm:block  font-semibold font-content text-sm truncate duration-400 ease-in-out group-hover:text-white '>{conversation.chatPartner.username}</p>
134 |                             {isNotify && <p className='bg-red-600 hidden md:block font-heading px-2 py-[2px] rounded-md capitalize  text-xs text-white'>new!</p>}
135 | 
136 |                             {isNotify && <p className='text-red-600 md:hidden font-heading  rounded-md capitalize  text-lg '>!</p>}
137 |                         </div>
138 | 
139 |                     </>
140 |             }
141 | 
142 |         </>
143 |     )
144 | }
145 | 
146 | export default Conversations


--------------------------------------------------------------------------------
/src/components/Header.jsx:
--------------------------------------------------------------------------------
  1 | import { React, useState } from 'react'
  2 | import { BsJustifyRight, BsMessenger, BsSearch } from 'react-icons/bs'
  3 | import { Link, useNavigate } from 'react-router-dom'
  4 | import MobileMenu from './mobileMenu'
  5 | import { useDispatch, useSelector } from 'react-redux'
  6 | import Profile from './ProfileOption'
  7 | import { setSearchTermState } from '../redux/search/searchSlice'
  8 | import { MdOutlineClose } from "react-icons/md";
  9 | import { FaHome } from "react-icons/fa";
 10 | 
 11 | 
 12 | 
 13 | 
 14 | const Header = () => {
 15 |     const [isActiveMoblie, setisActiveMoblie] = useState(false)
 16 |     const { currentUser } = useSelector((state) => state.user)
 17 |     const { notificationsDB } = useSelector(state => state.notification)
 18 |     const [searchValue, setSearchValue] = useState("")
 19 |     const navigate = useNavigate()
 20 |     const dispatch = useDispatch()
 21 | 
 22 | 
 23 |     const handleSubmit = (e) => {
 24 |         e.preventDefault()
 25 |         navigate(`/search`)
 26 |         setSearchValue("")
 27 |     }
 28 | 
 29 | 
 30 |     return (
 31 |         <>
 32 |             <div className="navbar pl-0 pr-0 pt-3 pb-3 bg-slate-300 shadow-md">
 33 | 
 34 |                 <div className="px-5  max-w-screen-2xl w-full !mx-auto grid grid-cols-12 gap-1">
 35 |                     {/* Logo container  */}
 36 |                     <div className="col-span-3 sm:col-span-4">
 37 | 
 38 |                         <h1 className="font-blach sm:text-xl text-sm text-left hover:bg-transparent uppercase text-brand-blue tracking-tighter w-full font-heading font-bold flex items-center justify-start">
 39 |                             <Link to={'/home'} className='flex items-center justify-start'>
 40 |                                 <img className='w-8 h-8' src="https://img.icons8.com/sf-black-filled/64/313a67/home.png" alt="logo" />
 41 |                                 <span className='hidden sm:block'>Property Sale</span>
 42 |                             </Link>
 43 |                         </h1>
 44 | 
 45 |                     </div>
 46 | 
 47 |                     {/* search Form  */}
 48 |                     <div className="col-span-6 sm:col-span-3  md:col-span-4">
 49 |                         <form onSubmit={handleSubmit}>
 50 |                             <div className="form-control w-full max-w-full   sm:max-w-sm  flex flex-row mx-auto items-center justify-center relative">
 51 |                                 <input
 52 |                                     type="text"
 53 |                                     placeholder="Explore by area, amenities, or keyword..."
 54 |                                     className="search placeholder:text-gray-700"
 55 |                                     onChange={(e) => {
 56 |                                         dispatch(setSearchTermState(e.target.value)),
 57 |                                             setSearchValue(e.target.value)
 58 |                                     }}
 59 |                                     value={searchValue}
 60 |                                 />
 61 |                                 <button type='submit' className='search_btn bg-brand-blue'>
 62 |                                     <i className='text-center text-white font-bold'><BsSearch /></i>
 63 |                                 </button>
 64 |                             </div>
 65 |                         </form>
 66 |                     </div>
 67 | 
 68 |                     {/*========= when user login ======== */}
 69 |                     <div className="col-span-3 sm:col-span-5  md:col-span-4 flex items-center justify-end">
 70 |                         <ul className="hidden sm:ml-5 sm:flex items-center justify-end  pr-4 font-semibold text-brand-blue font-content ">
 71 |                             <li className='mr-9 capitalize text-xl text-brand-blue'>
 72 |                                 <Link to='/home'>
 73 |                                     <FaHome />
 74 |                                 </Link>
 75 |                             </li>
 76 | 
 77 |                             <li className='mr-9 capitalize text-lg text-brand-blue  '>
 78 |                                 <Link to={`${currentUser ? "/message" : "/login"}`}>
 79 |                                     <span className='relative'>
 80 |                                         <BsMessenger className='z-10' />
 81 |                                         {
 82 |                                             notificationsDB.length === 0
 83 |                                                 ?
 84 |                                                 <p className={`text-xs px-[2px] font-heading font-medium bg-lime-600 text-white absolute  top-[-13px] right-[-14px]  flex items-center justify-center rounded-sm`}>new</p>
 85 |                                                 :
 86 |                                                 <p className={`text-[11px] font-content font-medium bg-[#c00] text-white absolute  top-[-10px] h-4 ${notificationsDB.length < 9 ? "w-3 right-[-8px]" : "w-4 right-[-10px]"} flex items-center justify-center rounded-sm`}>{notificationsDB.length}</p>
 87 |                                         }
 88 |                                     </span>
 89 |                                    
 90 |                                 </Link>
 91 |                             </li>
 92 |                             {
 93 |                                 currentUser ?
 94 |                                     <Profile user={currentUser} />
 95 |                                     :
 96 |                                     <li className='mr-6'>
 97 |                                         <Link to='/login' className=' text-white px-5 font-bold font-headi py-2 rounded uppercase bg-brand-blue text-sm hover:bg-white hover:text-brand-blue duration-300 hover:shadow-sm'>
 98 |                                             Login
 99 |                                         </Link>
100 |                                     </li>
101 |                             }
102 | 
103 |                         </ul>
104 | 
105 |                         <div className="nav_mobile flex items-center justify-center sm:hidden gap-1">
106 |                             {/* User Profile Image  */}
107 |                             {/* {currentUser && <Profile user={currentUser} />} */}
108 | 
109 |                             <Link to={`${currentUser ? "/message" : "/login"}`} className='mr-1 text-lg  text-brand-blue'>
110 |                                 <span className='relative'>
111 |                                     <BsMessenger className='z-10' />
112 |                                     {
113 |                                         notificationsDB.length === 0
114 |                                             ?
115 |                                             <p className={`text-xs px-[2px] font-heading font-normal bg-lime-600 text-white absolute  top-[-13px] right-[-9px]  flex items-center justify-center rounded-sm`}>new</p>
116 |                                             :
117 |                                             <p className={`text-[11px] font-content font-medium bg-[#c00] text-white absolute  top-[-10px] h-4 ${notificationsDB.length < 9 ? "w-3 right-[-8px]" : "w-4 right-[-10px]"} flex items-center justify-center rounded-sm`}>{notificationsDB.length}</p>
118 |                                     }
119 |                                 </span>
120 |                             </Link>
121 | 
122 |                             <button
123 |                                 className="btn btn-ghost p-1 hover:bg-transparent text-lg"
124 |                                 onClick={() => setisActiveMoblie(!isActiveMoblie)}
125 |                             >
126 |                                 {
127 |                                     isActiveMoblie ? <MdOutlineClose className='text-red-600 font-bold' /> : <BsJustifyRight className='text-brand-blue' />
128 |                                 }
129 | 
130 |                             </button>
131 |                         </div>
132 | 
133 |                     </div>
134 |                 </div>
135 |             </div>
136 |             {
137 |                 isActiveMoblie && <MobileMenu menuStatus={{ isActiveMoblie, setisActiveMoblie }} />
138 |             }
139 |         </>
140 | 
141 |     )
142 | }
143 | 
144 | export default Header


--------------------------------------------------------------------------------
/src/pages/Message.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react'
  2 | import Chat from '../components/Chat';
  3 | import { useDispatch, useSelector } from 'react-redux';
  4 | import Conversations, { activeChatId } from '../components/Conversations';
  5 | import { ToastContainer, toast } from 'react-toastify';
  6 | import { useNavigate } from 'react-router-dom';
  7 | import { signoutSuccess } from '../redux/user/userSlice';
  8 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
  9 | 
 10 | 
 11 | const Message = () => {
 12 |     const { currentUser } = useSelector(state => state.user)
 13 |     const [conversations, setConversation] = useState([])
 14 |     const [conversationLoading, setConversationLoading] = useState(true)
 15 |     const [error, setError] = useState(false)
 16 |     const [trackConversation, setTrackConversation] = useState({
 17 |         sender: "",
 18 |         receiver: "",
 19 |         conversationActive: null,
 20 |     })
 21 |     const navigate = useNavigate()
 22 |     const dispatch = useDispatch()
 23 | 
 24 | 
 25 | 
 26 | 
 27 |     //============ Making null active chat ID For notification ============//
 28 |     useEffect(() => {
 29 |         const currentPath = window.location.pathname;
 30 |         if (currentPath === "/message") {
 31 |             activeChatId.value.chatId = ""
 32 |         }
 33 |     }, [])
 34 | 
 35 | 
 36 | 
 37 |     // Load Current user Conversations
 38 |     useEffect(() => {
 39 |         (async () => {
 40 |             try {
 41 |  
 42 |                 setConversationLoading(true)
 43 |                 const res = await  fetch(`${API_BASE}/api/conversation/${currentUser._id}`)
 44 |                 const getConversations = await res.json();
 45 |                 if (getConversations.success === false) {
 46 |                     setConversationLoading(false)
 47 |                     toast.error(getConversations.message, {
 48 |                         autoClose: 5000
 49 |                     })
 50 |                     setError(true)
 51 |                     dispatch(signoutSuccess())
 52 |                 }
 53 |                 else {
 54 |                     setConversationLoading(false)
 55 |                     setConversation(getConversations)
 56 |                 }
 57 |             } catch (error) {
 58 |                 setConversationLoading(false)
 59 |                 toast.error(getConversations.message, {
 60 |                     autoClose: 5000
 61 |                 })
 62 |                 setError(true)
 63 |                 console.log(error);
 64 |             }
 65 |         })()
 66 |     }, [])
 67 | 
 68 | 
 69 | 
 70 |     return (
 71 |         <>
 72 |             <ToastContainer />
 73 |             <section className="main_container">
 74 |                 {
 75 |                     error ?
 76 |                         <div>
 77 |                             <p className='bg-white text-center text-sm sm:text-xl mt-20 font-heading font-bold flex flex-col items-center justify-center max-w-3xl mx-auto py-10 text-black px-5 rounded shadow-md'>
 78 |                                 <span className='text-red-600'>Your session has expired. Please log in again to continue. </span>
 79 |                                 <button
 80 |                                     className="group relative inline-flex items-center overflow-hidden rounded bg-brand-blue px-6 py-2 mt-5 text-white "
 81 |                                     onClick={() => navigate('/login')}
 82 |                                 >
 83 |                                     <span className="absolute -end-full transition-all group-hover:end-4">
 84 |                                         <svg
 85 |                                             className="h-5 w-5 rtl:rotate-180"
 86 |                                             xmlns="http://www.w3.org/2000/svg"
 87 |                                             fill="none"
 88 |                                             viewBox="0 0 24 24"
 89 |                                             stroke="currentColor"
 90 |                                         >
 91 |                                             <path
 92 |                                                 strokeLinecap="round"
 93 |                                                 strokeLinejoin="round"
 94 |                                                 strokeWidth="2"
 95 |                                                 d="M17 8l4 4m0 0l-4 4m4-4H3"
 96 |                                             />
 97 |                                         </svg>
 98 |                                     </span>
 99 | 
100 |                                     <span className="text-sm font-medium transition-all  group-hover:me-4">
101 |                                         Login
102 |                                     </span>
103 |                                 </button>
104 |                             </p>
105 | 
106 |                         </div>
107 |                         :
108 |                         <div>
109 |                             {
110 |                                 conversations.length === 0 ?
111 |                                     <div>
112 | 
113 |                                         <p className='bg-white text-center text-sm sm:text-2xl mt-20 font-heading font-bold flex flex-col items-center justify-center max-w-3xl mx-auto py-10 text-black px-5 rounded shadow-md'>
114 |                                             <span> Hey welcome! &#x1F604;</span>
115 |                                             <span> This is a blank canvas waiting for your first conversation.</span>
116 |                                         </p>
117 | 
118 |                                     </div>
119 |                                     :
120 |                                     <div className="chats_container custom_scrollbar grid grid-cols-12 ">
121 | 
122 |                                         <div className="chat_people_container bg-white col-span-3  py-4 sm:py-5 flex sm:items-start items-center justify-start flex-col gap-2 overflow-y-scroll ">
123 | 
124 |                                             {
125 |                                                 conversationLoading
126 |                                                     ?
127 |                                                     <div className='w-full'>
128 |                                                         <p className='text-center mt-10 font-bold font-heading text-sm text-black'>Conversation Loading...</p>
129 |                                                     </div>
130 |                                                     :
131 |                                                     <>
132 |                                                         <h3 className='font-heading  px-2 mb-3 sm:px-3 text-sm sm:text-3xl text-black'>Chats...</h3>
133 |                                                         {
134 |                                                             conversations.length !== 0 &&
135 |                                                             conversations.map((conversation) =>
136 |                                                                 <Conversations
137 |                                                                     conversationInfo={
138 |                                                                         {
139 |                                                                             conversation,
140 |                                                                             trackConversation,
141 |                                                                             setTrackConversation,
142 |                                                                         }
143 |                                                                     }
144 |                                                                     key={conversation._id}
145 |                                                                 />
146 |                                                             )
147 | 
148 |                                                         }
149 |                                                     </>
150 |                                             }
151 |                                         </div>
152 | 
153 |                                         {
154 |                                             trackConversation.conversationActive
155 |                                                 ?
156 |                                                 <div className="conversation_container col-span-9 ">
157 |                                                     <Chat conversationInfo={{
158 |                                                         trackConversation,
159 |                                                         setTrackConversation,
160 |                                                         conversations,
161 |                                                         setConversation,
162 |                                                     }} />
163 |                                                 </div>
164 |                                                 :
165 |                                                 <div className="conversation_container col-span-9 ">
166 | 
167 |                                                     <p className='mt-20 text-sm sm:text-2xl text-center font-heading '>No Conversation is Selected 	&#128580;</p>
168 |                                                 </div>
169 |                                         }
170 |                                     </div>
171 |                             }
172 |                         </div>
173 |                 }
174 |             </section>
175 | 
176 | 
177 |         </>
178 |     )
179 | }
180 | 
181 | export default Message


--------------------------------------------------------------------------------
/src/components/Chat.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef, useState } from "react";
  2 | import { BsFillSendFill, BsImage } from "react-icons/bs";
  3 | import { useSelector } from "react-redux";
  4 | import { socket } from "./SocketConnection";
  5 | import { MdDelete } from "react-icons/md";
  6 | 
  7 | import { ToastContainer, toast } from "react-toastify";
  8 | import "react-toastify/dist/ReactToastify.css";
  9 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
 10 | 
 11 | const Chat = ({ conversationInfo }) => {
 12 |   const { currentUser } = useSelector((state) => state.user);
 13 |   const [messageText, setMessageText] = useState([]);
 14 |   const [typedMessage, setTypedMessage] = useState("");
 15 |   const [IsSendingError, setSendingError] = useState(false);
 16 |   const scrollRef = useRef();
 17 |   const [socketMessages, setSocketMessages] = useState([]);
 18 |   const [messageLoading, setMessageLoading] = useState(false);
 19 | 
 20 |   const {
 21 |     trackConversation,
 22 |     setTrackConversation,
 23 |     conversations,
 24 |     setConversation,
 25 |   } = conversationInfo;
 26 |   const { chatCreator, chatPartner, _id } = trackConversation.conversation;
 27 | 
 28 |   //----- Load User Messages
 29 |   useEffect(() => {
 30 |     (async () => {
 31 |       try {
 32 |         setMessageLoading(true);
 33 |         const res = await fetch(
 34 |           `${API_BASE}/api/message?sender=${trackConversation.sender}&receiver=${trackConversation.receiver}`
 35 |         );
 36 |         const getMessages = await res.json();
 37 | 
 38 |         if (getMessages.success === false) {
 39 |           setMessageLoading(false);
 40 |           console.log(getMessages.message);
 41 |         } else {
 42 |           setMessageLoading(false);
 43 |           setSocketMessages([]);
 44 |           setMessageText(getMessages);
 45 |         }
 46 |       } catch (error) {
 47 |         setMessageLoading(false);
 48 |         console.log(error);
 49 |       }
 50 |     })();
 51 |   }, [trackConversation]);
 52 | 
 53 |   //====== Join Sockets Room Here =======//
 54 |   useEffect(() => {
 55 |     socket.emit("join_room", trackConversation.chatId);
 56 |   }, [trackConversation]);
 57 | 
 58 |   //----- Get Message from socket
 59 |   useEffect(() => {
 60 |     socket.on("receive_message", (socketMsg) => {
 61 |       setSocketMessages([
 62 |         ...socketMessages,
 63 |         {
 64 |           message: socketMsg.message,
 65 |           type: "received",
 66 |           chatId: socketMsg.chatId,
 67 |         },
 68 |       ]);
 69 |     });
 70 |   });
 71 | 
 72 |   //====== Send Message To Socket ========//
 73 |   const sendMessageTOSocket = () => {
 74 |     socket.emit("send_message", {
 75 |       chatId: trackConversation.chatId,
 76 |       message: typedMessage,
 77 |       from: currentUser._id,
 78 |       to: trackConversation.conversationActive,
 79 |     });
 80 | 
 81 |     setSocketMessages([
 82 |       ...socketMessages,
 83 |       {
 84 |         message: typedMessage,
 85 |         type: "send",
 86 |         chatId: trackConversation.chatId,
 87 |       },
 88 |     ]);
 89 | 
 90 |     setTypedMessage("");
 91 |   };
 92 | 
 93 |   // Handle Message Sending //
 94 |   const handleSendMsg = async (e) => {
 95 |     e.preventDefault();
 96 |     sendMessageTOSocket();
 97 |     try {
 98 |       const sendMsgToDB = await  fetch(`${API_BASE}/api/message/create`, {
 99 |         method: "POST",
100 |         headers: { "Content-Type": "application/json" },
101 |         body: JSON.stringify({
102 |           sender: currentUser._id,
103 |           receiver: trackConversation.conversationActive,
104 |           message: typedMessage,
105 |         }),
106 |       });
107 |       const response = await sendMsgToDB.json();
108 |       //===checking Message request success or not ===//
109 |       if (response.success === false) {
110 |         setSendingError(true);
111 |       } else {
112 |         setSendingError(false);
113 |       }
114 |     } catch (error) {
115 |       setSendingError(true);
116 |       console.log(error);
117 |     }
118 |   };
119 | 
120 |   useEffect(() => {
121 |     scrollRef.current?.scrollIntoView({ behavior: "smooth" });
122 |   }, [socketMessages, messageText]);
123 | 
124 |   const handleConversationDelete = async () => {
125 |     try {
126 |       const deleteChat = await fetch(
127 |         `${API_BASE}/api/conversation/delete/${_id}`,
128 |         {
129 |           method: "DELETE",
130 |         }
131 |       );
132 |       if (deleteChat.ok) {
133 |         const restConversation = conversations.filter(
134 |           (conversation) => conversation._id !== _id
135 |         );
136 |         setConversation(restConversation);
137 |         setTrackConversation({
138 |           ...trackConversation,
139 |           conversationActive: "",
140 |         });
141 |       } else {
142 |         const errorRes = await deleteChat.json();
143 |         toast.error(errorRes.message, {
144 |           autoClose: 2000,
145 |         });
146 |       }
147 |     } catch (error) {
148 |       toast.error(error.message, {
149 |         autoClose: 2000,
150 |       });
151 |     }
152 |   };
153 | 
154 |   return (
155 |     <>
156 |       {messageLoading ? (
157 |         <div className="w-full">
158 |           <p className="text-center mt-20 font-bold font-heading text-sm text-black">
159 |             Messages Loading...
160 |           </p>
161 |         </div>
162 |       ) : (
163 |         <div className="conversation_container bg-white  ">
164 |           <div className="chat_person_container  grid grid-cols-2 bg-white shadow-sm items-center px-5 py-3 border-b border-">
165 |             <div className="chat_user flex items-center justify-center sm:justify-start sm:flex-row sm:gap-4 gap-1 duration-300    ">
166 |               <img
167 |                 className="h-8 w-8 sm:h-10 sm:w-10 rounded-full border border-brand-blue"
168 |                 src={
169 |                   chatPartner._id === currentUser._id
170 |                     ? chatCreator.avatar
171 |                     : chatPartner.avatar
172 |                 }
173 |                 alt="user image"
174 |               />
175 |               <p className=" sm:block text-black font-semibold font-heading text-sm truncate">
176 |                 {chatPartner._id === currentUser._id
177 |                   ? chatCreator.username
178 |                   : chatPartner.username}
179 |               </p>
180 |             </div>
181 | 
182 |             <div className="show_user_listing flex items-center justify-end">
183 |               <button
184 |                 onClick={handleConversationDelete}
185 |                 className="font-heading  text-sm py-2 px-5 text-red-700"
186 |               >
187 |                 <span className="flex items-center">
188 |                   <MdDelete className="text-red-700" />
189 |                   Delete
190 |                 </span>
191 |               </button>
192 |             </div>
193 |           </div>
194 | 
195 |           <div className="textbar_message">
196 |             <div className="message_container grid grid-rows-1 items-end overflow-y-scroll px-5 py-0 ">
197 |               {messageText.map((msg, index) =>
198 |                 msg.sender === currentUser._id ? (
199 |                   <div
200 |                     key={index}
201 |                     className={`flex ${
202 |                       currentUser._id === msg.sender
203 |                         ? "items-end"
204 |                         : "items-start"
205 |                     } w-full flex-col justify-end`}
206 |                   >
207 |                     <div className="User_chat  mt-2 ">
208 |                       <p
209 |                         ref={scrollRef}
210 |                         className="text-lg font-normal bg-blue-900/80 px-2 text-white py-1 rounded-md"
211 |                       >
212 |                         {msg.message}
213 |                       </p>
214 |                     </div>
215 |                   </div>
216 |                 ) : (
217 |                   <div
218 |                     key={index}
219 |                     className={`flex ${
220 |                       currentUser._id === msg.sender
221 |                         ? "items-end"
222 |                         : "items-start"
223 |                     } w-full flex-col justify-end`}
224 |                   >
225 |                     <div className="User_chat flex items-center gap-2 mt-2 ">
226 |                       <img
227 |                         className="h-8 w-8 rounded-full"
228 |                         src={
229 |                           chatPartner._id === currentUser._id
230 |                             ? chatCreator.avatar
231 |                             : chatPartner.avatar
232 |                         }
233 |                         alt="chat partner image"
234 |                       />
235 |                       <p
236 |                         ref={scrollRef}
237 |                         className="text-lg font-normal bg-blue-500 px-2 text-white py-1 rounded-md"
238 |                       >
239 |                         {msg.message}
240 |                       </p>
241 |                     </div>
242 |                   </div>
243 |                 )
244 |               )}
245 | 
246 |               {socketMessages.length !== 0 &&
247 |                 socketMessages.map(
248 |                   (msg, index) =>
249 |                     msg.chatId === trackConversation.chatId && (
250 |                       <div key={index}>
251 |                         {msg.type === "send" ? (
252 |                           <div
253 |                             key={index}
254 |                             className={`flex items-end w-full flex-col justify-end`}
255 |                           >
256 |                             <div className="User_chat  mt-2 ">
257 |                               <p
258 |                                 ref={scrollRef}
259 |                                 className="text-lg font-normal bg-blue-900/80 px-2 text-white py-1 rounded-md"
260 |                               >
261 |                                 {msg.message}
262 |                               </p>
263 |                             </div>
264 |                           </div>
265 |                         ) : (
266 |                           <div
267 |                             key={index}
268 |                             className={`flex items-start w-full flex-col justify-end`}
269 |                           >
270 |                             <div className="User_chat flex items-center gap-2 mt-2 ">
271 |                               <img
272 |                                 className="h-8 w-8 rounded-full"
273 |                                 src={
274 |                                   chatPartner._id === currentUser._id
275 |                                     ? chatCreator.avatar
276 |                                     : chatPartner.avatar
277 |                                 }
278 |                                 alt="chat partner image"
279 |                               />
280 |                               <p className="text-lg font-normal bg-blue-500 px-2 text-white py-1 rounded-md">
281 |                                 {msg.message}
282 |                               </p>
283 |                             </div>
284 |                           </div>
285 |                         )}
286 |                       </div>
287 |                     )
288 |                 )}
289 |               {IsSendingError && (
290 |                 <p className="text-red-700 font-content font-semibold">
291 |                   Message sending failed!
292 |                 </p>
293 |               )}
294 |             </div>
295 | 
296 |             <form onSubmit={handleSendMsg}>
297 |               <div className="textbar_container  w-full px-5 py-3 flex items-center gap-2">
298 |                 <div className="attachment_container">
299 |                   <BsImage />
300 |                 </div>
301 |                 <div className="input_container w-full">
302 |                   <input
303 |                     onChange={(e) => setTypedMessage(e.target.value)}
304 |                     value={typedMessage}
305 |                     type="text"
306 |                     placeholder="Aa"
307 |                     className="w-full px-4 py-1 rounded-full border  placeholder:font-content placeholder:text-sm caret-h-2  bg-[#F0F2F5] caret-brand-blue border-brand-blue focus:outline-none"
308 |                   />
309 |                 </div>
310 |                 <div className="send_btn ">
311 |                   <button
312 |                     type="submit"
313 |                     className="p-2 rounded-full hover:bg-gray-200 duration-300"
314 |                   >
315 |                     <BsFillSendFill className="text-brand-blue" />
316 |                   </button>
317 |                 </div>
318 |               </div>
319 |             </form>
320 |           </div>
321 |           <ToastContainer />
322 |         </div>
323 |       )}
324 |     </>
325 |   );
326 | };
327 | 
328 | export default Chat;
329 | 


--------------------------------------------------------------------------------
/src/components/SkletonLoading.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | const SkletonLoading = () => {
  4 |     return (
  5 |         <>
  6 |             <div className='grid sm:hidden'>
  7 |                 <div className="mx-auto bg-brand-blue/25  shadow-lg w-full max-w-xs rounded-sm">
  8 |                     <div className="h-48 p-3 overflow-hidden bg-gray-200 animate-pulse">
  9 |                     </div>
 10 |                     <div className="p-3 h-">
 11 |                         <div className="grid grid-cols-3 gap-4 mt-2">
 12 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
 13 |                             </div>
 14 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
 15 |                             </div>
 16 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
 17 |                             </div>
 18 |                             <div className="h-8 col-span-2 bg-gray-200 rounded animate-pulse">
 19 |                             </div>
 20 |                             <div className="h-8 bg-gray-200 rounded  animate-pulse">
 21 |                             </div>
 22 |                             <div className="...">
 23 |                             </div>
 24 |                             <div className="col-span-2 ...">
 25 |                             </div>
 26 |                         </div>
 27 |                     </div>
 28 |                 </div>
 29 |             </div>
 30 |             <div className='hidden lg:hidden sm:grid grid-cols-2 gap-5'>
 31 |                 <div className="mx-auto bg-brand-blue/25  shadow-lg w-full max-w-xs rounded-sm">
 32 |                     <div className="h-48 p-3 overflow-hidden bg-gray-200 animate-pulse">
 33 |                     </div>
 34 |                     <div className="p-3 h-">
 35 |                         <div className="grid grid-cols-3 gap-4 mt-2">
 36 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
 37 |                             </div>
 38 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
 39 |                             </div>
 40 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
 41 |                             </div>
 42 |                             <div className="h-8 col-span-2 bg-gray-200 rounded animate-pulse">
 43 |                             </div>
 44 |                             <div className="h-8 bg-gray-200 rounded  animate-pulse">
 45 |                             </div>
 46 |                             <div className="...">
 47 |                             </div>
 48 |                             <div className="col-span-2 ...">
 49 |                             </div>
 50 |                         </div>
 51 |                     </div>
 52 |                 </div>
 53 |                 <div className="mx-auto bg-brand-blue/25  shadow-lg w-full max-w-xs rounded-sm">
 54 |                     <div className="h-48 p-3 overflow-hidden bg-gray-200 animate-pulse">
 55 |                     </div>
 56 |                     <div className="p-3 h-">
 57 |                         <div className="grid grid-cols-3 gap-4 mt-2">
 58 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
 59 |                             </div>
 60 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
 61 |                             </div>
 62 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
 63 |                             </div>
 64 |                             <div className="h-8 col-span-2 bg-gray-200 rounded animate-pulse">
 65 |                             </div>
 66 |                             <div className="h-8 bg-gray-200 rounded  animate-pulse">
 67 |                             </div>
 68 |                             <div className="...">
 69 |                             </div>
 70 |                             <div className="col-span-2 ...">
 71 |                             </div>
 72 |                         </div>
 73 |                     </div>
 74 |                 </div>
 75 |             </div>
 76 |             <div className='hidden xl:hidden  lg:grid grid-cols-3 gap-5'>
 77 |                 <div className="mx-auto bg-brand-blue/25  shadow-lg w-full max-w-xs rounded-sm">
 78 |                     <div className="h-48 p-3 overflow-hidden bg-gray-200 animate-pulse">
 79 |                     </div>
 80 |                     <div className="p-3 h-">
 81 |                         <div className="grid grid-cols-3 gap-4 mt-2">
 82 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
 83 |                             </div>
 84 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
 85 |                             </div>
 86 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
 87 |                             </div>
 88 |                             <div className="h-8 col-span-2 bg-gray-200 rounded animate-pulse">
 89 |                             </div>
 90 |                             <div className="h-8 bg-gray-200 rounded  animate-pulse">
 91 |                             </div>
 92 |                             <div className="...">
 93 |                             </div>
 94 |                             <div className="col-span-2 ...">
 95 |                             </div>
 96 |                         </div>
 97 |                     </div>
 98 |                 </div>
 99 |                 <div className="mx-auto bg-brand-blue/25  shadow-lg w-full max-w-xs rounded-sm">
100 |                     <div className="h-48 p-3 overflow-hidden bg-gray-200 animate-pulse">
101 |                     </div>
102 |                     <div className="p-3 h-">
103 |                         <div className="grid grid-cols-3 gap-4 mt-2">
104 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
105 |                             </div>
106 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
107 |                             </div>
108 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
109 |                             </div>
110 |                             <div className="h-8 col-span-2 bg-gray-200 rounded animate-pulse">
111 |                             </div>
112 |                             <div className="h-8 bg-gray-200 rounded  animate-pulse">
113 |                             </div>
114 |                             <div className="...">
115 |                             </div>
116 |                             <div className="col-span-2 ...">
117 |                             </div>
118 |                         </div>
119 |                     </div>
120 |                 </div>
121 |                 <div className="mx-auto bg-brand-blue/25  shadow-lg w-full max-w-xs rounded-sm">
122 |                     <div className="h-48 p-3 overflow-hidden bg-gray-200 animate-pulse">
123 |                     </div>
124 |                     <div className="p-3 h-">
125 |                         <div className="grid grid-cols-3 gap-4 mt-2">
126 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
127 |                             </div>
128 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
129 |                             </div>
130 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
131 |                             </div>
132 |                             <div className="h-8 col-span-2 bg-gray-200 rounded animate-pulse">
133 |                             </div>
134 |                             <div className="h-8 bg-gray-200 rounded  animate-pulse">
135 |                             </div>
136 |                             <div className="...">
137 |                             </div>
138 |                             <div className="col-span-2 ...">
139 |                             </div>
140 |                         </div>
141 |                     </div>
142 |                 </div>
143 |             </div>
144 |             <div className='hidden xl:grid grid-cols-4 gap-5'>
145 |                 <div className="mx-auto bg-brand-blue/25  shadow-lg w-full max-w-xs rounded-sm">
146 |                     <div className="h-48 p-3 overflow-hidden bg-gray-200 animate-pulse">
147 |                     </div>
148 |                     <div className="p-3 h-">
149 |                         <div className="grid grid-cols-3 gap-4 mt-2">
150 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
151 |                             </div>
152 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
153 |                             </div>
154 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
155 |                             </div>
156 |                             <div className="h-8 col-span-2 bg-gray-200 rounded animate-pulse">
157 |                             </div>
158 |                             <div className="h-8 bg-gray-200 rounded  animate-pulse">
159 |                             </div>
160 |                             <div className="...">
161 |                             </div>
162 |                             <div className="col-span-2 ...">
163 |                             </div>
164 |                         </div>
165 |                     </div>
166 |                 </div>
167 |                 <div className="mx-auto bg-brand-blue/25  shadow-lg w-full max-w-xs rounded-sm">
168 |                     <div className="h-48 p-3 overflow-hidden bg-gray-200 animate-pulse">
169 |                     </div>
170 |                     <div className="p-3 h-">
171 |                         <div className="grid grid-cols-3 gap-4 mt-2">
172 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
173 |                             </div>
174 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
175 |                             </div>
176 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
177 |                             </div>
178 |                             <div className="h-8 col-span-2 bg-gray-200 rounded animate-pulse">
179 |                             </div>
180 |                             <div className="h-8 bg-gray-200 rounded  animate-pulse">
181 |                             </div>
182 |                             <div className="...">
183 |                             </div>
184 |                             <div className="col-span-2 ...">
185 |                             </div>
186 |                         </div>
187 |                     </div>
188 |                 </div>
189 |                 <div className="mx-auto bg-brand-blue/25  shadow-lg w-full max-w-xs rounded-sm">
190 |                     <div className="h-48 p-3 overflow-hidden bg-gray-200 animate-pulse">
191 |                     </div>
192 |                     <div className="p-3 h-">
193 |                         <div className="grid grid-cols-3 gap-4 mt-2">
194 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
195 |                             </div>
196 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
197 |                             </div>
198 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
199 |                             </div>
200 |                             <div className="h-8 col-span-2 bg-gray-200 rounded animate-pulse">
201 |                             </div>
202 |                             <div className="h-8 bg-gray-200 rounded  animate-pulse">
203 |                             </div>
204 |                             <div className="...">
205 |                             </div>
206 |                             <div className="col-span-2 ...">
207 |                             </div>
208 |                         </div>
209 |                     </div>
210 |                 </div>
211 |                 <div className="mx-auto bg-brand-blue/25  shadow-lg w-full max-w-xs rounded-sm">
212 |                     <div className="h-48 p-3 overflow-hidden bg-gray-200 animate-pulse">
213 |                     </div>
214 |                     <div className="p-3 h-">
215 |                         <div className="grid grid-cols-3 gap-4 mt-2">
216 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
217 |                             </div>
218 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
219 |                             </div>
220 |                             <div className="h-8 bg-gray-200 rounded animate-pulse">
221 |                             </div>
222 |                             <div className="h-8 col-span-2 bg-gray-200 rounded animate-pulse">
223 |                             </div>
224 |                             <div className="h-8 bg-gray-200 rounded  animate-pulse">
225 |                             </div>
226 |                             <div className="...">
227 |                             </div>
228 |                             <div className="col-span-2 ...">
229 |                             </div>
230 |                         </div>
231 |                     </div>
232 |                 </div>
233 |             </div>
234 |         </>
235 |     )
236 | }
237 | 
238 | export default SkletonLoading


--------------------------------------------------------------------------------
/src/pages/Profile.jsx:
--------------------------------------------------------------------------------
  1 | import { React, useEffect, useRef, useState } from "react";
  2 | import { useDispatch, useSelector } from "react-redux";
  3 | import { AiFillEdit } from "react-icons/ai";
  4 | import { BsFillPlusSquareFill } from "react-icons/bs";
  5 | import {
  6 |   getDownloadURL,
  7 |   getStorage,
  8 |   ref,
  9 |   uploadBytesResumable,
 10 | } from "firebase/storage";
 11 | import { firebaseApp } from "../firebase.js";
 12 | import {
 13 |   loddingStart,
 14 |   signoutFailed,
 15 |   signoutSuccess,
 16 |   userDeleteFail,
 17 |   userDeleteSuccess,
 18 |   userUpdateFailed,
 19 |   userUpdateSuccess,
 20 | } from "../redux/user/userSlice.js";
 21 | import { ToastContainer, toast } from "react-toastify";
 22 | import "react-toastify/dist/ReactToastify.css";
 23 | import { useNavigate } from "react-router-dom";
 24 | import PostCard from "../components/PostCard.jsx";
 25 | import Loading from "../components/Loading.jsx";
 26 | import { clearSavedListing } from "../redux/saveListing/saveListingSlice.js";
 27 | import Footer from "../components/Footer.jsx";
 28 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
 29 | 
 30 | const Profile = () => {
 31 |   const { currentUser } = useSelector((state) => state.user);
 32 |   const [file, setFile] = useState(undefined);
 33 |   const [uploadingPerc, setUploadingPerc] = useState(0);
 34 |   const [fileUploadError, setFileUploadError] = useState(false);
 35 |   const [formData, setFormData] = useState({});
 36 |   const [userPosts, setUserPost] = useState({
 37 |     isPostExist: false,
 38 |     posts: [],
 39 |   });
 40 | 
 41 |   const [userPostLoading, setUserPostLoading] = useState(false);
 42 | 
 43 |   const fileRef = useRef(null);
 44 |   const { loading } = useSelector((state) => state.user);
 45 |   const dispatch = useDispatch();
 46 |   const navigate = useNavigate();
 47 | 
 48 |   const handleFileUpload = (file) => {
 49 |     if (file) {
 50 |       const fireBaseStorage = getStorage(firebaseApp);
 51 |       const fileName = new Date().getTime() + file.name;
 52 |       const storageRef = ref(fireBaseStorage, fileName);
 53 |       const uploadTask = uploadBytesResumable(storageRef, file);
 54 | 
 55 |       uploadTask.on(
 56 |         "state_changed",
 57 |         (snapshot) => {
 58 |           const progress =
 59 |             (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
 60 |           setUploadingPerc(Math.round(progress));
 61 |         },
 62 |         (error) => {
 63 |           setFileUploadError(true);
 64 |         },
 65 |         () => {
 66 |           getDownloadURL(uploadTask.snapshot.ref).then((downloadUrl) => {
 67 |             setFormData({ ...formData, avatar: downloadUrl });
 68 |           });
 69 |         }
 70 |       );
 71 |     }
 72 |   };
 73 | 
 74 |   useEffect(() => {
 75 |     handleFileUpload(file);
 76 |   }, [file]);
 77 | 
 78 |   const handleChange = (e) => {
 79 |     setFormData({ ...formData, [e.target.name]: e.target.value });
 80 |   };
 81 | 
 82 |   const handleSubmit = async (e) => {
 83 |     e.preventDefault();
 84 |     // setLoading(true)
 85 |     try {
 86 |       dispatch(loddingStart());
 87 |       const res = await  fetch(
 88 |         `${API_BASE}/api/users/update/${currentUser._id}`,
 89 |         {
 90 |           method: "POST",
 91 |           headers: { "Content-Type": "application/json" },
 92 |           body: JSON.stringify(formData),
 93 |         }
 94 |       );
 95 |       const userData = await res.json();
 96 | 
 97 |       //===checking reqest success or not ===//
 98 |       if (userData.success === false) {
 99 |         dispatch(userUpdateFailed(userData.message));
100 | 
101 |         //===showing error in tostify====//
102 |         toast.error(userData.message, {
103 |           autoClose: 5000,
104 |         });
105 |       } else {
106 |         dispatch(userUpdateSuccess(userData));
107 |         toast.success("Profile updated successfully", {
108 |           autoClose: 2000,
109 |         });
110 |       }
111 |     } catch (error) {
112 |       dispatch(userUpdateFailed(error.message));
113 |       toast.error(error.message, {
114 |         autoClose: 2000,
115 |       });
116 |     }
117 |   };
118 | 
119 |   const handleDelete = async () => {
120 |     try {
121 |       dispatch(loddingStart());
122 |       const res = await  fetch(
123 |         ` ${API_BASE}/api/users/delete/${currentUser._id}`,
124 |         {
125 |           method: "DELETE",
126 |         }
127 |       );
128 |       const resData = await res.json();
129 |       //===checking reqest success or not ===//
130 |       if (resData.success === false) {
131 |         dispatch(userDeleteFail(resData.message));
132 | 
133 |         //===showing error in tostify====//
134 |         toast.error(resData.message, {
135 |           autoClose: 2000,
136 |         });
137 |       } else {
138 |         dispatch(userDeleteSuccess());
139 |       }
140 |     } catch (error) {
141 |       dispatch(userDeleteFail(error.message));
142 |       toast.error(error.message, {
143 |         autoClose: 2000,
144 |       });
145 |     }
146 |   };
147 | 
148 |   const handleLogOut = async () => {
149 |     try {
150 |       const res = await  fetch(`${API_BASE}/ api/auth/signout`);
151 |       const data = await res.json();
152 |       if (data.success === false) {
153 |         dispatch(signoutFailed(data.message));
154 |         toast.error(data.message, {
155 |           autoClose: 2000,
156 |         });
157 |       } else {
158 |         dispatch(signoutSuccess());
159 |         dispatch(clearSavedListing());
160 |       }
161 |     } catch (error) {
162 |       dispatch(signoutFailed(error.message));
163 |       toast.error(error.message, {
164 |         autoClose: 2000,
165 |       });
166 |     }
167 |   };
168 | 
169 |   // ======Loading User Posts  =====//
170 |   useEffect(() => {
171 |     const loadPost = async () => {
172 |       try {
173 |         setUserPostLoading(true);
174 |         const res = await  fetch(
175 |           `${API_BASE}/api/users/posts/${currentUser._id}`
176 |         );
177 |         const data = await res.json();
178 |         if (data.success === false) {
179 |           toast.error(data.message, {
180 |             autoClose: 2000,
181 |           });
182 |           setUserPostLoading(false);
183 |           dispatch(signoutSuccess());
184 |         } else {
185 |           setUserPost({
186 |             ...userPosts,
187 |             isPostExist: true,
188 |             posts: data,
189 |           });
190 |           setUserPostLoading(false);
191 |         }
192 |       } catch (error) {
193 |         toast.error(error.message, {
194 |           autoClose: 2000,
195 |         });
196 |         setUserPostLoading(false);
197 |       }
198 |     };
199 |     loadPost();
200 |   }, []);
201 | 
202 |   // ======Handling User Post DELETE  =====//
203 |   const handlePostDelete = async (postId) => {
204 |     try {
205 |       const res = await  fetch(`${API_BASE}/api/posts/delete/${postId}`, {
206 |         method: "DELETE",
207 |       });
208 |       const data = await res.json();
209 | 
210 |       //===checking reqest success or not ===//
211 |       if (data.success === false) {
212 |         //===showing error in tostify====//
213 |         toast.error(data.message, {
214 |           autoClose: 2000,
215 |         });
216 |       } else {
217 |         const restPost = userPosts.posts.filter((post) => post._id !== postId);
218 |         setUserPost({
219 |           ...userPosts,
220 |           posts: restPost,
221 |         });
222 | 
223 |         toast.success(data, {
224 |           autoClose: 2000,
225 |         });
226 |       }
227 |     } catch (error) {
228 |       toast.error(error.message, {
229 |         autoClose: 2000,
230 |       });
231 |     }
232 |   };
233 | 
234 |   return (
235 |     <>
236 |       <section>
237 |         <div className="max-w-7xl sm:max-w-full mx-auto grid md:gap-6 temp lg:grid-cols-4  md:grid-cols-5 grid-cols-1 items-start">
238 |           <div className="profile_info p-5 bg-white  w-full  md:col-span-2 lg:col-span-1  md:max-h-full md:min-h-screen h-full col-span-1 ">
239 |             <form className="w-full" onSubmit={handleSubmit}>
240 |               <div className="mb-3">
241 |                 <div className="image_container w-full flex items-center justify-center  relative max-w-[100px] mx-auto">
242 |                   <input
243 |                     onChange={(e) => setFile(e.target.files[0])}
244 |                     hidden
245 |                     accept="image/*"
246 |                     type="file"
247 |                     name="profile"
248 |                     id="profile_image"
249 |                     ref={fileRef}
250 |                   />
251 |                   <img
252 |                     src={formData.avatar || currentUser.avatar}
253 |                     onClick={() => fileRef.current.click()}
254 |                     className="h-24 w-24 object-cover mb-3 rounded-full border-[1px]  border-brand-blue"
255 |                     alt="profile image"
256 |                   />
257 |                   <i className="h-6 w-6 rounded-full flex items-center justify-center bg-brand-blue text-white absolute bottom-3 right-0">
258 |                     <AiFillEdit />
259 |                   </i>
260 |                 </div>
261 | 
262 |                 {fileUploadError ? (
263 |                   <p className="text-xs text-red-700 font-medium text-center">
264 |                     File upload failed
265 |                   </p>
266 |                 ) : uploadingPerc > 0 && uploadingPerc < 100 ? (
267 |                   <p className="text-xs text-black font-medium text-center">
268 |                     File uploading...{uploadingPerc}%
269 |                   </p>
270 |                 ) : (
271 |                   uploadingPerc === 100 && (
272 |                     <p className="text-xs text-green-600 font-medium text-center">
273 |                       File uploaded!!!
274 |                     </p>
275 |                   )
276 |                 )}
277 |               </div>
278 | 
279 |               <label className="text-left font-heading text-sm pl-1 ">
280 |                 Username
281 |               </label>
282 |               <input
283 |                 defaultValue={currentUser.username}
284 |                 name="username"
285 |                 type="text"
286 |                 placeholder="Username"
287 |                 className="form_input bg-slate-200 rounded-md !pl-3 mt-1 !border-[1px] focus:!border-brand-blue mb-3"
288 |                 onChange={handleChange}
289 |               />
290 | 
291 |               <label className="text-left font-heading text-sm pl-1 ">
292 |                 Email
293 |               </label>
294 |               <input
295 |                 defaultValue={currentUser.email}
296 |                 name="email"
297 |                 type="email"
298 |                 placeholder="Username"
299 |                 className="  form_input bg-slate-200 rounded-md !pl-3 !border-[1px] focus:!border-brand-blue mb-3"
300 |                 onChange={handleChange}
301 |               />
302 | 
303 |               <label className="text-left font-heading text-sm pl-1 ">
304 |                 Password
305 |               </label>
306 |               <input
307 |                 type="password"
308 |                 name="password"
309 |                 placeholder="Password"
310 |                 className="mt-1  form_input bg-slate-200 rounded-md !pl-3 !border-[1px] focus:!border-brand-blue"
311 |                 onChange={handleChange}
312 |               />
313 | 
314 |               <button
315 |                 disabled={loading}
316 |                 type="submit"
317 |                 className="py-2 px-5 bg-brand-blue text-white rounded-md w-full font-heading  mt-4 hover:opacity-90"
318 |               >
319 |                 {loading ? "Loading..." : "Save Changes"}
320 |               </button>
321 |             </form>
322 |             <div className="btn_container">
323 |               <div className=" flex justify-between items-center md:flex-col xl:flex-row mt-2">
324 |                 <button
325 |                   onClick={handleLogOut}
326 |                   className="md:w-full font-heading  xl:w-auto py-2 px-5 bg-red-800 text-white rounded-md   mt-2 hover:opacity-90 text-sm"
327 |                 >
328 |                   Log Out
329 |                 </button>
330 | 
331 |                 <button
332 |                   onClick={handleDelete}
333 |                   className="md:w-full xl:w-auto py-2 px-5 bg-red-800  text-white font-heading rounded-md mt-2 hover:opacity-90 text-sm"
334 |                 >
335 |                   Delete
336 |                 </button>
337 |               </div>
338 |             </div>
339 |           </div>
340 | 
341 |           {/*======== post section start here ========= */}
342 | 
343 |           <div className=" mt-5 md:mt-0 col-span-3 post_section profile_info p-2 flex flex-col   bg-transparent  w-full ">
344 |             {userPostLoading ? (
345 |               <div>
346 |                 <Loading />
347 |                 <p className="text-brand-blue text-center font-heading text-xl">
348 |                   Loading your post…
349 |                 </p>
350 |               </div>
351 |             ) : (
352 |               <div className="grid post_card grid-cols-1 md:grid-cols-1 lg:grid-cols-3 gap-6 md:h-full overflow-scroll pb-10 px-4 scrollbar-hide md:pt-5">
353 |                 {/* ADD NEW POST BUTTON  */}
354 |                 <div className="cursor-pointer rounded-md  bg-white  shadow-lg hover:shadow-xl">
355 |                   <button
356 |                     onClick={() => navigate("/create_post")}
357 |                     type="submit"
358 |                     className=" px-5 bg-slate-300 font-heading shadow-lg text-black text-lg  rounded-sm hover:opacity-95 w-full h-full flex justify-center items-center flex-col py-10 sm:py-10"
359 |                   >
360 |                     <BsFillPlusSquareFill className="text-center md:mb-3 md:text-5xl text-black text-sm sm:text-xl" />
361 |                     Create New Post
362 |                   </button>
363 |                 </div>
364 | 
365 |                 {userPosts.isPostExist &&
366 |                   userPosts.posts.map((post) => (
367 |                     <PostCard
368 |                       key={post._id}
369 |                       postInfo={{ post, handlePostDelete }}
370 |                     />
371 |                   ))}
372 |               </div>
373 |             )}
374 |           </div>
375 |         </div>
376 |         <ToastContainer />
377 |       </section>
378 |       <Footer />
379 |     </>
380 |   );
381 | };
382 | 
383 | export default Profile;
384 | 


--------------------------------------------------------------------------------
/src/pages/Search.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef, useState } from "react";
  2 | import { BsSearch } from "react-icons/bs";
  3 | import {
  4 |   FaAngleDoubleLeft,
  5 |   FaAngleDoubleRight,
  6 |   FaSearch,
  7 | } from "react-icons/fa";
  8 | import ListingCard from "../components/ListingCard";
  9 | import { useDispatch, useSelector } from "react-redux";
 10 | import { setSearchTermState } from "../redux/search/searchSlice";
 11 | import Footer from "../components/Footer";
 12 | import { LuSearchX } from "react-icons/lu";
 13 | 
 14 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
 15 | 
 16 | const Search = () => {
 17 |   const [listings, setListings] = useState([]);
 18 |   const { searchTermState } = useSelector((state) => state.search);
 19 |   const [loading, setLoading] = useState(false);
 20 |   const [pageCount, setPageCount] = useState(1);
 21 |   const scrollRef = useRef();
 22 | 
 23 |   const [formState, setFormState] = useState({
 24 |     searchTerm: "",
 25 |     parking: false,
 26 |     type: "all",
 27 |     furnished: false,
 28 |     offer: false,
 29 |   });
 30 |   const dispatch = useDispatch();
 31 |   const handleSubmit = (e) => {
 32 |     e.preventDefault();
 33 |     dispatch(setSearchTermState(""));
 34 |     setFormState({
 35 |       searchTerm: "",
 36 |       parking: false,
 37 |       type: "all",
 38 |       furnished: false,
 39 |       offer: false,
 40 |     });
 41 |   };
 42 | 
 43 |   useEffect(() => {
 44 |     (async () => {
 45 |       try {
 46 |         setLoading(true);
 47 |         const res = await  fetch(
 48 |           `${API_BASE}/api/posts?searchTerm=${searchTermState}&type=${formState.type}&parking=${formState.parking}&furnished=${formState.furnished}&offer=${formState.offer}&page=${pageCount}`
 49 |         );
 50 |         const json = await res.json();
 51 |         if (json.success === false) {
 52 |           setLoading(false);
 53 |         } else {
 54 |           setListings(json);
 55 |           setLoading(false);
 56 |         }
 57 |       } catch (error) {
 58 |         console.log(error);
 59 |         setLoading(false);
 60 |       }
 61 |     })();
 62 |   }, [formState, searchTermState, pageCount]);
 63 | 
 64 |   const handleChange = (name, value) => {
 65 |     setPageCount(1);
 66 |     setFormState({
 67 |       ...formState,
 68 |       [name]: value,
 69 |     });
 70 |   };
 71 | 
 72 |   useEffect(() => {
 73 |     scrollRef.current.scrollIntoView({ behavior: "smooth" });
 74 |   }, [listings]);
 75 | 
 76 |   return (
 77 |     <>
 78 |       <section>
 79 |         <div ref={scrollRef}>
 80 |           <div className="grid grid-cols-1 md:grid-cols-12 gap-5 lg:max-h-full lg:min-h-screen">
 81 |             <div className="option_contaienr md:col-span-3 mt-1 bg-white lg:max-h-full lg:min-h-screen">
 82 |               <div className="items_cotainer p-5 py-8 ">
 83 |                 <form onSubmit={handleSubmit}>
 84 |                   <div className="form-control w-full max-w-full   sm:max-w-full relative">
 85 |                     <input
 86 |                       type="text"
 87 |                       placeholder="Search..."
 88 |                       className="search sm:max-w-full"
 89 |                       onChange={(e) =>
 90 |                         dispatch(setSearchTermState(e.target.value))
 91 |                       }
 92 |                       value={searchTermState}
 93 |                     />
 94 |                     <button
 95 |                       type="submit"
 96 |                       className="search_btn   bg-brand-blue"
 97 |                     >
 98 |                       <i className="text-center text-white font-bold">
 99 |                         <BsSearch />
100 |                       </i>
101 |                     </button>
102 |                   </div>
103 |                   <div className="feilds_cotainer mt-4">
104 |                     <div className="feilds max-w-xs">
105 |                       <p className="text-lg font-heading ">Property type:</p>
106 |                       <div className="control flex flex-row md:flex-col items-center md:items-start xl:flex-row xl:items-center justify-between mt-1">
107 |                         <div>
108 |                           <label className="flex items-center justify-start text-lg font-heading">
109 |                             {/* <input
110 |                                                             className=" w-4 h-4 mr-1 bg-transparent border border-solid border-gray-400  checked:bg-brand-blue checked:border-brand-blue dark:checked:bg-white dark:checked:border-brand-blue accent-brand-blue dark:bg-transparent"
111 |                                                             type="radio"
112 |                                                             name="type"
113 |                                                             value={"all"}
114 |                                                             onChange={(e) => handleChange(e.target.name, e.target.value)}
115 |                                                             checked={formState.type === "all"}
116 |                                                         /> */}
117 |                             <input
118 |                               className="radio w-4 h-4 mr-1 bg-transparent border border-solid border-gray-400 rounded-full checked:bg-brand-blue checked:border-brand-blue dark:checked:bg-white dark:checked:border-brand-blue"
119 |                               type="radio"
120 |                               name="type"
121 |                               value="all"
122 |                               onChange={(e) =>
123 |                                 handleChange(e.target.name, e.target.value)
124 |                               }
125 |                               checked={formState.type === "all"}
126 |                             />
127 |                             All
128 |                           </label>
129 |                         </div>
130 |                         <div>
131 |                           <label className="flex items-center justify-start text-lg font-heading">
132 |                             <input
133 |                               className="radio w-4 h-4 mr-1 bg-transparent border border-solid border-gray-400 rounded-full checked:bg-brand-blue checked:border-brand-blue dark:checked:bg-white dark:checked:border-brand-blue"
134 |                               type="radio"
135 |                               name="type"
136 |                               value={"sale"}
137 |                               onChange={(e) =>
138 |                                 handleChange(e.target.name, e.target.value)
139 |                               }
140 |                             />
141 |                             For Sale
142 |                           </label>
143 |                         </div>
144 |                         <div>
145 |                           <label className="flex items-center justify-start text-lg font-heading ">
146 |                             <input
147 |                               className="radio w-4 h-4 mr-1 bg-transparent border border-solid border-gray-400 rounded-full checked:border-brand-blue dark:checked:border-brand-blue dark:checked:bg-white checked:bg-brand-blue "
148 |                               type="radio"
149 |                               name="type"
150 |                               value={"rent"}
151 |                               onChange={(e) =>
152 |                                 handleChange(e.target.name, e.target.value)
153 |                               }
154 |                             />
155 |                             For Rent
156 |                           </label>
157 |                         </div>
158 |                       </div>
159 | 
160 |                       {/* // Amenities Section  */}
161 |                       <div className="aminities_container mt-4">
162 |                         <p className="text-lg font-heading">Amenities:</p>
163 |                         <div className="control flex flex-row md:flex-col items-center md:items-start xl:flex-row xl:items-center justify-start mt-1">
164 |                           <div className="mr-5">
165 |                             <label className="flex items-center justify-start text-lg font-heading">
166 |                               <input
167 |                                 className="checkbox w-[18px] h-[18px] mr-1 border-gray-400 rounded-md checked:bg-brand-blue"
168 |                                 type="checkbox"
169 |                                 name="parking"
170 |                                 onChange={(e) =>
171 |                                   handleChange(e.target.name, e.target.checked)
172 |                                 }
173 |                                 checked={formState.parking}
174 |                               />
175 |                               Parking
176 |                             </label>
177 |                           </div>
178 |                           <div>
179 |                             <label className="flex items-center justify-start text-lg font-heading">
180 |                               <input
181 |                                 className="checkbox w-[18px] h-[18px] mr-1 border-gray-400 rounded-md checked:bg-brand-blue"
182 |                                 type="checkbox"
183 |                                 name="furnished"
184 |                                 onChange={(e) =>
185 |                                   handleChange(e.target.name, e.target.checked)
186 |                                 }
187 |                                 checked={formState.furnished}
188 |                               />
189 |                               Furnished
190 |                             </label>
191 |                           </div>
192 |                         </div>
193 |                       </div>
194 | 
195 |                       <div className="offer_container mt-8 ">
196 |                         <div>
197 |                           <label className="flex items-center justify-start text-lg font-heading">
198 |                             <input
199 |                               className="checkbox w-[18px] h-[18px] mr-1 border-gray-400 rounded-md checked:bg-brand-blue"
200 |                               type="checkbox"
201 |                               name="offer"
202 |                               checked={formState.offer}
203 |                               onChange={(e) =>
204 |                                 handleChange(e.target.name, e.target.checked)
205 |                               }
206 |                             />
207 |                             Available Offer
208 |                           </label>
209 |                         </div>
210 |                       </div>
211 |                     </div>
212 |                     <div className="btn_cotainer w-full">
213 |                       <button
214 |                         className="w-full mt-4 py-2 px-2 bg-brand-blue text-white rounded-sm hover:bg-brand-blue/90"
215 |                         type="submit"
216 |                       >
217 |                         <span className="flex items-center justify-center font-heading text-lg">
218 |                           <FaSearch className="mr-1" />
219 |                           Clear Search
220 |                         </span>
221 |                       </button>
222 |                     </div>
223 |                   </div>
224 |                 </form>
225 |               </div>
226 |             </div>
227 |             <div className="listing_container  md:col-span-9 pb-10 pt-2">
228 |               {loading ? (
229 |                 <div className="loading_container mt-40 flex items-center justify-center flex-col">
230 |                   <FaSearch className="font-xl text-brand-blue font-bold text-xl text-center" />
231 |                   <p className="font-heading text-lg text-center text-brand-blue ">
232 |                     Searching...
233 |                   </p>
234 |                 </div>
235 |               ) : (
236 |                 <div>
237 |                   {listings.length !== 0 ? (
238 |                     <>
239 |                       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 px-5 gap-y-8">
240 |                         {listings &&
241 |                           listings.map((listing) => (
242 |                             <ListingCard key={listing._id} listing={listing} />
243 |                           ))}
244 |                       </div>
245 |                       <div className="pageination_part mt-8 md:mt-14 w-full flex items-center justify-center">
246 |                         <div className="join">
247 |                           {/* prev Btn  */}
248 |                           <button
249 |                             onClick={() => setPageCount(pageCount - 1)}
250 |                             disabled={pageCount <= 1 || loading}
251 |                             className="join-item btn bg-brand-blue text-white hover:bg-brand-blue/90 
252 |                                                     disabled:bg-[#d5d5d5] disabled:text-[#a0a0a0]
253 |                                                     "
254 |                           >
255 |                             <FaAngleDoubleLeft />
256 |                           </button>
257 | 
258 |                           <button className="join-item btn bg-brand-blue hover:bg-brand-blue cursor-default text-white">
259 |                             Page {pageCount}
260 |                           </button>
261 | 
262 |                           {/* Next Btn  */}
263 |                           <button
264 |                             onClick={() => setPageCount(pageCount + 1)}
265 |                             disabled={listings.length < 4 || loading}
266 |                             className="join-item btn bg-brand-blue text-white hover:bg-brand-blue/90
267 |                                                     disabled:bg-[#d5d5d5] disabled:text-[#a0a0a0]"
268 |                           >
269 |                             <FaAngleDoubleRight />
270 |                           </button>
271 |                         </div>
272 |                       </div>
273 |                     </>
274 |                   ) : (
275 |                     <div className=" mt-40 flex items-center justify-center flex-col">
276 |                       <LuSearchX className="font-3xl text-brand-blue font-bold text-xl text-center" />
277 |                       <p className="font-heading text-lg text-center text-brand-blue ">
278 |                         Sorry, Listings not found
279 |                       </p>
280 |                     </div>
281 |                   )}
282 |                 </div>
283 |               )}
284 |             </div>
285 |           </div>
286 |         </div>
287 |       </section>
288 |       <>
289 |         <Footer />
290 |       </>
291 |     </>
292 |   );
293 | };
294 | 
295 | export default Search;
296 | 


--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { Link } from 'react-router-dom'
  3 | 
  4 | const Footer = () => {
  5 |     return (
  6 |         <footer className="bg-slate-400">
  7 |             <div
  8 |                 className="mx-auto max-w-screen-xl space-y-8 px-4 py-16 sm:px-6 lg:space-y-16 lg:px-8"
  9 |             >
 10 |                 <div className="sm:flex sm:items-center sm:justify-between">
 11 |                     <div >
 12 |                         <Link to={'/home'}>
 13 |                             <h2 className="font-blach sm:text-xl text-sm text-left hover:bg-transparent uppercase text-brand-blue tracking-tighter w-full font-oswald font-bold flex items-center justify-start">
 14 |                                 <img className='w-8 h-8' src="https://img.icons8.com/sf-black-filled/64/313a67/home.png" alt="logo" />
 15 |                                 <span>Property Sale</span>
 16 |                             </h2>
 17 |                         </Link>
 18 |                     </div>
 19 | 
 20 |                     <ul className="mt-8 flex justify-start gap-6 sm:mt-0 sm:justify-end">
 21 |                         <li>
 22 |                             <Link to={"https://www.facebook.com/biplobhasan.emon"} target='_blank'
 23 |                                 className="text-brand-blue duration-300 hover:text-white font-heading"
 24 |                             >
 25 |                                 <span className="sr-only">Facebook</span>
 26 | 
 27 |                                 <svg
 28 |                                     className="h-6 w-6"
 29 |                                     fill="currentColor"
 30 |                                     viewBox="0 0 24 24"
 31 |                                     aria-hidden="true"
 32 |                                 >
 33 |                                     <path
 34 |                                         fillRule="evenodd"
 35 |                                         d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
 36 |                                         clipRule="evenodd"
 37 |                                     />
 38 |                                 </svg>
 39 |                             </Link>
 40 |                         </li>
 41 | 
 42 |                         <li>
 43 |                             <Link to={"https://www.instagram.com/biplob_hasan_emon/"} target='_blank'
 44 |                                 className="text-brand-blue duration-300 hover:text-white font-heading"
 45 |                             >
 46 |                                 <span className="sr-only">Instagram</span>
 47 | 
 48 |                                 <svg
 49 |                                     className="h-6 w-6"
 50 |                                     fill="currentColor"
 51 |                                     viewBox="0 0 24 24"
 52 |                                     aria-hidden="true"
 53 |                                 >
 54 |                                     <path
 55 |                                         fillRule="evenodd"
 56 |                                         d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
 57 |                                         clipRule="evenodd"
 58 |                                     />
 59 |                                 </svg>
 60 |                             </Link>
 61 |                         </li>
 62 | 
 63 |                         <li>
 64 |                             <Link
 65 |                                 className="text-brand-blue duration-300 hover:text-white font-heading"
 66 |                             >
 67 |                                 <span className="sr-only">Twitter</span>
 68 | 
 69 |                                 <svg
 70 |                                     className="h-6 w-6"
 71 |                                     fill="currentColor"
 72 |                                     viewBox="0 0 24 24"
 73 |                                     aria-hidden="true"
 74 |                                 >
 75 |                                     <path
 76 |                                         d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"
 77 |                                     />
 78 |                                 </svg>
 79 |                             </Link>
 80 |                         </li>
 81 | 
 82 |                         <li>
 83 |                             <Link to={"https://github.com/Emoncr"} target='_blank'
 84 |                                 className="text-brand-blue duration-300 hover:text-white font-heading"
 85 |                             >
 86 |                                 <span className="sr-only">GitHub</span>
 87 | 
 88 |                                 <svg
 89 |                                     className="h-6 w-6"
 90 |                                     fill="currentColor"
 91 |                                     viewBox="0 0 24 24"
 92 |                                     aria-hidden="true"
 93 |                                 >
 94 |                                     <path
 95 |                                         fillRule="evenodd"
 96 |                                         d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
 97 |                                         clipRule="evenodd"
 98 |                                     />
 99 |                                 </svg>
100 |                             </Link>
101 |                         </li>
102 | 
103 |                         <li>
104 |                             <Link
105 |                                 className="text-brand-blue duration-300 hover:text-white font-heading"
106 |                             >
107 |                                 <span className="sr-only">Dribbble</span>
108 | 
109 |                                 <svg
110 |                                     className="h-6 w-6"
111 |                                     fill="currentColor"
112 |                                     viewBox="0 0 24 24"
113 |                                     aria-hidden="true"
114 |                                 >
115 |                                     <path
116 |                                         fillRule="evenodd"
117 |                                         d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
118 |                                         clipRule="evenodd"
119 |                                     />
120 |                                 </svg>
121 |                             </Link>
122 |                         </li>
123 |                     </ul>
124 |                 </div>
125 | 
126 |                 <div
127 |                     className="grid grid-cols-1 gap-8 border-t-2 border-brand-blue pt-8 sm:grid-cols-2 lg:grid-cols-4 lg:pt-16 font-oswald"
128 |                 >
129 |                     <div>
130 |                         <p className="font-bold uppercase font-oswald text-brand-blue">Services</p>
131 | 
132 |                         <ul className="mt-6 space-y-4 text-sm">
133 |                             <li>
134 |                                 <Link className="text-brand-blue duration-300 hover:text-white font-heading">
135 |                                     1on1 Coaching
136 |                                 </Link>
137 |                             </li>
138 | 
139 |                             <li>
140 |                                 <Link className="text-brand-blue duration-300 hover:text-white font-heading">
141 |                                     Company Review
142 |                                 </Link>
143 |                             </li>
144 | 
145 |                             <li>
146 |                                 <Link className="text-brand-blue duration-300 hover:text-white font-heading">
147 |                                     Accounts Review
148 |                                 </Link>
149 |                             </li>
150 | 
151 |                             <li>
152 |                                 <Link className="text-brand-blue duration-300 hover:text-white font-heading">
153 |                                     HR Consulting
154 |                                 </Link>
155 |                             </li>
156 | 
157 |                             <li>
158 |                                 <Link className="text-brand-blue duration-300 hover:text-white font-heading">
159 |                                     SEO Optimisation
160 |                                 </Link>
161 |                             </li>
162 |                         </ul>
163 |                     </div>
164 | 
165 |                     <div>
166 |                         <p className="font-bold uppercase font-oswald text-brand-blue">Company</p>
167 | 
168 |                         <ul className="mt-6 space-y-4 text-sm">
169 |                             <li>
170 |                                 <Link className="text-brand-blue duration-300 hover:text-white font-heading">
171 |                                     About
172 |                                 </Link>
173 |                             </li>
174 | 
175 |                             <li>
176 |                                 <Link className="text-brand-blue duration-300 hover:text-white font-heading">
177 |                                     Meet the Team
178 |                                 </Link>
179 |                             </li>
180 | 
181 |                             <li>
182 |                                 <Link className="text-brand-blue duration-300 hover:text-white font-heading">
183 |                                     Accounts Review
184 |                                 </Link>
185 |                             </li>
186 |                         </ul>
187 |                     </div>
188 | 
189 |                     <div>
190 |                         <p className="font-bold uppercase font-oswald text-brand-blue">Helpful Links</p>
191 | 
192 |                         <ul className="mt-6 space-y-4 text-sm">
193 |                             <li>
194 |                                 <Link className="text-brand-blue duration-300 hover:text-white font-heading">
195 |                                     Contact
196 |                                 </Link>
197 |                             </li>
198 | 
199 |                             <li>
200 |                                 <Link className="text-brand-blue duration-300 hover:text-white font-heading">
201 |                                     FAQs
202 |                                 </Link>
203 |                             </li>
204 | 
205 |                             <li>
206 |                                 <Link className="text-brand-blue duration-300 hover:text-white font-heading">
207 |                                     Live Chat
208 |                                 </Link>
209 |                             </li>
210 |                         </ul>
211 |                     </div>
212 | 
213 |                     <div>
214 |                         <p className="font-bold uppercase font-oswald text-brand-blue">Legal</p>
215 | 
216 |                         <ul className="mt-6 space-y-4 text-sm">
217 |                             <li>
218 |                                 <Link className="text-brand-blue duration-300 hover:text-white font-heading">
219 |                                     Accessibility
220 |                                 </Link>
221 |                             </li>
222 | 
223 |                             <li>
224 |                                 <Link className="text-brand-blue duration-300 hover:text-white font-heading">
225 |                                     Returns Policy
226 |                                 </Link>
227 |                             </li>
228 | 
229 |                             <li>
230 |                                 <Link className="text-brand-blue duration-300 hover:text-white font-heading">
231 |                                     Refund Policy
232 |                                 </Link>
233 |                             </li>
234 | 
235 |                             <li>
236 |                                 <Link className="text-brand-blue duration-300 hover:text-white font-heading">
237 |                                     Hiring Statistics
238 |                                 </Link>
239 |                             </li>
240 |                         </ul>
241 |                     </div>
242 |                 </div>
243 | 
244 |                 <p className="text-xs text-brand-blue font-heading">
245 |                     &copy; 2023. PROPERTY SALE. All rights reserved.
246 |                 </p>
247 |             </div>
248 |         </footer>
249 |     )
250 | }
251 | 
252 | export default Footer


--------------------------------------------------------------------------------
/src/pages/ListingPage.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { useNavigate, useParams } from "react-router-dom";
  3 | import { ToastContainer, toast } from "react-toastify";
  4 | import "slick-carousel/slick/slick.css";
  5 | import "slick-carousel/slick/slick-theme.css";
  6 | import Slider from "react-slick";
  7 | import { BsArrowRight, BsArrowLeft } from "react-icons/bs";
  8 | import { BiSolidArea } from "react-icons/bi";
  9 | import {
 10 |   FaLocationArrow,
 11 |   FaBed,
 12 |   FaBath,
 13 |   FaAngleUp,
 14 |   FaAngleDown,
 15 |   FaShare,
 16 |   FaLock,
 17 |   FaBookmark,
 18 | } from "react-icons/fa";
 19 | import Loading from "../components/Loading";
 20 | import { useDispatch, useSelector } from "react-redux";
 21 | import Contact from "../components/Contact";
 22 | import {
 23 |   handleLisingRemove,
 24 |   handleSave,
 25 | } from "../redux/saveListing/saveListingSlice";
 26 | const API_BASE = import.meta.env.VITE_API_BASE_URL;
 27 | 
 28 | const ListingPage = () => {
 29 |   const [listings, setListings] = useState({});
 30 |   const [isFeatureActive, setIsFeatureActive] = useState(false);
 31 |   const [loading, setLoading] = useState(false);
 32 |   const [savedListing, setSavedListing] = useState(false);
 33 | 
 34 |   const {
 35 |     area,
 36 |     address,
 37 |     bath,
 38 |     bed,
 39 |     description,
 40 |     discountPrice,
 41 |     furnished,
 42 |     offer,
 43 |     parking,
 44 |     price,
 45 |     title,
 46 |     type,
 47 |     _id,
 48 |     userRef,
 49 |   } = listings;
 50 | 
 51 |   const navigate = useNavigate();
 52 |   const params = useParams();
 53 |   const { currentUser } = useSelector((state) => state.user);
 54 | 
 55 |   const { saveListings } = useSelector((state) => state.savedListing);
 56 | 
 57 |   const dispatch = useDispatch();
 58 | 
 59 |   //====== Loading Post Data Here ======//
 60 |   useEffect(() => {
 61 |     (async () => {
 62 |       setLoading(true);
 63 |       const res = await  fetch(`${API_BASE}/api/posts/${params.id}`);
 64 |       const json = await res.json();
 65 |       if (json.success === false) {
 66 |         toast.error(json.message, {
 67 |           autoClose: 2000,
 68 |         });
 69 |         setLoading(false);
 70 |       } else {
 71 |         setListings(json);
 72 |         setLoading(false);
 73 |         if (_id) {
 74 |           const isSaved = saveListings.some(
 75 |             (saveListing) => saveListing._id === _id
 76 |           );
 77 | 
 78 |           isSaved && setSavedListing(true);
 79 |         }
 80 |       }
 81 |     })();
 82 |   }, []);
 83 | 
 84 |   //====SLider Functions=====//
 85 |   function SamplePrevArrow({ onClick }) {
 86 |     return (
 87 |       <div
 88 |         className="absolute top-1/2 left-0 z-10  -translate-y-1/2 p-2 sm:p-4 rounded-e-md bg-white flex items-center justify-center cursor-pointer shadow-lg hover:bg-white/90 duration-300"
 89 |         onClick={onClick}
 90 |       >
 91 |         <BsArrowLeft className="text-brand-blue text-lg sm:text-2xl" />
 92 |       </div>
 93 |     );
 94 |   }
 95 |   function SampleNextArrow({ onClick }) {
 96 |     return (
 97 |       <div
 98 |         className="absolute top-1/2 right-0 z-10  -translate-y-1/2 p-2 sm:p-4 rounded-s-md bg-white flex items-center justify-center cursor-pointer shadow-lg hover:bg-white/90 duration-300"
 99 |         onClick={onClick}
100 |       >
101 |         <BsArrowRight className="text-brand-blue text-lg sm:text-2xl" />
102 |       </div>
103 |     );
104 |   }
105 | 
106 |   const settings = {
107 |     dots: true,
108 |     infinite: true,
109 |     lazyLoad: false,
110 |     speed: 500,
111 |     slidesToShow: 1,
112 |     slidesToScroll: 1,
113 |     nextArrow: <SampleNextArrow to="next" />,
114 |     prevArrow: <SamplePrevArrow to="prev" />,
115 |     appendDots: (dots) => (
116 |       <div style={{ bottom: 25 }}>
117 |         <ul style={{ margin: "0px", color: "#fff" }}> {dots} </ul>
118 |       </div>
119 |     ),
120 |   };
121 | 
122 |   // ======Handling User Post DELETE  =====//
123 |   const handlePostDelete = async (postId) => {
124 |     try {
125 |       const res = await  fetch(`${API_BASE}/api/posts/delete/${postId}`, {
126 |         method: "DELETE",
127 |       });
128 |       const data = await res.json();
129 | 
130 |       //===checking reqest success or not ===//
131 |       if (data.success === false) {
132 |         //===showing error in tostify====//
133 |         toast.error(data.message, {
134 |           autoClose: 2000,
135 |         });
136 |       } else {
137 |         navigate("/profile");
138 |       }
139 |     } catch (error) {
140 |       toast.error(error.message, {
141 |         autoClose: 2000,
142 |       });
143 |     }
144 |   };
145 | 
146 |   const handleUrlShare = async () => {
147 |     const url = window.location.href;
148 |     try {
149 |       await navigator.clipboard.writeText(url);
150 | 
151 |       toast.success("URL coppied !", {
152 |         autoClose: 1000,
153 |       });
154 |     } catch (error) {
155 |       toast.error("URL coppied failed!", {
156 |         autoClose: 2000,
157 |       });
158 |     }
159 |   };
160 | 
161 |   const handleSaveListing = () => {
162 |     const isSaved = saveListings.some((saveListing) => saveListing._id === _id);
163 |     if (isSaved) {
164 |       const restListings = saveListings.filter(
165 |         (savedListing) => savedListing._id !== _id
166 |       );
167 |       dispatch(handleLisingRemove(restListings));
168 |       setSavedListing(false);
169 |     } else {
170 |       const listingToAdd = listings;
171 |       dispatch(handleSave(listingToAdd));
172 |       setSavedListing(true);
173 |     }
174 |   };
175 | 
176 |   return (
177 |     <>
178 |       {loading ? (
179 |         <>
180 |           <Loading />
181 |           <p className="text-brand-blue text-center font-heading text-xl">
182 |             Loading your post…
183 |           </p>
184 |         </>
185 |       ) : (
186 |         <div className="listing_section pb-16">
187 |           <Slider {...settings} className="z-10 relative">
188 |             {listings.imgUrl &&
189 |               listings.imgUrl.map((listing, index) => (
190 |                 <div
191 |                   key={index}
192 |                   className="h-[300px] sm:h-[550px] w-full mx-auto z-10"
193 |                 >
194 |                   <img
195 |                     className="object-cover w-full h-full"
196 |                     src={listing}
197 |                     alt="image"
198 |                   />
199 |                 </div>
200 |               ))}
201 |           </Slider>
202 | 
203 |           <div className="container ">
204 |             <div className="property_details_container pt-4 sm:pt-12 ">
205 |               <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
206 |                 <div className="lg:col-span-7  ">
207 |                   <div className="bg-white md:p-12 p-6 rounded-md shadow-sm shadow-brand-blue">
208 |                     <div className="property_info">
209 |                       <p className="font-heading text-brand-blue">
210 |                         <span className="py-2 px-6 bg-brand-blue/40 rounded-full border border-brand-blue uppercase">
211 |                           {type}
212 |                         </span>
213 |                       </p>
214 | 
215 |                       <h1 className="font-heading font-bold mt-5 md:mt-8 text-2xl sm:text-3xl text-black capitalize">
216 |                         {title}
217 |                       </h1>
218 |                       <p className="font-content mt-3 font-medium text-lg flex items-center justify-left">
219 |                         <FaLocationArrow className="text-brand-blue" />
220 |                         <span className="ml-1">{address}</span>
221 |                       </p>
222 | 
223 |                       <div className="description">
224 |                         <p className="font-heading mt-4 font-medium text-lg sm:text-xl">
225 |                           Description
226 |                         </p>
227 |                         <p className="font-content mt-1 font-medium text-xs sm:text-sm md:text-md lg:text-lg ">
228 |                           {description}
229 |                         </p>
230 |                       </div>
231 | 
232 |                       {offer ? (
233 |                         <p className="text-2xl font-heading text-brand-blue mt-5  text-bold">
234 |                           ${discountPrice}{" "}
235 |                           <span>
236 |                             <s className="text-gray-400 text-sm">${price}</s>
237 |                           </span>
238 |                         </p>
239 |                       ) : (
240 |                         <p className="text-2xl font-heading text-brand-blue mt-3  text-bold">
241 |                           ${price}
242 |                         </p>
243 |                       )}
244 |                     </div>
245 | 
246 |                     <div className="property_genarel_info grid-cols-3 grid max-w-md">
247 |                       <p className="font-heading mt-3 font-medium sm:text-lg  text-sm flex items-center justify-left">
248 |                         <FaBed className="text-brand-blue" />
249 |                         <span className="ml-1">{bed} Beds</span>
250 |                       </p>
251 |                       <p className="font-heading mt-3 font-medium sm:text-lg  text-sm flex items-center justify-left">
252 |                         <FaBath className="text-brand-blue" />
253 |                         <span className="ml-1">{bath} Bath</span>
254 |                       </p>
255 |                       <p className="font-heading mt-3 font-medium sm:text-lg text-sm flex items-center justify-left">
256 |                         <BiSolidArea className="text-brand-blue" />
257 |                         <span className="ml-1">{area} sqft</span>
258 |                       </p>
259 |                     </div>
260 |                   </div>
261 | 
262 |                   {/* Feature Content Section */}
263 | 
264 |                   <div className="property_details mt-8 bg-white rounded-md shadow-sm shadow-brand-blue md:px-12 py-5 px-6">
265 |                     <div
266 |                       onClick={() => setIsFeatureActive(!isFeatureActive)}
267 |                       className="feature_heading flex items-center justify-between cursor-pointer"
268 |                     >
269 |                       <p className="font-heading text-lg sm:text-xl font-extrabold">
270 |                         Detail & Features
271 |                       </p>
272 |                       {isFeatureActive ? (
273 |                         <i className="p-[5px] rounded-full bg-brand-blue/20 flex items-center justify-center">
274 |                           <FaAngleUp className="text-xl text-brand-blue" />
275 |                         </i>
276 |                       ) : (
277 |                         <i className="p-[5px] rounded-full bg-brand-blue/20 flex items-center justify-center">
278 |                           <FaAngleDown className="text-xl text-brand-blue" />
279 |                         </i>
280 |                       )}
281 |                     </div>
282 |                     <div
283 |                       className={`feature_info  transition-max-h ${
284 |                         isFeatureActive ? "max-h-screen" : "max-h-0"
285 |                       } overflow-hidden duration-500 ease-in-out`}
286 |                     >
287 |                       <div className="info_contaier mt-5 max-w-md ">
288 |                         <div className="grid grid-cols-2">
289 |                           <p className="font-heading text-md lg:text-lg ">
290 |                             Bedrooms
291 |                           </p>
292 |                           <p className="font-heading  text-md lg:text-lg ">
293 |                             {bed}
294 |                           </p>
295 |                         </div>
296 |                         <div className="grid grid-cols-2 mt-2">
297 |                           <p className="font-heading text-md lg:text-lg ">
298 |                             BathRoom
299 |                           </p>
300 |                           <p className="font-heading  text-md lg:text-lg ">
301 |                             {bath}
302 |                           </p>
303 |                         </div>
304 |                         <div className="grid grid-cols-2 mt-2">
305 |                           <p className="font-heading text-md lg:text-lg ">
306 |                             Parking
307 |                           </p>
308 |                           <p
309 |                             className={`font-heading ${
310 |                               parking ? "text-green-600" : "text-gray-400"
311 |                             }  text-md lg:text-lg capitalize`}
312 |                           >
313 |                             {parking ? "Yes" : "No"}
314 |                           </p>
315 |                         </div>
316 |                         <div className="grid grid-cols-2 mt-2">
317 |                           <p className="font-heading text-md lg:text-lg ">
318 |                             Furnished
319 |                           </p>
320 |                           <p
321 |                             className={`font-heading ${
322 |                               furnished ? "text-green-600" : "text-gray-400"
323 |                             }  text-md lg:text-lg capitalize`}
324 |                           >
325 |                             {furnished ? "Yes" : "No"}
326 |                           </p>
327 |                         </div>
328 |                         <div className="grid grid-cols-2 mt-2">
329 |                           <p className="font-heading text-md lg:text-lg ">
330 |                             Area
331 |                           </p>
332 |                           <p className="font-heading  text-md lg:text-lg ">
333 |                             {area} <span>sqft</span>
334 |                           </p>
335 |                         </div>
336 |                         {offer && (
337 |                           <div className="grid grid-cols-2 mt-2">
338 |                             <p className="font-heading text-md lg:text-lg ">
339 |                               Price
340 |                             </p>
341 |                             <p className="font-heading  text-md lg:text-2xl ">
342 |                               ${discountPrice}{" "}
343 |                               <span>
344 |                                 <s className="text-gray-400 text-lg">
345 |                                   ${price}
346 |                                 </s>
347 |                               </span>
348 |                             </p>
349 |                           </div>
350 |                         )}
351 |                       </div>
352 |                     </div>
353 |                   </div>
354 |                 </div>
355 |                 <div className="lg:col-span-5">
356 |                   <div className="bg-white md:p-12 p-6 rounded-md shadow-sm shadow-brand-blue">
357 |                     {currentUser && currentUser._id === userRef ? (
358 |                       <div className="post_owner ">
359 |                         <div className="grid grid-cols-1 sm:grid-cols-2 sm:gap-5 gap-2 ">
360 |                           <div className="btn_container">
361 |                             <button
362 |                               onClick={() =>
363 |                                 navigate(`/update_post/${params.id}`)
364 |                               }
365 |                               className="bg-brand-blue hover:bg-brand-blue/90 text-white w-full px-2 py-3 text-lg font-heading rounded-sm"
366 |                             >
367 |                               Update Post
368 |                             </button>
369 |                           </div>
370 |                           <div className="contant_btn_container">
371 |                             <button
372 |                               onClick={() => handlePostDelete(params.id)}
373 |                               className="bg-red-600 hover:bg-red-600/90 text-white w-full px-2 py-3 text-lg font-heading rounded-sm"
374 |                             >
375 |                               Delete Post
376 |                             </button>
377 |                           </div>
378 |                         </div>
379 |                         <div className="contant_btn_container mt-3">
380 |                           <button
381 |                             onClick={() => navigate(`/profile`)}
382 |                             className="bg-amber-700 hover:bg-amber-700/90 uppercase text-white w-full px-2 py-3 text-lg font-heading rounded-sm"
383 |                           >
384 |                             My All Posts
385 |                           </button>
386 |                         </div>
387 |                       </div>
388 |                     ) : (
389 |                       <div className="visitor_view">
390 |                         <div className="grid grid-cols-1 sm:grid-cols-2 sm:gap-5 gap-2 ">
391 |                           <div className="btn_container">
392 |                             <button
393 |                               onClick={handleUrlShare}
394 |                               className="bg-brand-blue hover:bg-brand-blue/90 text-white w-full px-2 py-3 text-lg font-heading rounded-sm"
395 |                             >
396 |                               <span className="flex items-center justify-center">
397 |                                 <FaShare className="mr-2 text-green-600" />
398 |                                 Share Url
399 |                               </span>
400 |                             </button>
401 |                           </div>
402 |                           <div className="contant_btn_container">
403 |                             <button
404 |                               onClick={handleSaveListing}
405 |                               className="bg-brand-blue hover:bg-brand-blue/90 text-white w-full px-2 py-3 text-lg font-heading rounded-sm"
406 |                             >
407 |                               <span className="flex items-center justify-center">
408 |                                 <FaBookmark
409 |                                   className={`mr-2 ${
410 |                                     savedListing
411 |                                       ? "text-green-600"
412 |                                       : "text-white"
413 |                                   } `}
414 |                                 />
415 |                                 {savedListing ? "Saved" : "Save"}
416 |                               </span>
417 |                             </button>
418 |                           </div>
419 |                         </div>
420 |                         <div className="btn_container mt-3">
421 |                           {currentUser && currentUser.email ? (
422 |                             <div className="contant_owner_form mt-5">
423 |                               <Contact
424 |                                 listing={listings}
425 |                                 loadingState={loading}
426 |                               />
427 |                             </div>
428 |                           ) : (
429 |                             <button
430 |                               onClick={() => navigate("/login")}
431 |                               className="bg-red-600 hover:bg-red-600/90 text-white w-full px-2 py-3 text-lg font-heading rounded-sm"
432 |                             >
433 |                               <span className="flex items-center justify-center">
434 |                                 <FaLock className="mr-2 text-brand-blue" />
435 |                                 Login to Contact
436 |                               </span>
437 |                             </button>
438 |                           )}
439 |                         </div>
440 |                       </div>
441 |                     )}
442 |                   </div>
443 |                 </div>
444 |               </div>
445 |             </div>
446 |           </div>
447 |           <ToastContainer />
448 |         </div>
449 |       )}
450 |     </>
451 |   );
452 | };
453 | 
454 | export default ListingPage;
455 | 


--------------------------------------------------------------------------------