Demo

client/apis/apiClient.posts.ts

@@ -1,5 +1,5 @@
 import request from 'superagent'
-import { Post } from '../../models/post'
+import { NewPost, Post } from '../../models/post'
 
 const root = '/api/v1/posts'
 
@@ -12,3 +12,7 @@ export async function getSinglePost(id: number) {
   const res = await request.get(`${root}/post/${id}`)
   return res.body
 }
+
+export async function addPost(newPost: NewPost): Promise<void> {
+  await request.post(`${root}/post/`).send(newPost)
+}

client/apis/apiGroup.ts

@@ -1,9 +1,19 @@
 import request from 'superagent'
-import { group } from '../../models/group'
+import { group, member } from '../../models/group'
 
 const rootUrl = '/api/v1/groups'
 
 export async function getAllGroups(): Promise<group[]> {
   const res = await request.get(rootUrl)
   return res.body
 }
+
+export async function getGroupById(id: number): Promise<group> {
+  const res = await request.get(`${rootUrl}/${id}`)
+  return res.body
+}
+
+export async function getGroupMembersById(id: number): Promise<member[]> {
+  const res = await request.get(`${rootUrl}/members/${id}`)
+  return res.body
+}

client/components/AddPost.tsx

@@ -0,0 +1,81 @@
+import { ChangeEvent, useCallback, useState } from 'react'
+import useAddPost from '../hooks/use-add-post'
+import { useNavigate } from 'react-router-dom'
+
+export function AddPost() {
+  const [newPost, setNewPost] = useState('')
+  const [newImage, setNewImage] = useState('')
+  const [currentUser, setCurrentUser] = useState('')
+  // const [timestamp, setTimestamp] = useState()
+  const navigate = useNavigate()
+  const mutation = useAddPost()
+
+  const handleBodyChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setNewPost(e.target.value)
+  }
+
+  const handleImageChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setNewImage(e.target.value)
+  }
+
+  const handleUserChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    setCurrentUser(e.target.value)
+  }
+
+  // const handleTimestamp = (e: ChangeEvent<HTMLSelectElement>) => {
+  //   setTimestamp(Date.now())
+  // }
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault()
+      mutation.mutate({ body: newPost, image: newImage, user_id: currentUser })
+      setNewPost('')
+      setNewImage('')
+      navigate('/')
+    },
+    [mutation, newPost, newImage, navigate, currentUser]
+  )
+
+  return (
+    <>
+      <div className="h-screen flex flex-col items-center justify-center">
+        <form onSubmit={handleSubmit}>
+          <label htmlFor="user_id">Select User: </label>
+          <select
+            className="bg-grey-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            id="user_id"
+            onChange={handleUserChange}
+          >
+            <option value="1">Paige</option>
+            <option value="2">Ida</option>
+            <option value="3">Shaq</option>
+            <option value="4">Chris</option>
+          </select>
+          <br />
+          <label htmlFor="body">Body Text: </label>
+          <input
+            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            placeholder="Say what you feel"
+            onChange={handleBodyChange}
+            value={newPost}
+            id="body"
+          ></input>
+          <br />
+          <label htmlFor="image">Image Link: </label>
+          <input
+            placeholder="Image link here"
+            onChange={handleImageChange}
+            value={newImage}
+            id="image"
+            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          ></input>
+          <br />
+          <button className="bg-blue-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+            Send post
+          </button>
+        </form>
+      </div>
+    </>
+  )
+}

client/components/AllGroups.tsx

@@ -1,5 +1,6 @@
 import { getAllGroups } from '../apis/apiGroup'
 import { useQuery } from '@tanstack/react-query'
+import { Link } from 'react-router-dom'
 
 export function AllGroups() {
   const {
@@ -14,7 +15,7 @@ export function AllGroups() {
     return <h1>Loading...GroupPage</h1>
   }
 
-  if (isError) {
+  if (isError || !groupsData) {
     return <h1>Error</h1>
   }
 
@@ -23,49 +24,51 @@ export function AllGroups() {
       <h1>All groups</h1>
       <div className="p-24 flex flex-wrap items-center justify-center">
         {groupsData.map((group) => (
-          <div
-            key={group.id}
-            className="flex-shrink-0 m-6 relative overflow-hidden mt-auto bg-gradient-to-r from-gray-100 via-[#bce1ff] to-gray-1000 rounded-lg max-w-xs shadow-lg"
-          >
-            <svg
-              className="absolute bottom-0 left-0 mb-8 "
-              viewBox="0 0 375 283"
-              fill="none"
+          <Link key={group.id} to={`/groups/${group.id}`}>
+            <div
+              key={group.id}
+              className="flex-shrink-0 m-6 relative overflow-hidden mt-auto bg-gradient-to-r from-gray-100 via-[#bce1ff] to-gray-1000 rounded-lg max-w-xs shadow-lg"
             >
-              <rect
-                x="159.52"
-                y="175"
-                width="152"
-                height="152"
-                rx="8"
-                transform="rotate(-45 159.52 175)"
-                fill="white"
-              />
-              <rect
-                y="107.48"
-                width="152"
-                height="152"
-                rx="8"
-                transform="rotate(-45 0 107.48)"
-                fill="white"
-              />
-            </svg>
-            <div className="relative pt-10 px-10 flex items-center justify-center">
-              <div className="block absolute w-48 h-48 bottom-0 left-0 -mb-24 ml-3"></div>
-              <img
-                className="relative w-40"
-                src={`/images/icons/${group.image}`}
-                alt={group.name}
-              />
-            </div>
-            <div className="relative text-black px-6 pb-6 mt-6">
-              <div className="flex justify-between">
-                <span className="block font-semibold text-xl">
-                  {group.name}
-                </span>
+              <svg
+                className="absolute bottom-0 left-0 mb-8 "
+                viewBox="0 0 375 283"
+                fill="none"
+              >
+                <rect
+                  x="159.52"
+                  y="175"
+                  width="152"
+                  height="152"
+                  rx="8"
+                  transform="rotate(-45 159.52 175)"
+                  fill="white"
+                />
+                <rect
+                  y="107.48"
+                  width="152"
+                  height="152"
+                  rx="8"
+                  transform="rotate(-45 0 107.48)"
+                  fill="white"
+                />
+              </svg>
+              <div className="relative pt-10 px-10 flex items-center justify-center">
+                <div className="block absolute w-48 h-48 bottom-0 left-0 -mb-24 ml-3"></div>
+                <img
+                  className="relative w-40"
+                  src={`/images/icons/${group.image}`}
+                  alt={group.name}
+                />
+              </div>
+              <div className="relative text-black px-6 pb-6 mt-6">
+                <div className="flex justify-between">
+                  <span className="block font-semibold text-xl">
+                    {group.name}
+                  </span>
+                </div>
               </div>
             </div>
-          </div>
+          </Link>
         ))}
       </div>
     </>

client/components/GroupMemberList.tsx

@@ -0,0 +1,58 @@
+import { useParams } from 'react-router-dom'
+import { getGroupMembersById } from '../apis/apiGroup'
+import { useQuery } from '@tanstack/react-query'
+
+export function GroupMemberList() {
+  const { id } = useParams()
+  const {
+    isLoading,
+    isError,
+    data: memberData,
+  } = useQuery({
+    queryKey: ['member', id],
+    queryFn: () => getGroupMembersById(Number(id)),
+  })
+  console.log(memberData)
+  if (isLoading) {
+    return <h1>Loading...GroupPage</h1>
+  }
+
+  if (isError || !memberData) {
+    return <h1>Error</h1>
+  }
+
+  return (
+    <>
+      <div className="flex flex-col items-center justify-center min-h-screen p-16 bg-slate-200">
+        <h1 className="my-10 font-medium text-3xl sm:text-4xl font-black">
+          Members List
+        </h1>
+        <div className="mb-4"></div>
+        <div className="user-list w-full max-w-lg mx-auto bg-white rounded-xl shadow-xl flex flex-col py-4">
+          {memberData.map((member) => (
+            <div
+              key={member.id}
+              className="user-row flex flex-col items-center justify-between cursor-pointer  p-4 duration-300 sm:flex-row sm:py-4 sm:px-8 hover:bg-[#87c7ea]"
+            >
+              <div className="user flex items-center text-center flex-col sm:flex-row sm:text-left">
+                <div className="avatar-content mb-2.5 sm:mb-0 sm:mr-2.5">
+                  <img
+                    src={`/images/avatars/${member.image}`}
+                    alt={member.image}
+                  />
+                </div>
+                <div className="user-body flex flex-col mb-4 sm:mb-0 sm:mr-4">
+                  <a href="#" className="title font-medium no-underline">
+                    {member.fullName}
+                  </a>
+                  <div className="skills flex flex-col"></div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}
+export default GroupMemberList

client/components/GroupProfilePage.tsx

@@ -0,0 +1,78 @@
+import { useParams } from 'react-router-dom'
+import { getGroupById } from '../apis/apiGroup'
+import { useQuery } from '@tanstack/react-query'
+import GroupMemberList from './GroupMemberList'
+
+export function GroupProfilePage() {
+  const { id } = useParams()
+  const {
+    isLoading,
+    isError,
+    data: groupData,
+  } = useQuery({
+    queryKey: ['group', id],
+    queryFn: () => getGroupById(Number(id)),
+  })
+
+  if (isLoading) {
+    return <h1>Loading...GroupPage</h1>
+  }
+
+  if (isError || !groupData) {
+    return <h1>Error</h1>
+  }
+
+  return (
+    <>
+      <div className="p-24 flex flex-wrap items-center justify-center">
+        <div className="header flex w-full justify-center">
+          <h2 className="font-black pb-10 mb-20 text-5xl text-blue-900 before:block before:absolute before:bg-sky-200  relative before:w-1/3 before:h-1 before:bottom-0 before:left-1/3">
+            {groupData?.name}
+          </h2>
+        </div>
+        <div
+          key={groupData.id}
+          className="flex-shrink-0 m-6 relative overflow-hidden mt-auto bg-gradient-to-r from-gray-100 via-[#bce1ff] to-gray-1000 rounded-lg max-w-xs shadow-lg"
+        >
+          <svg
+            className="absolute bottom-0 left-0 mb-8 "
+            viewBox="0 0 375 283"
+            fill="none"
+          >
+            <rect
+              x="159.52"
+              y="175"
+              width="152"
+              height="152"
+              rx="8"
+              transform="rotate(-45 159.52 175)"
+              fill="white"
+            />
+            <rect
+              y="107.48"
+              width="152"
+              height="152"
+              rx="8"
+              transform="rotate(-45 0 107.48)"
+              fill="white"
+            />
+          </svg>
+          <div className="relative pt-10 px-10 flex items-center justify-center">
+            <div className="block absolute w-48 h-48 bottom-0 left-0 -mb-24 ml-3"></div>
+            <img
+              className="relative w-40"
+              src={`/images/icons/${groupData?.image}`}
+              alt={groupData?.name}
+            />
+          </div>
+          <div className="relative text-black px-6 pb-6 mt-6">
+            <div className="flex justify-between"></div>
+          </div>
+        </div>
+      </div>
+
+      <GroupMemberList />
+    </>
+  )
+}
+export default GroupProfilePage