Merge pull request #53 from ETLOnline/issue-42-dynamic-profile

Issue-42-dynamic-profile

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "trailingComma": "none",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed"
+}

package.json

@@ -53,7 +53,6 @@
     "react-day-picker": "^8.10.1",
     "react-dom": "^18",
     "react-element-to-jsx-string": "^15.0.0",
-    "react-tagsinput": "^3.20.3",
     "recharts": "^2.14.1",
     "svix": "^1.43.0",
     "tailwind-merge": "^2.5.5",

src/app/(dashboard)/posts/page.tsx

@@ -3,7 +3,11 @@
 import { useState } from "react"
 import PostFeed from "@/src/components/Dashboard/post-feed"
 import CreatePostForm from "@/src/components/Dashboard/create-post-form"
-import { Post, PostFile, PostPoll } from "@/src/components/Dashboard/posts/types/posts-types"
+import {
+  Post,
+  PostFile,
+  PostPoll
+} from "@/src/components/Dashboard/posts/types/posts-types.d"
 
 const samplePosts: (Post | PostFile | PostPoll)[] = [
   {

src/app/(dashboard)/profile/[id]/page.tsx

@@ -6,48 +6,16 @@ import ProfileCalendar from "@/src/components/Dashboard/profile/profile-calendar
 import ProfileRewards from "@/src/components/Dashboard/profile/profile-rewards"
 import ProfileFollowActions from "@/src/components/Dashboard/profile/user/ProfileFollowActions"
 import { Avatar, AvatarFallback, AvatarImage } from "@/src/components/ui/avatar"
-import { Button } from "@/src/components/ui/button"
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
 } from "@/src/components/ui/tabs"
-import { SelectUser } from "@/src/db/schema"
 import { FindUserByUniqueIdAction } from "@/src/server-actions/User/FindUserByUniqueIdAction"
 import { CalendarIcon, StarIcon, TrophyIcon, UserIcon } from "lucide-react"
 import Link from "next/link"
 
-const skillTags = ["React", "Next.js", "TypeScript", "UI/UX", "Node.js"]
-const interests = ["Web Development", "AI", "Open Source", "Tech Writing"]
-const recommendations = [
-  {
-    name: "Jane Doe",
-    text: "An exceptional developer with a keen eye for detail.",
-  },
-  { name: "John Smith", text: "Always delivers high-quality work on time." },
-]
-const rewards = [
-  {
-    title: "Top Contributor",
-    description: "Awarded for outstanding contributions to the team",
-  },
-  {
-    title: "Innovation Champion",
-    description: "Recognized for implementing creative solutions",
-  },
-]
-const activities = [
-  {
-    date: "2023-04-01",
-    description: "Completed the 'Advanced React Patterns' course",
-  },
-  {
-    date: "2023-03-15",
-    description: "Contributed to open-source project 'awesome-ui-components'",
-  },
-]
-
 interface ProfileScreenProps {
   params:{
 		id: string
@@ -82,56 +50,49 @@ export default async function ProfileScreen({ params: { id }, searchParams:{tab}
 				</div>
 				<ProfileFollowActions user={user} />
       </div>
-      <Tabs defaultValue="basic" className="space-y-4" value={tab || 'basic'}>
+      <Tabs defaultValue="basic" className="space-y-4" value={tab || "basic"}>
         <TabsList>
-					<Link href={`/profile/${id}/?tab=basic`}>
-						<TabsTrigger value="basic">
-							<UserIcon className="mr-2 h-4 w-4" />
-							Bio/Basic
-						</TabsTrigger>
-					</Link>
-					<Link href={`/profile/${id}/?tab=rewards`}>
-						<TabsTrigger value="rewards" >
-							<TrophyIcon className="mr-2 h-4 w-4" />
-							Rewards
-						</TabsTrigger>
-					</Link>
-
-					<Link href={`/profile/${id}/?tab=activity`}>
-						<TabsTrigger
-							value="activity"
-						>
-							<StarIcon className="mr-2 h-4 w-4" />
-							Activity
-						</TabsTrigger>
-					</Link>
-
-					<Link href={`/profile/${id}/?tab=calendar`}>
-						<TabsTrigger
-							value="calendar"
-						>
-							<CalendarIcon className="mr-2 h-4 w-4" />
-							Calendar
-						</TabsTrigger>
-					</Link>
+          <Link href={`?tab=basic`}>
+            <TabsTrigger value="basic">
+              <UserIcon className="mr-2 h-4 w-4" />
+              Bio/Basic
+            </TabsTrigger>
+          </Link>
+          <Link href={`?tab=rewards`}>
+            <TabsTrigger value="rewards">
+              <TrophyIcon className="mr-2 h-4 w-4" />
+              Rewards
+            </TabsTrigger>
+          </Link>
+          <Link href={`?tab=activity`}>
+            <TabsTrigger value="activity">
+              <StarIcon className="mr-2 h-4 w-4" />
+              Activity
+            </TabsTrigger>
+          </Link>
+          {/* <Link href={`?tab=calendar`}>
+            <TabsTrigger value="calendar">
+              <CalendarIcon className="mr-2 h-4 w-4" />
+              Calendar
+            </TabsTrigger>
+          </Link> */}
         </TabsList>
         <TabsContent value="basic">
           <ProfileBio
-            skillTags={skillTags}
-            interests={interests}
-            recommendations={recommendations}
+            userId={user.unique_id}
+            userBio={user.bio as string}
             editable={false}
           />
         </TabsContent>
         <TabsContent value="rewards">
-          <ProfileRewards rewards={rewards} />
+          <ProfileRewards userId={user.unique_id} />
         </TabsContent>
         <TabsContent value="activity">
-          <ProfileActivities activities={activities} />
+          <ProfileActivities userId={user.unique_id} />
         </TabsContent>
-        <TabsContent value="calendar">
+        {/* <TabsContent value="calendar">
           <ProfileCalendar />
-        </TabsContent>
+        </TabsContent> */}
       </Tabs>
     </div>
   )

src/app/(dashboard)/profile/page.tsx

@@ -1,12 +1,18 @@
-import ProfileScreen from '@/src/components/Dashboard/profile/ProfileScreen'
-import React, { Suspense } from 'react'
+import ProfileScreen from "@/src/components/Dashboard/profile/ProfileScreen"
+import { Suspense } from "react"
 
-const page = () => {
+interface ProfilePageProps {
+  searchParams: {
+    tab?: string
+  }
+}
+
+const ProfilePage: React.FC<ProfilePageProps> = ({ searchParams: { tab } }) => {
   return (
     <Suspense>
-      <ProfileScreen />
+      <ProfileScreen tab={tab} />
     </Suspense>
   )
 }
 
-export default page
+export default ProfilePage

src/app/(dashboard)/spaces/page.tsx

@@ -6,7 +6,7 @@ import {
   Post,
   PostFile,
   PostPoll
-} from "@/src/components/Dashboard/posts/types/posts-types"
+} from "@/src/components/Dashboard/posts/types/posts-types.d"
 import {
   Card,
   CardContent,

src/components/Dashboard/Spaces/CommunityStatsCard.tsx

@@ -1,5 +1,5 @@
 import { Card, CardTitle, CardHeader, CardContent } from "../../ui/card"
-import { Stat } from "./types/spaces-types"
+import { Stat } from "./types/spaces-types.d"
 
 type CommunityStatsProps = {
   stats: Stat[]

src/components/Dashboard/Spaces/SpacesStats.tsx

@@ -5,7 +5,7 @@ import TrendingTopicsCard from "./TrendingTopicsCard"
 import UpcomingEventsCard from "./UpcomingEventsCard"
 import { useDetectBreakpoint } from "@/src/hooks/useBreakpoint"
 import { MessageCircle, Users } from "lucide-react"
-import { Event, Topic, Stat } from "./types/spaces-types"
+import { Event, Topic, Stat } from "./types/spaces-types.d"
 
 const upcomingEvents: Event[] = [
   { name: "TechConf 2023", date: "2023-09-15" },
@@ -45,9 +45,9 @@ const SpacesStats = () => {
   return (
     !isMobileOrTab && (
       <aside className="space-y-4 space-info pt-[128px] mt-[-128px] sticky top-[16px]">
-          <TrendingTopicsCard topics={trendingTopics} />
-          <UpcomingEventsCard events={upcomingEvents} />
-          <CommunityStatsCard stats={stats} />
+        <TrendingTopicsCard topics={trendingTopics} />
+        <UpcomingEventsCard events={upcomingEvents} />
+        <CommunityStatsCard stats={stats} />
       </aside>
     )
   )

src/components/Dashboard/Spaces/TrendingTopicsCard.tsx

@@ -4,7 +4,7 @@ import { CardTitle } from "../../ui/card"
 import { CardContent } from "../../ui/card"
 import { Badge } from "../../ui/badge"
 import { TrendingUp } from "lucide-react"
-import { Topic } from "./types/spaces-types"
+import { Topic } from "./types/spaces-types.d"
 
 type TendingTopicProps = {
   topics: Topic[]

src/components/Dashboard/Spaces/UpcomingEventsCard.tsx

@@ -1,7 +1,7 @@
 import { Badge } from "../../ui/badge"
 import { Calendar } from "../../ui/calendar"
 import { Card, CardHeader, CardTitle, CardContent } from "../../ui/card"
-import { Event } from "./types/spaces-types"
+import { Event } from "./types/spaces-types.d"
 
 type UpcomingEventsProps = {
   events: Event[]

src/components/Dashboard/create-post-form.tsx

@@ -24,7 +24,13 @@ import {
   SelectValue
 } from "@/src/components/ui/select"
 import { Textarea } from "../ui/textarea"
-import { NewPost, Post, PostFile, PostPoll, PostType } from "./posts/types/posts-types"
+import {
+  NewPost,
+  Post,
+  PostFile,
+  PostPoll,
+  PostType
+} from "./posts/types/posts-types.d"
 import CreatePostInput from "./posts/create-post-input"
 
 type Props = {

src/components/Dashboard/post-feed.tsx

@@ -4,8 +4,7 @@ import FilePost from "./posts/post-file"
 import ImagePost from "./posts/post-image"
 import PollPost from "./posts/post-poll"
 import TextPost from "./posts/post-text"
-import { Post, PostFile, PostPoll } from "./posts/types/posts-types"
-
+import { Post, PostFile, PostPoll } from "./posts/types/posts-types.d"
 
 type Props = {
   posts: (Post | PostFile | PostPoll)[]

src/components/Dashboard/posts/create-post-input.tsx

@@ -1,6 +1,6 @@
 import { Textarea } from "@/src/components/ui/textarea"
 import { Input } from "@/src/components/ui/input"
-import { NewPost, PostType } from "./types/posts-types"
+import { NewPost, PostType } from "./types/posts-types.d"
 
 type Props = {
   type: PostType

src/components/Dashboard/posts/post-comment-form.tsx

@@ -4,15 +4,15 @@ import { Button } from "@/src/components/ui/button"
 import { useState } from "react"
 import { Input } from "@/src/components/ui/input"
 import { Avatar, AvatarFallback, AvatarImage } from "@/src/components/ui/avatar"
-import { Post, PostFile, PostPoll } from "./types/posts-types"
+import { Post, PostFile, PostPoll } from "./types/posts-types.d"
 
 type Props = {
   posts: (Post | PostFile | PostPoll)[]
   setPosts: (posts: Post[]) => void
   postId: string
 }
 
-const PostCommentForm: React.FC<Props> = ({posts, setPosts, postId}) => {
+const PostCommentForm: React.FC<Props> = ({ posts, setPosts, postId }) => {
   const [newComment, setNewComment] = useState<{ [key: string]: string }>({})
 
   const handleAddComment = (postId: string) => {
@@ -33,7 +33,12 @@ const PostCommentForm: React.FC<Props> = ({posts, setPosts, postId}) => {
       }
       return post
     })
-    setPosts(updatedPosts.filter((post): post is Post => 'content' in post && typeof post.content === 'string'))
+    setPosts(
+      updatedPosts.filter(
+        (post): post is Post =>
+          "content" in post && typeof post.content === "string"
+      )
+    )
     setNewComment({ ...newComment, [postId]: "" })
   }
 

src/components/Dashboard/posts/post-comments.tsx

@@ -1,5 +1,5 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/src/components/ui/avatar"
-import { Comment } from "./types/posts-types"
+import { Comment } from "./types/posts-types.d"
 
 type Props = {
   comment: Comment

src/components/Dashboard/posts/post-file.tsx

@@ -1,10 +1,10 @@
-import { Post, Comment, PostFile, PostPoll } from "./types/posts-types"
+import { Post, Comment, PostFile, PostPoll } from "./types/posts-types.d"
 import { Avatar, AvatarFallback, AvatarImage } from "@/src/components/ui/avatar"
 import {
   Card,
   CardContent,
   CardFooter,
-  CardHeader,
+  CardHeader
 } from "@/src/components/ui/card"
 import { Badge } from "@/src/components/ui/badge"
 import { Separator } from "@/src/components/ui/separator"
@@ -19,16 +19,13 @@ type Props = {
   setPosts: (posts: (Post | PostFile | PostPoll)[]) => void
 }
 
-const FilePost: React.FC<Props> = ({post, posts, setPosts}) => {
+const FilePost: React.FC<Props> = ({ post, posts, setPosts }) => {
   return (
     <Card className="bg-background shadow-lg">
       <CardHeader>
         <div className="flex items-center space-x-4">
           <Avatar>
-            <AvatarImage
-              src={post.author.avatar}
-              alt={post.author.name}
-            />
+            <AvatarImage src={post.author.avatar} alt={post.author.name} />
             <AvatarFallback>{post.author.name[0]}</AvatarFallback>
           </Avatar>
           <div>
@@ -53,21 +50,14 @@ const FilePost: React.FC<Props> = ({post, posts, setPosts}) => {
         </div>
       </CardContent>
       <CardFooter className="flex flex-col items-start space-y-4">
-        <PostInteractions
-          likes={post.likes}
-          comments={post.comments.length}
-        />
+        <PostInteractions likes={post.likes} comments={post.comments.length} />
         <Separator />
         <div className="w-full space-y-4">
           {post.comments.map((comment: Comment) => (
             <PostComments key={comment.id} comment={comment} />
           ))}
         </div>
-        <PostCommentForm
-          posts={posts}
-          setPosts={setPosts}
-          postId={post.id}
-        />
+        <PostCommentForm posts={posts} setPosts={setPosts} postId={post.id} />
       </CardFooter>
     </Card>
   )

src/components/Dashboard/posts/post-image.tsx

@@ -1,10 +1,10 @@
-import { Post, Comment, PostFile, PostPoll } from "./types/posts-types"
+import { Post, Comment, PostFile, PostPoll } from "./types/posts-types.d"
 import { Avatar, AvatarFallback, AvatarImage } from "@/src/components/ui/avatar"
 import {
   Card,
   CardContent,
   CardFooter,
-  CardHeader,
+  CardHeader
 } from "@/src/components/ui/card"
 import { Badge } from "@/src/components/ui/badge"
 import { Separator } from "@/src/components/ui/separator"