Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: userpage ui #176

Merged
merged 3 commits into from
Jan 14, 2024
Merged

fix: userpage ui #176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3b9e6fe
fix: userpage ui
IrfanshaikH-7 Jan 14, 2024
6b6ad96
fix: merge
IrfanshaikH-7 Jan 14, 2024
0175f58
refactor: added darkmode classes
IrfanshaikH-7 Jan 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/assets/pinkCover.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/core/navbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ const Navbar = () => {
}

return (
<nav className="w-full sticky top-0 backdrop-blur-sm bg-grey-100 bg-opacity-20 z-10 shadow-md py-2 px-4 dark:shadow-gray-600">
<nav className="w-full sticky top-0 backdrop-blur-sm bg-grey-100 bg-opacity-20 z-50 shadow-md py-2 px-4 dark:shadow-gray-600">
<div className="max-w-screen-lg mx-auto flex items-center content-center justify-between h-12">
<Link href={userAuth.creds?.userId ? "/feed" : "/"}>
<Image
Expand Down
83 changes: 78 additions & 5 deletions src/components/pages/user/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
import { useEffect, useState } from "react";
import UserPosts from "./userPosts";
import { getCurrentUser } from "@/backend/auth.api";
import Link from "next/link";
import { Bookmark, Briefcase, Link2, Mail, MapPin, ShoppingBag, Smile, Users } from "react-feather";
import TrendingFeed from "@/components/core/trendingFeed";
import Footer from "@/components/core/footer";
import Image from "next/image";

export default function User({ userId }: { userId: string }) {
const [user, setUser] = useState({
Expand All @@ -19,11 +24,79 @@ export default function User({ userId }: { userId: string }) {

return (
<>
<div className="mx-auto max-w-screen-lg mt-4">
<h1 className="text-xl font-medium text-black dark:text-white">{user && user?.name}</h1>
<h1 className="text-xl font-medium text-black dark:text-white">{user && user?.email}</h1>
<UserPosts userId={userId} />
</div>
<main className="flex sm:flex-row flex-col max-w-6xl mx-auto pt-4 content-center ">
<section className="flex-[5] h-full mt-4 sm:mt-0 px-4">
<div className="h-52 w-full relative -z-[1]">
<Image
src="/assets/pinkCover.jpg"
alt="user"
fill
className="object-center object-cover rounded-md"
/>
</div>
<section className="-mt-20 px-3">
<div className="flex justify-between items-end ">
<Image
src="/assets/user.png"
alt="user"
width={125}
height={125}
className=" border-4 border-white dark:border-slate-800 rounded-full object-contain "
/>
<div className="h-fit flex gap-4">
<Mail
// size={40}
className="h-7 w-7 sm:h-9 sm:w-9 border-2 p-1 rounded-full text-neutral-700 dark:text-neutral-400 border-neutral-700 dark:border-neutral-400"
/>

<button className="text-white text-sm sm:text-xl bg-primary rounded-3xl px-6 py-1">
follow
</button>
</div>
</div>
<div className="">
<div className="py-2">
<h1 className="text-2xl font-bold text-black dark:text-white">
{user && user?.name}
</h1>
<h1 className="text-sm text-neutral-900 dark:text-neutral-200">
{user && user?.email}
</h1>
</div>

<p className="">Software-developer | Python | MERN | Next-Tailwind | Opensource</p>

<div className="space-y-3 text-sm text-neutral-300 pt-4">
<aside className="flex items-center gap-1">
<Briefcase size={12} />
<p>Software Engineer at self</p>
</aside>
<aside className="flex items-center gap-1">
<MapPin size={12} />
<p>Hyderabad</p>
</aside>
<aside className="flex items-center gap-1">
<Link2 size={12} />
<p>htps://www.google.com</p>
</aside>
<aside className="flex items-center gap-1">
<Smile size={12} />
<p>{"Born 1 Jan 2001"}</p>
</aside>
</div>
</div>
</section>

<div className="h-px w-full mt-6 bg-neutral-400" />

<UserPosts userName={user.name} userId={userId} />
</section>

<div className="flex-[2] hidden md:block rounded-md">
<TrendingFeed />
</div>
</main>
<Footer />
</>
);
}
145 changes: 118 additions & 27 deletions src/components/pages/user/userPosts/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,130 @@
import Loader from "@/app/loading";
import { PostInstanceType } from "@/types";
import { Heart, MessageCircle } from "react-feather";
import Image from "next/image";
import { Suspense, useState } from "react";
import { Bookmark, Download, Heart, MessageCircle, Share } from "react-feather";
import { useSelector } from "react-redux";

export default function UserPosts({ userId }: { userId: string }) {
type FormatOnType = "seconds" | "minutes" | "hours" | "days";
interface UserPostsProps {
userId: string;
userName: string;
}

export default function UserPosts({ userId, userName }: UserPostsProps) {
const userPosts = useSelector((store: any) => store.posts.posts).filter(
(post: PostInstanceType) => post.accountId === userId,
);

function createdAtDateFormatter(postCreationTime: string) {
const timeObj = {
seconds: 1000,
minutes: 1000 * 60,
hours: 1000 * 60 * 60,
days: 1000 * 60 * 60 * 24,
postCreatedTime: new Date(postCreationTime),
currentTime: new Date(),
calcTimeDiff(formatOn: FormatOnType) {
const timeDiff = this.currentTime.valueOf() - this.postCreatedTime.valueOf();
return Math.round(timeDiff / this[formatOn]);
},
};

if (timeObj.calcTimeDiff("seconds") < 60) {
return `${timeObj.calcTimeDiff("seconds")}sec`;
} else if (timeObj.calcTimeDiff("minutes") < 60) {
return `${timeObj.calcTimeDiff("minutes")}min`;
} else if (timeObj.calcTimeDiff("hours") <= 24) {
return `${timeObj.calcTimeDiff("hours")}h`;
} else if (timeObj.calcTimeDiff("days") < 365) {
return `${timeObj.calcTimeDiff("days")}d`;
} else {
return `${timeObj.calcTimeDiff("days") / 365}y`;
}
}
console.log(userPosts);
return (
<div className="mt-10">
<div className="grid grid-cols-3 gap-8">
{userId &&
userPosts?.map((post: any, index: number) => (
<div
className="p-4 rounded-md shadow dark:shadow-gray-600 z-10 w-full h-full"
key={index}
>
<p className="mb-4">{post?.postTitle}</p>
<div className="relative flex justify-between items-center">
<p className="flex items-center gap-2 font-bold">
<Heart size={24} />
{post?.likes.length}
</p>
<p className="flex items-center gap-2 font-bold">
<MessageCircle size={24} />
{post?.comments?.length}
</p>
</div>
<>
<main className="w-full h-full">
<Suspense fallback={<Loader />}>
<div className="mt-6">
<div className="grid grid-cols-1 gap-8">
{userId &&
userPosts?.map((post: any, index: number) => (
<div
className="p-4 rounded-md shadow dark:shadow-gray-600 z-10 w-full h-full relative"
key={index}
>
<section className="flex w-full h-full justify-start items-start gap-3 ">
<div className="h-full flex flex-col">
<Image
src="/assets/user.png"
alt="user"
width={40}
height={40}
className="object-contain border p-0.5 rounded-full bg-slate-500"
/>
<div className="my-[2px] w-px h-full self-center bg-neutral-400 dark:bg-neutral-500 rounded-3xl" />
</div>

<section className=" flex h-auto w-full flex-col items-start">
<div className="flex gap-1 text-lg items-baseline">
<p className=" font-semibold">{userName}</p>

<p className="text-base text-neutral-600 dark:text-neutral-400 pl-1">
&#183; {`${createdAtDateFormatter(post?.$createdAt)} ago`}
</p>
</div>

<p className="text-neutral-900 dark:text-neutral-200">{post?.postTitle}</p>
<div className="h-auto w-full relative mt-2">
{post && post?.postImage && post?.postImage[0].length > 0 ? (
<Image
className="w-full h-full mb-4 rounded-md"
src={post?.postImage[0]}
alt=""
width={400}
height={200}
/>
) : null}
</div>

<div className="flex justify-between w-full pt-3 ">
<article className="flex flex-row gap-1 sm:gap-2 items-center transition ease-in-out duration-200 hover:cursor-pointer text-secondary-light dark:text-neutral-200 hover:text-primary">
<Heart className="h-4 w-4 sm:h-6 sm:w-6" />
<p className="text-xs sm:text-base">{post?.likes.length}</p>
</article>

<article className="flex flex-row gap-1 sm:gap-2 items-center transition ease-in-out duration-200 hover:cursor-pointer text-secondary-light dark:text-neutral-200 hover:text-primary">
<MessageCircle className="h-4 w-4 sm:h-6 sm:w-6" />
<p className="text-xs sm:text-base">{post?.comments?.length}</p>
</article>

<article className="flex flex-row gap-1 sm:gap-2 items-center transition ease-in-out duration-200 hover:cursor-pointer text-secondary-light dark:text-neutral-200 hover:text-primary">
<Bookmark className="h-4 w-4 sm:h-6 sm:w-6" />

<p className="text-xs sm:text-base">{post?.likes.length}</p>
</article>
<article className="flex flex-row gap-1 sm:gap-2 items-center transition ease-in-out duration-200 hover:cursor-pointer text-secondary-light dark:text-neutral-200 hover:text-primary">
<Share className="h-4 w-4 sm:h-6 sm:w-6" />
</article>

<article className="flex flex-row gap-1 sm:gap-2 items-center transition ease-in-out duration-200 hover:cursor-pointer text-secondary-light dark:text-neutral-200 hover:text-primary">
<Download className="h-4 w-4 sm:h-6 sm:w-6" />
</article>
</div>
</section>
</section>
</div>
))}
</div>
))}
</div>

{userId && userPosts?.length === 0 && (
<p className="text-center text-xl font-medium">No Posts Yet</p>
)}
</div>
{userId && userPosts?.length === 0 && (
<p className="text-center text-xl font-medium">No Posts Yet</p>
)}
</div>
</Suspense>
</main>
</>
);
}
6 changes: 3 additions & 3 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3162,9 +3162,9 @@ prelude-ls@^1.2.1:
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==

prettier@^3.0.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.1.tgz#babf33580e16c796a9740b9fae551624f7bfeaab"
integrity sha512-qSUWshj1IobVbKc226Gw2pync27t0Kf0EdufZa9j7uBSJay1CC+B3K5lAAZoqgX3ASiKuWsk6OmzKRetXNObWg==
version "3.1.1"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.1.1.tgz#6ba9f23165d690b6cbdaa88cb0807278f7019848"
integrity sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==

prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
Expand Down