Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 2a9d720

Browse files
pbteja1998pbteja1998
committed
Allow the user to edit an update
1 parent ad17a1f commit 2a9d720

File tree

3 files changed

+329
-106
lines changed

3 files changed

+329
-106
lines changed

‎src/components/HomePageFeed.tsx

Lines changed: 151 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
import { Avatar } from '@/ui'
1+
import { Avatar, Menu } from '@/ui'
22
import {
33
ChatCenteredDots,
4+
DotsThreeOutlineVertical,
45
Gear,
6+
Pencil,
57
RocketLaunch,
68
ThumbsUp,
9+
Trash,
710
UserCircle,
811
Users,
912
} from 'phosphor-react'
@@ -34,7 +37,8 @@ import {
3437
import { Goal } from './goals'
3538
import type { GoalResponse } from 'src/pages/[username]'
3639
import { scrollToContentWithId } from 'src/utils'
37-
import { IconBrandDiscord } from 'tabler-icons'
40+
import { IconBrandDiscord, IconMenu } from 'tabler-icons'
41+
import EditUpdate from './goals/EditUpdate'
3842

3943
type LikeData = {
4044
count: number
@@ -65,6 +69,7 @@ export function HomePageFeedUpdate({
6569
update: HomePageFeedUpdateType
6670
setGoalId: () => void
6771
}) {
72+
const [isInEditMode, setIsInEditMode] = useState(false)
6873
const [isLikeModalOpen, setIsLikeModalOpen] = useState(false)
6974
const [session] = useSession()
7075
const [showComments, setShowComments] = useState(false)
@@ -120,114 +125,154 @@ export function HomePageFeedUpdate({
120125
className="bg-white px-4 py-6 shadow sm:p-6 sm:rounded-lg"
121126
id={`homepage-update-${update.id}`}
122127
>
123-
<article>
124-
<div>
125-
<div className="flex space-x-3">
126-
<div className="flex-shrink-0">
127-
<A href={`/${postedBy.username}`}>
128-
<Avatar src={postedBy.image} />
129-
</A>
130-
</div>
131-
<div className="min-w-0 flex-1">
132-
<p className="text-sm font-medium text-gray-900">
133-
<A href={`/${postedBy.username}`} className="hover:underline">
134-
{postedBy.name}
128+
{isInEditMode ? (
129+
<EditUpdate
130+
update={update}
131+
goalId={goal.id}
132+
cancelEditMode={() => setIsInEditMode(false)}
133+
updateFromHomePage={true}
134+
/>
135+
) : (
136+
<>
137+
<article>
138+
<div>
139+
<div className="flex space-x-3">
140+
<div className="flex-shrink-0">
141+
<A href={`/${postedBy.username}`}>
142+
<Avatar src={postedBy.image} />
143+
</A>
144+
</div>
145+
<div className="min-w-0 flex-1">
146+
<p className="text-sm font-medium text-gray-900">
147+
<A
148+
href={`/${postedBy.username}`}
149+
className="hover:underline"
150+
>
151+
{postedBy.name}
152+
</A>
153+
</p>
154+
<p className="text-sm text-gray-500">
155+
<time dateTime={createdAt.toISO()}>
156+
{createdAt.toLocaleString(DateTime.DATETIME_MED)}
157+
</time>
158+
</p>
159+
</div>
160+
161+
<div className="flex-shrink-0 self-center flex">
162+
<div className="relative inline-block text-left">
163+
<Menu
164+
trigger={
165+
<button className="-m-2 p-2 rounded-full flex items-center text-gray-400 hover:text-gray-600">
166+
<span className="sr-only">Open quick actions</span>
167+
<DotsThreeOutlineVertical
168+
className="h-5 w-5"
169+
aria-hidden={true}
170+
/>
171+
</button>
172+
}
173+
>
174+
<Menu.Item
175+
icon={Pencil}
176+
onClick={() => setIsInEditMode(true)}
177+
>
178+
Edit
179+
</Menu.Item>
180+
<Menu.Item icon={Trash}>Delete</Menu.Item>
181+
</Menu>
182+
</div>
183+
</div>
184+
</div>
185+
<div className="mt-4 flex">
186+
<button
187+
onClick={() => {
188+
setGoalId()
189+
scrollToContentWithId(`homepage-update-${update.id}`)
190+
}}
191+
className="hidden lg:block"
192+
>
193+
<span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-brand-100 text-brand-800 hover:text-brand-600">
194+
🚀 Goal: {goal.title}
195+
</span>
196+
</button>
197+
<A href={`/${postedBy.username}`} className="lg:hidden">
198+
<span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-brand-100 text-brand-800 hover:text-brand-600">
199+
🚀 Goal: {goal.title}
200+
</span>
135201
</A>
136-
</p>
137-
<p className="text-sm text-gray-500">
138-
<time dateTime={createdAt.toISO()}>
139-
{createdAt.toLocaleString(DateTime.DATETIME_MED)}
140-
</time>
141-
</p>
202+
</div>
142203
</div>
143-
</div>
144-
<div className="mt-4 flex">
145-
<button
146-
onClick={() => {
147-
setGoalId()
148-
scrollToContentWithId(`homepage-update-${update.id}`)
149-
}}
150-
className="hidden lg:block"
151-
>
152-
<span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-brand-100 text-brand-800 hover:text-brand-600">
153-
🚀 Goal: {goal.title}
154-
</span>
155-
</button>
156-
<A href={`/${postedBy.username}`} className="lg:hidden">
157-
<span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-brand-100 text-brand-800 hover:text-brand-600">
158-
🚀 Goal: {goal.title}
159-
</span>
160-
</A>
161-
</div>
162-
</div>
163-
<div className="mt-2 text-sm text-gray-700 space-y-4">
164-
<div className="prose max-w-none">
165-
<Markdown>{description}</Markdown>
166-
</div>
167-
</div>
168-
<div className="mt-6 flex justify-between space-x-8">
169-
<div className="flex space-x-6">
170-
<span className="inline-flex items-center text-sm">
171-
<button
172-
className="inline-flex space-x-2 text-gray-400 hover:text-gray-500"
173-
onClick={() => {
174-
if (!session) {
175-
setIsLikeModalOpen(true)
176-
return
177-
}
178-
dispatch({ type: 'toggle' })
179-
mutate()
180-
}}
181-
>
182-
<ThumbsUp
183-
className={classNames(
184-
'h-5 w-5',
185-
hasLiked && 'text-brand-600'
186-
)}
187-
weight={hasLiked ? 'bold' : 'regular'}
188-
/>
189-
<span className="font-medium text-gray-900">{likesCount}</span>
190-
<span className="sr-only">likes</span>
191-
</button>
192-
<LikeModal
193-
user={postedBy}
194-
isOpen={isLikeModalOpen}
195-
setIsOpen={setIsLikeModalOpen}
196-
/>
197-
</span>
198-
<span className="inline-flex items-center text-sm">
199-
<button
200-
className="inline-flex space-x-2 text-gray-400 hover:text-gray-500"
201-
onClick={() => setShowComments(!showComments)}
202-
>
203-
<ChatCenteredDots className="h-5 w-5" />
204-
<span className="font-medium text-gray-900">
205-
{update.comments.data.length}
204+
<div className="mt-2 text-sm text-gray-700 space-y-4">
205+
<div className="prose max-w-none">
206+
<Markdown>{description}</Markdown>
207+
</div>
208+
</div>
209+
<div className="mt-6 flex justify-between space-x-8">
210+
<div className="flex space-x-6">
211+
<span className="inline-flex items-center text-sm">
212+
<button
213+
className="inline-flex space-x-2 text-gray-400 hover:text-gray-500"
214+
onClick={() => {
215+
if (!session) {
216+
setIsLikeModalOpen(true)
217+
return
218+
}
219+
dispatch({ type: 'toggle' })
220+
mutate()
221+
}}
222+
>
223+
<ThumbsUp
224+
className={classNames(
225+
'h-5 w-5',
226+
hasLiked && 'text-brand-600'
227+
)}
228+
weight={hasLiked ? 'bold' : 'regular'}
229+
/>
230+
<span className="font-medium text-gray-900">
231+
{likesCount}
232+
</span>
233+
<span className="sr-only">likes</span>
234+
</button>
235+
<LikeModal
236+
user={postedBy}
237+
isOpen={isLikeModalOpen}
238+
setIsOpen={setIsLikeModalOpen}
239+
/>
206240
</span>
207-
<span className="sr-only">replies</span>
208-
</button>
209-
</span>
210-
</div>
211-
</div>
212-
</article>
241+
<span className="inline-flex items-center text-sm">
242+
<button
243+
className="inline-flex space-x-2 text-gray-400 hover:text-gray-500"
244+
onClick={() => setShowComments(!showComments)}
245+
>
246+
<ChatCenteredDots className="h-5 w-5" />
247+
<span className="font-medium text-gray-900">
248+
{update.comments.data.length}
249+
</span>
250+
<span className="sr-only">replies</span>
251+
</button>
252+
</span>
253+
</div>
254+
</div>
255+
</article>
213256

214-
{showComments && (
215-
<>
216-
<UpdateComments>
217-
<UpdateCommentsList>
218-
{update.comments.data.map((comment, index) => (
219-
<UpdateComment
220-
key={comment.id}
221-
postedBy={comment.postedBy}
222-
postedOn={DateTime.fromMillis(comment.createdAt)}
223-
isLastComment={index === update.comments.data.length - 1}
224-
>
225-
{comment.description}
226-
</UpdateComment>
227-
))}
228-
</UpdateCommentsList>
229-
{session && <NewComment updateId={update.id} />}
230-
</UpdateComments>
257+
{showComments && (
258+
<>
259+
<UpdateComments>
260+
<UpdateCommentsList>
261+
{update.comments.data.map((comment, index) => (
262+
<UpdateComment
263+
key={comment.id}
264+
postedBy={comment.postedBy}
265+
postedOn={DateTime.fromMillis(comment.createdAt)}
266+
isLastComment={index === update.comments.data.length - 1}
267+
>
268+
{comment.description}
269+
</UpdateComment>
270+
))}
271+
</UpdateCommentsList>
272+
{session && <NewComment updateId={update.id} />}
273+
</UpdateComments>
274+
</>
275+
)}
231276
</>
232277
)}
233278
</li>

0 commit comments

Comments
 (0)