Added frontend folder structure.
This commit is contained in:
@@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
|
||||
const Container = ({ children }) => {
|
||||
return (
|
||||
<>
|
||||
<div className="w-full h-auto">{children}</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Container;
|
||||
@@ -0,0 +1,16 @@
|
||||
import React from "react";
|
||||
|
||||
const Message = ({ message }) => {
|
||||
const date = new Date();
|
||||
return (
|
||||
<div className="w-auto h-auto bg-gray-200 rounded-md text-start p-3 mx-4">
|
||||
<p className="">{message}</p>
|
||||
<p className="text-end text-sm ">
|
||||
{date.getDate()}/{date.getMonth()}/{date.getFullYear()}{" "}
|
||||
{date.toLocaleTimeString()}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Message;
|
||||
@@ -0,0 +1,206 @@
|
||||
import React from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
import { BACKEND_URL } from "../constants";
|
||||
|
||||
const Navbar = () => {
|
||||
const user = useSelector((store) => store.user);
|
||||
|
||||
//console.log("User is : ", user);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleLogOut = async () => {
|
||||
const responce = await fetch(`${BACKEND_URL}/api/v1/logout`, {
|
||||
method: "Get",
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
const data = await responce.json();
|
||||
|
||||
//console.log("User Logged out data is : ", data);
|
||||
|
||||
if (data.success == true) {
|
||||
navigate("/user/login");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<nav className="bg-white border-gray-200 dark:bg-gray-900">
|
||||
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
||||
<a
|
||||
href="/"
|
||||
className="flex items-center space-x-3 rtl:space-x-reverse"
|
||||
>
|
||||
<img
|
||||
src="/images/logo.jpg"
|
||||
className="h-9 rounded-full"
|
||||
alt="Flowbite Logo"
|
||||
/>
|
||||
<span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
|
||||
MentorFlux
|
||||
</span>
|
||||
</a>
|
||||
<div className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
|
||||
<button
|
||||
type="button"
|
||||
className="flex text-sm bg-gray-800 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
|
||||
id="user-menu-button"
|
||||
aria-expanded="false"
|
||||
data-dropdown-toggle="user-dropdown"
|
||||
data-dropdown-placement="bottom"
|
||||
>
|
||||
<span className="sr-only">Open user menu</span>
|
||||
<img
|
||||
className="w-8 h-8 rounded-full"
|
||||
src={`${user?.avatar}`}
|
||||
alt="user photo"
|
||||
/>
|
||||
</button>
|
||||
{/* <!-- Dropdown menu --> */}
|
||||
<div
|
||||
className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600 cursor-pointer"
|
||||
id="user-dropdown"
|
||||
>
|
||||
{user?.name !== "Unloggedin User" && (
|
||||
<div className="px-4 py-3">
|
||||
<span className="block text-sm text-gray-900 dark:text-white">
|
||||
{user?.name}
|
||||
</span>
|
||||
<span className="block text-sm text-gray-500 truncate dark:text-gray-400">
|
||||
{user?.email}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ul className="py-2" aria-labelledby="user-menu-button">
|
||||
{user?.name !== "Unloggedin User" && (
|
||||
<>
|
||||
<li>
|
||||
<Link
|
||||
to={"/user/dashboard"}
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
to={"/user/dashboard/settings"}
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||
>
|
||||
Settings
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||
>
|
||||
Earnings
|
||||
</a>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
|
||||
{user?.name === "Unloggedin User" ? (
|
||||
<li>
|
||||
<Link
|
||||
to={"/user/login"}
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
<a
|
||||
onClick={handleLogOut}
|
||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
||||
>
|
||||
Sign out
|
||||
</a>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
data-collapse-toggle="navbar-user"
|
||||
type="button"
|
||||
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
||||
aria-controls="navbar-user"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 17 14"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M1 1h15M1 7h15M1 13h15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
|
||||
id="navbar-user"
|
||||
>
|
||||
<ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
||||
<li>
|
||||
<Link
|
||||
to={"/"}
|
||||
className="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
|
||||
aria-current="page"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>
|
||||
Services
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
@@ -0,0 +1,71 @@
|
||||
import React from "react";
|
||||
|
||||
const Notification = ({ notification }) => {
|
||||
let timeStringToDayName = (dateStr) => {
|
||||
// for getting day name by time string
|
||||
// const dateStr = "2024-09-26T04:31:50.646+00:00";
|
||||
const date = new Date(dateStr);
|
||||
const dayName = date.toLocaleDateString("en-US", { weekday: "long" });
|
||||
//console.log(dayName);
|
||||
return dayName;
|
||||
};
|
||||
|
||||
let timeStringtoRealTime = (utcDateStr) => {
|
||||
// for converting the to get time in am or pm
|
||||
//const utcDateStr = "2024-09-26T04:31:50.646+00:00";
|
||||
const date = new Date(utcDateStr);
|
||||
// India TimeZone is Asia/Kolkata, which is UTC+5:30
|
||||
const options = {
|
||||
timeZone: "Asia/Kolkata",
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
second: "numeric",
|
||||
hour12: true,
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
};
|
||||
|
||||
const istDate = date.toLocaleString("en-US", options);
|
||||
//console.log(istDate); // Output: "September 26, 2024, 10:01:50 AM"
|
||||
return istDate;
|
||||
};
|
||||
|
||||
let { message, timestamp, isRead } = notification;
|
||||
|
||||
const realTimeString = timeStringtoRealTime(timestamp);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-between p-4 bg-white shadow rounded-lg"
|
||||
onClick={() => {
|
||||
isRead = true;
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src="https://placehold.co/40x40"
|
||||
alt="Profile picture of the user who followed you"
|
||||
className="w-10 h-10 rounded-full mr-3"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-gray-900">{message}</p>
|
||||
<p className="text-gray-500">
|
||||
{timeStringToDayName(timestamp)},
|
||||
{realTimeString.substring(21, 26) +
|
||||
" " +
|
||||
realTimeString.substring(30)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<p className="text-gray-500 mr-3">{realTimeString.substring(0, 18)}</p>
|
||||
<span
|
||||
className={`w-3 h-3 bg-blue-600 rounded-full ${isRead && "hidden"}`}
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Notification;
|
||||
Reference in New Issue
Block a user