Add creation form and show items

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 (
+    <Item>
+      <header>
+        <Avatar src={member.avatar} alt={member.name} />
+        <Typography>{member.name}</Typography>
+      </header>
+      <main>
+        <Typography component="div">{item.data.message as any}</Typography>
+      </main>
+    </Item>
+  )
+}
+
+export default FeedItem

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 (
+    <Form onSubmit={handleFormSubmit}>
+      <TextField
+        name="body"
+        label="What's on your mind?"
+        fullWidth
+        multiline
+        minRows={4}
+        sx={{ marginBottom: '1.5rem' }}
+      />
+      <Button type="submit" variant="contained">
+        Share with Community
+      </Button>
+    </Form>
+  )
+}
+
+export default FeedItemForm

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 (
     <Page>
       <Typography variant="h2" gutterBottom align="center">
@@ -116,6 +116,12 @@ const SingleCommunity = () => {
           <MemberListItem key={i} member={member} />
         ))}
       </List>
+      <FeedItemForm communityId={community._id} />
+      <div>
+        {feedItems.map((item) => (
+          <FeedItem key={item._id} communityId={community._id} {...item} />
+        ))}
+      </div>
       <Button color="secondary" onClick={handleOpen}>
         Delete
       </Button>

client/src/state/domains/communities.ts

@@ -201,6 +201,22 @@ export const communityApi = createApi({
       },
       invalidatesTags: ['Communities'],
     }),
+    postFeedItem: build.mutation<
+      CommunityFeedItem,
+      { item: Partial<CommunityFeedItem>; 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,

data/communities.go

@@ -2,6 +2,7 @@ package data
 
 import (
 	"fmt"
+	"log/slog"
 	"mck-p/goact/connections"
 	"strings"
 	"time"
@@ -323,19 +324,23 @@ 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
 	`, sortOrder)
 
 	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
 	}