-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from alyssa-bruns/demo
Demo
- Loading branch information
Showing
20 changed files
with
529 additions
and
1,199 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
Oops, something went wrong.