feat(apps/kampus): Add pano home page (#570)

# Description Epic: #566 This PR is in progress but still open to review :) --------- Co-authored-by: Umut Sirin <[email protected]>
kamp-us · Jul 30, 2023 · d524b01 · d524b01
1 parent 1716944
commit d524b01
Show file tree

Hide file tree

Showing 16 changed files with 255 additions and 103 deletions.
diff --git a/apps/kampus/app/layout.tsx b/apps/kampus/app/layout.tsx
@@ -1,21 +1,26 @@
+import { type ReactNode } from "react";
 import { Inter } from "next/font/google";
 
 import { RelayEnvironmentProvider } from "~/features/relay/RelayEnvironmentProvider";
 
 import "./globals.css";
 
+import { ThemeProvider } from "@kampus/ui-next";
+
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
   title: "kamp.us",
   description: "topluluk",
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
       <body className={inter.className}>
-        <RelayEnvironmentProvider>{children}</RelayEnvironmentProvider>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <RelayEnvironmentProvider>{children}</RelayEnvironmentProvider>
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/...p/pano/features/filter/PanoFilterLink.tsx → ...o/features/post-filter/PanoFilterLink.tsx b/...p/pano/features/filter/PanoFilterLink.tsx → ...o/features/post-filter/PanoFilterLink.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-import { type PanoPostFilterType } from "~/app/pano/features/filter/utils";
+import { type PanoPostFilterType } from "~/app/pano/features/post-filter/utils";
 
 const createQueryString = (key: string, value: string) => {
   const searchParams = new URLSearchParams();

diff --git a/.../pano/features/filter/PostSortFilters.tsx → .../features/post-filter/PostSortFilters.tsx b/.../pano/features/filter/PostSortFilters.tsx → .../features/post-filter/PostSortFilters.tsx
@@ -2,12 +2,14 @@
 
 import { redirect, useSearchParams } from "next/navigation";
 
-import { PanoFilterLink } from "~/app/pano/features/filter/PanoFilterLink";
+import { ThemeToggle } from "@kampus/ui-next";
+
+import { PanoFilterLink } from "~/app/pano/features/post-filter/PanoFilterLink";
 import {
   DEFAULT_FILTER_PATH,
   filters,
   isPanoPostSortFilter,
-} from "~/app/pano/features/filter/utils";
+} from "~/app/pano/features/post-filter/utils";
 
 export const PostSortFilters = () => {
   const searchParams = useSearchParams();
@@ -18,12 +20,13 @@ export const PostSortFilters = () => {
   }
 
   return (
-    <div className={"flex space-x-2"}>
+    <div className="flex items-center space-x-2">
       {Object.entries(filters).map(([query, label]) => (
         <PanoFilterLink key={query} query={query} activeQuery={filterQuery}>
           {label}
         </PanoFilterLink>
       ))}
+      <ThemeToggle />
     </div>
   );
 };
diff --git a/.../kampus/app/pano/features/filter/utils.ts → ...us/app/pano/features/post-filter/utils.ts b/.../kampus/app/pano/features/filter/utils.ts → ...us/app/pano/features/post-filter/utils.ts
diff --git a/apps/kampus/app/pano/features/post-list/MoreOptions.tsx b/apps/kampus/app/pano/features/post-list/MoreOptions.tsx
@@ -0,0 +1,61 @@
+import { MoreHorizontal } from "lucide-react";
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@kampus/ui-next";
+
+interface Props {
+  post: Post;
+  shareUrl: string;
+}
+
+type Post = {
+  __typename?: "PanoPost";
+  content: string;
+  createdAt: string;
+  id: string;
+  owner: string;
+  title: string;
+  url: string;
+};
+
+export const MoreOptionsDropdown = ({ post, shareUrl }: Props) => {
+  // const user = useUserContext();
+  console.log(post, shareUrl);
+
+  const ownerItems: JSX.Element[] = [];
+  // if (canUserEdit(user, post)) {
+  //   ownerItems.push(
+  //     <Item onSelect={() => navigate(`/posts/${post.id}/edit`)} key="edit">
+  //       Düzenle
+  //     </Item>
+  //   );
+  //   ownerItems.push(
+  //     <Item onSelect={handleOpen} key="delete">
+  //       Sil
+  //     </Item>
+  //   );
+  //   ownerItems.push(<DropdownMenuSeparator key="separator" />);
+  // }
+
+  // // FIXME: below appears to be redundant, is it?
+  // const menuItems = [...ownerItems];
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button className="h-5 p-1" variant="ghost">
+          <MoreHorizontal size="16" aria-label="Daha fazla seçenek" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        {ownerItems}
+        <DropdownMenuItem>Adresi kopyala</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/apps/kampus/app/pano/features/post-list/PostItem.tsx b/apps/kampus/app/pano/features/post-list/PostItem.tsx
@@ -0,0 +1,56 @@
+import NextLink from "next/link";
+
+import { cn } from "@kampus/ui-next/utils";
+
+import { MoreOptionsDropdown } from "./MoreOptions";
+import { UpvoteButton } from "./PostUpvoteButton";
+
+type Post = {
+  __typename?: "PanoPost";
+  content: string;
+  createdAt: string;
+  id: string;
+  owner: string;
+  title: string;
+  url: string;
+};
+
+type PostItemProps = {
+  post: Post;
+  showContent?: boolean;
+};
+
+interface LinkProps {
+  href: string;
+  title: string;
+  className?: string;
+}
+
+const Link = ({ href, title, className }: LinkProps) => {
+  return (
+    <NextLink className={cn("text-muted-foreground hover:underline", className)} href={href}>
+      {title}
+    </NextLink>
+  );
+};
+export const PostItem = (props: PostItemProps) => {
+  return (
+    <div className="mr-1 flex h-full gap-1 border-l-2">
+      <div className="ml-1 flex h-full">
+        <UpvoteButton upvoteCount={5} isUpvoted={false} disabled={false} isVoting={false} />
+      </div>
+      <div className="flex w-full flex-col justify-center">
+        <div className="flex items-center gap-1 align-baseline">
+          <Link title={props.post.title} href={props.post.url} />
+          <Link className="text-sm" title="wow.sh" href={props.post.url} />
+        </div>
+        <div className="flex items-center gap-1 text-sm">
+          <div>@{props.post.owner} |</div>
+          <div>{<Link title="0 yorum" href={`/pano/post/${props.post.id}/`} />} |</div>
+          <div>{props.post.createdAt} |</div>
+          <MoreOptionsDropdown post={props.post} shareUrl={props.post.url} />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/kampus/app/pano/features/post-list/PostList.tsx b/apps/kampus/app/pano/features/post-list/PostList.tsx
@@ -0,0 +1,27 @@
+import { PostItem } from "./PostItem";
+
+type Post = {
+  __typename?: "PanoPost";
+  content: string;
+  createdAt: string;
+  id: string;
+  owner: string;
+  title: string;
+  url: string;
+};
+
+interface PostListProps {
+  posts: Post[];
+}
+
+export const PostList = (props: PostListProps) => {
+  const { posts } = props;
+
+  return (
+    <div className="flex flex-col gap-3">
+      {posts.map((post) => {
+        return <PostItem key={post.id} post={post} />;
+      })}
+    </div>
+  );
+};
diff --git a/apps/kampus/app/pano/features/post-list/PostUpvoteButton.tsx b/apps/kampus/app/pano/features/post-list/PostUpvoteButton.tsx
@@ -0,0 +1,26 @@
+import { Triangle } from "lucide-react";
+
+import { Button } from "@kampus/ui-next";
+import { cn } from "@kampus/ui-next/utils";
+
+interface UpvoteProps {
+  isUpvoted: boolean;
+  upvoteCount: number;
+  isVoting: boolean;
+  disabled?: boolean;
+}
+
+export const UpvoteButton = (props: UpvoteProps) => {
+  const upvoteStyle = props.isUpvoted ? "fill-primary" : "fill-none";
+  const opacity = props.isVoting ? "opacity-50" : "opacity-100";
+  const combinedStyle = cn(upvoteStyle, opacity);
+
+  return (
+    <Button className="flex h-full items-center pt-3" variant="ghost">
+      <div className="flex flex-col items-center justify-center">
+        <Triangle className={combinedStyle} size={12} />
+        {`${props.upvoteCount}`}
+      </div>
+    </Button>
+  );
+};
diff --git a/apps/kampus/app/pano/layout.tsx b/apps/kampus/app/pano/layout.tsx
@@ -0,0 +1,11 @@
+export default function PanoLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <section
+      aria-label="PanoLayout"
+      role="contentinfo"
+      className="bg-background container mx-auto max-w-5xl py-10"
+    >
+      {children}
+    </section>
+  );
+}
diff --git a/apps/kampus/app/pano/page.tsx b/apps/kampus/app/pano/page.tsx
@@ -1,6 +1,6 @@
 import { redirect } from "next/navigation";
 
-import { DEFAULT_FILTER_PATH } from "~/app/pano/features/filter/utils";
+import { DEFAULT_FILTER_PATH } from "~/app/pano/features/post-filter/utils";
 
 export default function PanoHome() {
   redirect(DEFAULT_FILTER_PATH);

diff --git a/apps/kampus/app/pano/posts/page.tsx b/apps/kampus/app/pano/posts/page.tsx
@@ -1,22 +1,42 @@
-import { PostSortFilters } from "~/app/pano/features/filter/PostSortFilters";
+import { PostSortFilters } from "~/app/pano/features/post-filter/PostSortFilters";
+import { PostList } from "../features/post-list/PostList";
 
-export default function PostsPage() {
-  const posts = [
-    { id: 1, title: "Post1" },
-    { id: 2, title: "Post2" },
-    { id: 3, title: "Post3" },
-  ];
+type Post = {
+  __typename?: "PanoPost";
+  content: string;
+  createdAt: string;
+  id: string;
+  owner: string;
+  title: string;
+  url: string;
+};
+
+const posts: Post[] = [
+  {
+    __typename: "PanoPost",
+    content: "Muthis",
+    createdAt: "1 ay once",
+    id: "1",
+    owner: "Can",
+    title: "Can'in muthis postu",
+    url: "wow.sh",
+  },
+  {
+    __typename: "PanoPost",
+    content: "Yuppi",
+    createdAt: "1 hafta once",
+    id: "2",
+    owner: "Vladik",
+    title: "Vladik'in muthis postu",
+    url: "https://wow.sh",
+  },
+];
 
+export default function PostsPage() {
   return (
-    <div>
+    <div className="flex flex-col gap-4">
       <PostSortFilters />
-      {posts.map((post) => {
-        return (
-          <div key={post.id}>
-            <a href={`/pano/post/${post.id}`}>{post.title}</a>
-          </div>
-        );
-      })}
+      <PostList posts={posts} />
     </div>
   );
 }
diff --git a/apps/ui/stories/SocialMediaButtons.stories.tsx b/apps/ui/stories/SocialMediaButtons.stories.tsx
diff --git a/packages/ui/components/index.ts b/packages/ui/components/index.ts
@@ -1,11 +1,19 @@
 export * from "./alert-dialog";
+export * from "./avatar";
+export * from "./button";
+export * from "./dialog";
+export * from "./dropdown-menu";
 export * from "./input-with-button";
 export * from "./input";
-export * from "./button";
-export * from "./top-nav";
+export * from "./label";
+export * from "./loading";
+export * from "./select";
+export * from "./separator";
+export * from "./textarea";
 export * from "./theme-provider";
 export * from "./theme-toggle";
-export * from "./user-avatar";
 export * from "./time-ago";
-export * from "./social-media-buttons";
-export * from "./loading";
+export * from "./toast";
+export * from "./top-nav";
+export * from "./use-toast";
+export * from "./user-avatar";