From 82f0639af6e71058f45f90466bcf641f05e57a6b Mon Sep 17 00:00:00 2001 From: Tim Roberts Date: Fri, 1 Mar 2024 09:17:26 -0500 Subject: [PATCH] Add creation form and show items --- .../Single/components/FeedItem.tsx | 77 +++++++++++++++++++ .../Single/components/FeedItemForm.tsx | 70 +++++++++++++++++ client/src/pages/Communities/Single/index.tsx | 14 +++- client/src/state/domains/communities.ts | 17 ++++ data/communities.go | 9 ++- 5 files changed, 181 insertions(+), 6 deletions(-) create mode 100644 client/src/pages/Communities/Single/components/FeedItem.tsx create mode 100644 client/src/pages/Communities/Single/components/FeedItemForm.tsx diff --git a/client/src/pages/Communities/Single/components/FeedItem.tsx b/client/src/pages/Communities/Single/components/FeedItem.tsx new file mode 100644 index 0000000..c90064e --- /dev/null +++ b/client/src/pages/Communities/Single/components/FeedItem.tsx @@ -0,0 +1,77 @@ +import React, { useEffect } from 'react' +import { useSession } from '@clerk/clerk-react' +import styled from '@emotion/styled' + +import { + CommunityFeedItem, + CommunityMemberAvatarLens, + CommunityMemberIdLens, + CommunityMemberNameLens, + useLazyGetCommunityMemberQuery, +} from '../../../../state/domains/communities' +import { Avatar, Typography } from '@mui/material' + +const Item = styled.aside` + width: 90%; + margin: 0 auto; + padding: 1.5rem; + display: flex; + flex-direction: column; +` + +type Props = CommunityFeedItem & { + communityId: string +} + +const FeedItem = (item: Props) => { + const [getCommunityMember, communityMemberResult] = + useLazyGetCommunityMemberQuery() + + const { session } = useSession() + + useEffect(() => { + const doWork = async () => { + if (session) { + const token = await session.getToken() + + if (token) { + getCommunityMember({ + community: item.communityId, + member: item.author_id, + token, + }) + } + } + } + + if (session) { + doWork() + } + }, [session]) + + const data = communityMemberResult.currentData + + if (!data) { + return 'Loading...' + } + + const member: { [x: string]: any } = { + avatar: CommunityMemberAvatarLens.get(data), + name: CommunityMemberNameLens.get(data), + id: CommunityMemberIdLens.get(data), + } + + return ( + +
+ + {member.name} +
+
+ {item.data.message as any} +
+ + ) +} + +export default FeedItem diff --git a/client/src/pages/Communities/Single/components/FeedItemForm.tsx b/client/src/pages/Communities/Single/components/FeedItemForm.tsx new file mode 100644 index 0000000..490c785 --- /dev/null +++ b/client/src/pages/Communities/Single/components/FeedItemForm.tsx @@ -0,0 +1,70 @@ +import React, { useCallback } from 'react' +import styled from '@emotion/styled' +import { Button, TextField } from '@mui/material' +import { usePostFeedItemMutation } from '../../../../state/domains/communities' +import { useSession } from '@clerk/clerk-react' + +const Form = styled.form` + width: 100%; + margin: 0 auto; + max-width: 1440px; + display: flex; + flex-direction: column; + padding: 1.5rem; + align-items: center; +` + +interface Props { + communityId: string +} + +const FeedItemForm = ({ communityId }: Props) => { + const [submit] = usePostFeedItemMutation() + const { session } = useSession() + const handleFormSubmit: React.FormEventHandler = useCallback( + async (e) => { + e.preventDefault() + if (session) { + const token = await session.getToken() + if (token) { + const formData = new FormData(e.target as any) + const body = { + type: 'text', + data: { + message: formData.get('body'), + }, + } + + const request = { + communityId, + token, + item: body, + } + + submit(request) + + ;(e.target as any).reset() + } + } + }, + [session], + ) + + return ( +
+ + + + ) +} + +export default FeedItemForm diff --git a/client/src/pages/Communities/Single/index.tsx b/client/src/pages/Communities/Single/index.tsx index 49e8721..f92c62d 100644 --- a/client/src/pages/Communities/Single/index.tsx +++ b/client/src/pages/Communities/Single/index.tsx @@ -16,7 +16,9 @@ import { import { Page } from './components/styled' import MemberListItem from './components/MemberListItem' +import FeedItemForm from './components/FeedItemForm' import { useSession } from '@clerk/clerk-react' +import FeedItem from './components/FeedItem' const modalStyle = { position: 'absolute' as 'absolute', @@ -98,14 +100,12 @@ const SingleCommunity = () => { const community = communityByIdResults.currentData! const members = communityMembers.currentData! - const feedItems = communityFeedItemsResults.currentData! + const feedItems = communityFeedItemsResults.currentData! || [] if (!community && !members) { return 'No Community Found' } - - console.log(feedItems, 'FEED ITEMS') - + console.log('feed items', feedItems) return ( @@ -116,6 +116,12 @@ const SingleCommunity = () => { ))} + +
+ {feedItems.map((item) => ( + + ))} +
diff --git a/client/src/state/domains/communities.ts b/client/src/state/domains/communities.ts index fd25d5f..32b043f 100644 --- a/client/src/state/domains/communities.ts +++ b/client/src/state/domains/communities.ts @@ -201,6 +201,22 @@ export const communityApi = createApi({ }, invalidatesTags: ['Communities'], }), + postFeedItem: build.mutation< + CommunityFeedItem, + { item: Partial; token: string; communityId: string } + >({ + query({ item, token, communityId }) { + return { + url: `/${communityId}/items`, + method: 'POST', + body: item, + headers: { + Authorization: `Bearer ${token}`, + }, + } + }, + invalidatesTags: ['CommunityFeedItems'], + }), updateCommunityMemberProfile: build.mutation< CommunityMember, CommunityMemberProfile & { @@ -258,6 +274,7 @@ export const { useLazyGetCommunityMembersQuery, useLazyGetCommunityFeedItemsQuery, + usePostFeedItemMutation, useDeleteCommunityMutation, useGetCommunityMemberQuery, diff --git a/data/communities.go b/data/communities.go index 69ed63b..40b4e60 100644 --- a/data/communities.go +++ b/data/communities.go @@ -2,6 +2,7 @@ package data import ( "fmt" + "log/slog" "mck-p/goact/connections" "strings" "time" @@ -323,11 +324,11 @@ func (communities *ICommunities) GetFeedItemsForCommunity(request GetFeedItemsFo community_feed_items.created_at as createdAt, community_feed_items.updated_at as updatedAt, community_feed_items.data as data, - community_feed_tiems.type as type + community_feed_items.type as type FROM community_feed_items WHERE - _id = $1 + community_feed_items.community_id = $1 ORDER BY created_at %s LIMIT $2 OFFSET $3 @@ -335,7 +336,11 @@ func (communities *ICommunities) GetFeedItemsForCommunity(request GetFeedItemsFo rows, err := connections.Database.Query(sql, request.CommunityId, request.Limit, request.Offset) + slog.Info("This is rows", slog.Any("rows", rows), slog.String("sql", sql), slog.Any("args", request)) + if err != nil { + slog.Info("Error getting rows", slog.Any("error", err), slog.String("sql", sql)) + return []CommunityFeedItem{}, err }