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.

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

Feat: Umamin Social & Umamin Partners #233

Open
wants to merge 24 commits into
base: dev
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
a7c7ba6
chore: add schema for post and upvote
joshxfi Aug 16, 2024
f367c6f
Merge branch 'dev' of github.com:omsimos/umamin into social
joshxfi Aug 18, 2024
5ff3b2b
feat: personal user profile
hyamero Aug 20, 2024
9b597aa
feat: post form ui
hyamero Aug 20, 2024
cd12cd4
chore: post design adjustments
hyamero Aug 20, 2024
7b1ee67
feat: nested comment ui design
hyamero Aug 22, 2024
50f7cc5
feat: add shared package for reused pages
joshxfi Aug 25, 2024
df71510
feat(partners): setup graphql server
joshxfi Aug 18, 2024
0098122
feat(partners): display messages
joshxfi Aug 18, 2024
94c8d0c
fix(partners): add signout action in btn
joshxfi Aug 18, 2024
3e3a801
chore(partners): adjust limit for messages
joshxfi Aug 25, 2024
63ba776
fix: resolve lockfile conflict
joshxfi Aug 25, 2024
cdd506a
feat: share authenticaton pages
joshxfi Aug 31, 2024
d183a4b
chore: move shared utils to package
joshxfi Aug 31, 2024
8489e49
chore: implement shared routes in www
joshxfi Aug 31, 2024
524b170
chore: upgrade turbo and pnpm
joshxfi Aug 31, 2024
daa8695
chore: upgrade deps
joshxfi Sep 1, 2024
8bb66cf
chore: upgrade graphql yoga dependencies
joshxfi Sep 2, 2024
77915ba
fix: update lockfile
joshxfi Sep 2, 2024
cde63e4
chore: upgrade next deps
joshxfi Sep 5, 2024
19abe96
chore: upgrade deps
joshxfi Sep 17, 2024
abec2b7
fix: move actions to server route in shared
joshxfi Sep 17, 2024
86af98b
chore: add cn utils in shared
joshxfi Sep 17, 2024
663c87a
chore: add className in share auth pages
joshxfi Sep 17, 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
Prev Previous commit
Next Next commit
feat: nested comment ui design
  • Loading branch information
hyamero committed Aug 22, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 7b1ee67b49311c4c5501913dd380a353facf9397
32 changes: 27 additions & 5 deletions apps/social/src/app/components/feed.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { getSession } from "@/lib/auth";
import PostForm from "../post/components/post-form";
import { PostCard } from "./post-card";
import { PostCard, PostCardWithComment } from "./post-card";

export const userPlaceholder = [
{
@@ -30,18 +31,39 @@ export const userPlaceholder = [
likes: 7,
comments: 4,
},
{
id: "C-r5lAwpJUg",
imageUrl:
"https://lh3.googleusercontent.com/a/ACg8ocKpLSOuzPnPwOYTFC88ENWUU_7ieMdwtQZ9UzkqCJaRbnpUELk=s96-c",
username: "dale",
displayName: "Dale Hyamero",
createdAt: 1718342984,
content:
"Next generation open-source platform for sending and receiving encrypted anonymous messages. Umamin v2.0 requires a new account that can be used across the platform.",
isLiked: false,
isVerified: true,
likes: 10,
comments: 6,
},
];

export function Feed() {
export async function Feed() {
const { user } = await getSession();

return (
<main>
<main className="pb-40">
<section className="pt-6 w-full max-w-xl mx-auto bg-background border-muted">
<PostForm />

<div className="border-y space-y-6 pt-6 bg-card sm:rounded-md sm:border-x">
<div className="border-y space-y-6 pt-6 bg-muted/20 sm:rounded-md sm:border-x">
{userPlaceholder.map((props) => (
<PostCard key={props.createdAt} {...props} />
<PostCard key={props.createdAt} {...props} className="border-b" />
))}
<PostCardWithComment
{...userPlaceholder}
sessionImage={user?.imageUrl}
/>
<PostCard {...userPlaceholder[2]!} />
</div>
</section>
</main>
114 changes: 112 additions & 2 deletions apps/social/src/app/components/post-card.tsx
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import {
} from "@umamin/ui/components/avatar";
import { cn } from "@umamin/ui/lib/utils";
import { shortTimeAgo } from "@/lib/utils";
import { Input } from "@umamin/ui/components/input";
import { BadgeCheck, Heart, MessageCircle, ScanFace } from "lucide-react";

type Props = {
@@ -19,11 +20,18 @@ type Props = {
isVerified: boolean;
likes: number;
comments: number;
className?: string;
sessionImage?: string;
};

export function PostCard(props: Props) {
return (
<div className="flex space-x-3 container border-b last-of-type:border-b-0 border-muted pb-6 text-[15px]">
<div
className={cn(
props.className,
"flex space-x-3 container last-of-type:border-b-0 border-muted pb-6 text-[15px]"
)}
>
<Avatar>
<AvatarImage src={props.imageUrl} alt="User avatar" />
<AvatarFallback>
@@ -82,7 +90,7 @@ export function PostCard(props: Props) {

export function PostCardMain(props: Props) {
return (
<div className="text-15px px-7 container border-x-0 sm:border-x border border-muted py-6 bg-card sm:rounded-md sm:px-6">
<div className="px-7 container border-x-0 sm:border-x border border-muted py-6 bg-muted/50 sm:rounded-md sm:px-6">
<div className="flex justify-center gap-3">
<Avatar>
<AvatarImage src={props.imageUrl} alt="User avatar" />
@@ -140,3 +148,105 @@ export function PostCardMain(props: Props) {
</div>
);
}

export function PostCardWithComment(
props: Props[] & { sessionImage?: string | null }
) {
const tempData = { ...props[1]! };

return (
<div className="relative pb-6 border-b">
<PostCard {...props[0]!} className="border-b-0 z-10 relative" />

{/* <PostCard {...props[1]!} className="mt-6" /> */}
<div className="h-[85%] w-[3px] absolute top-0 left-9 bg-muted" />

<div
className={cn(
tempData.className,
"flex space-x-3 container last-of-type:border-b-0 border-muted pb-6 text-[15px]"
)}
>
<Avatar>
<AvatarImage src={tempData.imageUrl} alt="User avatar" />
<AvatarFallback>
<ScanFace />
</AvatarFallback>
</Avatar>

<div className="w-full bg-muted/50 p-4 rounded-md">
<div className="flex justify-between">
<div className="flex items-center space-x-1">
<Link
href={`/user/${tempData.username}`}
className="font-semibold hover:underline"
>
{tempData.displayName}
</Link>

{tempData.isVerified && (
<BadgeCheck className="w-4 h-4 text-pink-500" />
)}
<span className="text-muted-foreground">
@{tempData.username}
</span>
</div>

<p className="text-muted-foreground text-xs">
{shortTimeAgo(tempData.createdAt)}
</p>
</div>

<p className=" mt-1">{tempData.content}</p>

<div className="flex items-center space-x-4 text-muted-foreground mt-4">
<div
className={cn("flex space-x-1 items-center", {
"text-pink-500": tempData.isLiked,
})}
>
<Heart
className={cn("h-5 w-5", {
"fill-pink-500": tempData.isLiked,
})}
/>
<span>{tempData.likes}</span>
</div>

<div className="flex space-x-1 items-center">
<Link href={`/post/${tempData.id}`}>
<MessageCircle className="h-5 w-5" />
</Link>
<span>{tempData.comments}</span>
</div>
</div>
</div>
</div>

<div className=" flex gap-2 w-full container">
<Avatar>
<AvatarImage src={props.sessionImage!} alt="User avatar" />
<AvatarFallback>
<ScanFace />
</AvatarFallback>
</Avatar>
<Link
href={`/post/${props[1]?.id}`}
className="items-center space-x-2 w-full self-center cursor-pointer"
>
<Input
id="message"
required
maxLength={500}
placeholder="Leave a reply..."
className="pointer-events-none focus-visible:ring-transparent text-sm rounded-full bg-muted/50 caret-pink-300"
autoComplete="off"
/>
<p className="text-muted-foreground text-sm mt-2">
View more comments
</p>
</Link>
</div>
</div>
);
}
63 changes: 18 additions & 45 deletions apps/social/src/app/post/[id]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { getSession } from "@/lib/auth";
import ReplyForm from "../components/reply-form";
import { PostCard, PostCardMain } from "@/app/components/post-card";
import {
PostCard,
PostCardMain,
PostCardWithComment,
} from "@/app/components/post-card";
import { userPlaceholder } from "@/app/components/feed";

const postData = {
id: "C-r5lAwpJUg",
@@ -18,49 +23,6 @@ const postData = {
};

const repliesData = [
{
id: "C-r5lAwpJUg",
imageUrl:
"https://lh3.googleusercontent.com/a/ACg8ocJf40m8VVe3wNxhgBe11Bm7ukLSPeR0SDPPg6q8wq6NYRZtCYk=s96-c",
username: "josh",
displayName: "Josh Daniel",
createdAt: 1718342984,
content:
"We're building Umamin Social, a new platform to connect the community. Coming soon! 🚀",
isLiked: false,
isVerified: false,
likes: 7,
comments: 4,
},

{
id: "C-r5lAwpJUg",
imageUrl:
"https://lh3.googleusercontent.com/a/ACg8ocKpLSOuzPnPwOYTFC88ENWUU_7ieMdwtQZ9UzkqCJaRbnpUELk=s96-c",
username: "dale",
displayName: "Dale Hyamero",
createdAt: 1718342984,
content:
"Next generation open-source platform for sending and receiving encrypted anonymous messages. Umamin v2.0 requires a new account that can be used across the platform.",
isLiked: false,
isVerified: true,
likes: 10,
comments: 6,
},
{
id: "C-r5lAwpJUg",
imageUrl:
"https://lh3.googleusercontent.com/a/ACg8ocJf40m8VVe3wNxhgBe11Bm7ukLSPeR0SDPPg6q8wq6NYRZtCYk=s96-c",
username: "josh",
displayName: "Josh Daniel",
createdAt: 1718342984,
content:
"We're building Umamin Social, a new platform to connect the community. Coming soon! 🚀",
isLiked: false,
isVerified: false,
likes: 7,
comments: 4,
},
{
id: "C-r5lAwpJUg",
imageUrl:
@@ -90,7 +52,18 @@ export default async function Post() {

<div className="space-y-6">
{repliesData.map((reply) => {
return <PostCard key={reply.createdAt} {...reply} />;
return (
<PostCard key={reply.createdAt} {...reply} className="border-b" />
);
})}
<PostCardWithComment
{...userPlaceholder}
sessionImage={user?.imageUrl}
/>
{repliesData.map((reply) => {
return (
<PostCard key={reply.createdAt} {...reply} className="border-b" />
);
})}
</div>
</main>