|
135 | 135 | // };
|
136 | 136 |
|
137 | 137 | // export default Navbar;
|
138 |
| -import React, { useState } from "react"; |
| 138 | +import React, { useState, useEffect } from "react"; |
139 | 139 | import { Link } from "react-router-dom";
|
| 140 | +import axios from "axios"; |
| 141 | +import { useNavigate } from "react-router-dom"; |
| 142 | + |
140 | 143 |
|
141 | 144 | const Navbar = () => {
|
142 | 145 | const [isOpen, setIsOpen] = useState(false);
|
| 146 | + const [userData, setUserData] = useState(); |
| 147 | + const [loading, setLoading] = useState(false); |
| 148 | + |
| 149 | + const navigate = useNavigate(); |
| 150 | + |
| 151 | + useEffect(() => { |
| 152 | + const User = localStorage.getItem("user"); |
| 153 | + const parseUser = JSON.parse(User); |
| 154 | + setUserData(User); |
| 155 | + }, [userData]); |
| 156 | + |
| 157 | + const logOut = () => { |
| 158 | + axios |
| 159 | + .post( |
| 160 | + `https://api.ayushsharma.co.in/api/logout`, |
| 161 | + {}, |
| 162 | + { |
| 163 | + withCredentials: true, |
| 164 | + } |
| 165 | + ) |
| 166 | + .then(function (response) { |
| 167 | + // handle success |
| 168 | + setLoading(false); |
| 169 | + // setMessage(response?.data?.message); |
| 170 | + // openSnackbar(response?.data?.message); |
| 171 | + localStorage.removeItem("user"); |
| 172 | + // Set cookie expiration date to a time in the past |
| 173 | + document.cookie = "jwt=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; |
| 174 | + window.location.reload(true); // hard refresh |
| 175 | + |
| 176 | + navigate("/"); |
| 177 | + }) |
| 178 | + .catch(function (error) { |
| 179 | + // handle error |
| 180 | + setLoading(false); |
| 181 | + // setMessage(error?.response?.data?.message); |
| 182 | + // openSnackbar(error?.response?.data?.message); |
| 183 | + console.log(error?.response?.data?.message); |
| 184 | + }) |
| 185 | + .then(function () { |
| 186 | + localStorage.removeItem("user"); |
| 187 | + localStorage.removeItem("jwt"); |
| 188 | + document.cookie = "jwt=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; |
| 189 | + window.location.reload(true); |
| 190 | + navigate("/"); |
| 191 | + }); |
| 192 | + }; |
143 | 193 |
|
144 | 194 | const toggleMenu = () => {
|
145 | 195 | setIsOpen(!isOpen);
|
@@ -207,12 +257,29 @@ const Navbar = () => {
|
207 | 257 | >
|
208 | 258 | My Post
|
209 | 259 | </Link>
|
210 |
| - <Link |
| 260 | + <div> |
| 261 | + {userData ? ( |
| 262 | + <div |
| 263 | + onClick={logOut} |
| 264 | + className="text-base text-white hover:text-gray-200 block sm:inline-block" |
| 265 | + > |
| 266 | + Log Out |
| 267 | + </div> |
| 268 | + ) : ( |
| 269 | + <Link |
| 270 | + to="/login" |
| 271 | + className="text-base text-white hover:text-gray-200 block sm:inline-block" |
| 272 | + > |
| 273 | + Login |
| 274 | + </Link> |
| 275 | + )} |
| 276 | + </div> |
| 277 | + {/* <Link |
211 | 278 | to="/login"
|
212 | 279 | className="text-base text-white hover:text-gray-200 block sm:inline-block"
|
213 | 280 | >
|
214 | 281 | Login
|
215 |
| - </Link> |
| 282 | + </Link> */} |
216 | 283 | </div>
|
217 | 284 | </div>
|
218 | 285 | </div>
|
|
0 commit comments