diff --git a/src/components/header.tsx b/src/components/header.tsx
new file mode 100644
index 0000000..4fb7535
--- /dev/null
+++ b/src/components/header.tsx
@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import Logo from '~/components/svg/logo'
+
+import { Actions } from '~/components/actions'
+
+export const Header = async () => {
+ return (
+
+ )
+}
diff --git a/components/html-view.tsx b/src/components/html-view.tsx
similarity index 85%
rename from components/html-view.tsx
rename to src/components/html-view.tsx
index a033763..8adb818 100644
--- a/components/html-view.tsx
+++ b/src/components/html-view.tsx
@@ -1,4 +1,4 @@
-import { classNames } from '@/lib/classnames'
+import { classNames } from '~/utils/core'
type HtmlViewProps = {
html: string
diff --git a/src/components/liked-by.tsx b/src/components/liked-by.tsx
new file mode 100644
index 0000000..e32ec29
--- /dev/null
+++ b/src/components/liked-by.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import { classNames } from '~/utils/core'
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { type RouterOutputs } from '~/trpc/shared'
+import { MAX_LIKED_BY_SHOWN } from './reaction-button'
+import { type ReactNode } from 'react'
+import { useSession } from 'next-auth/react'
+
+type LikedByProps = {
+ trigger: ReactNode
+ likedBy: RouterOutputs['post']['detail']['likedBy']
+}
+
+export const LikedBy = ({ trigger, likedBy }: LikedByProps) => {
+ const likeCount = likedBy.length
+ const { data: session } = useSession()
+
+ return (
+
+
+ {
+ event.preventDefault()
+ }}
+ onMouseDown={(event) => {
+ event.preventDefault()
+ }}
+ asChild
+ >
+ {trigger}
+
+
+
+ {likedBy
+ .slice(0, MAX_LIKED_BY_SHOWN)
+ .map(({ user }) =>
+ session?.user.name === user.name ? 'You' : user.name,
+ )
+ .join(', ')}
+ {likeCount > MAX_LIKED_BY_SHOWN &&
+ ` and ${likeCount - MAX_LIKED_BY_SHOWN} more`}
+
+
+
+
+ )
+}
diff --git a/components/markdown-editor.tsx b/src/components/markdown-editor.tsx
similarity index 76%
rename from components/markdown-editor.tsx
rename to src/components/markdown-editor.tsx
index 65b8c62..11d9aa4 100644
--- a/components/markdown-editor.tsx
+++ b/src/components/markdown-editor.tsx
@@ -1,34 +1,31 @@
-import { HtmlView } from '@/components/html-view'
-import { BoldIcon, ItalicIcon, LinkIcon, ListIcon } from '@/components/icons'
-import { browserEnv } from '@/env/browser'
-import { classNames } from '@/lib/classnames'
-import {
- getSuggestionData,
- uploadImageCommandHandler,
- markdownToHtml,
-} from '@/lib/editor'
-import { trpc } from '@/lib/trpc'
-import { Switch } from '@headlessui/react'
+'use client'
+
+import * as Switch from '@radix-ui/react-switch'
import { matchSorter } from 'match-sorter'
import * as React from 'react'
import { useDetectClickOutside } from 'react-detect-click-outside'
-import { useQuery } from 'react-query'
+import { type ItemOptions, useItemList } from 'use-item-list'
+
import TextareaAutosize, {
- TextareaAutosizeProps,
+ type TextareaAutosizeProps,
} from 'react-textarea-autosize'
import getCaretCoordinates from 'textarea-caret'
-import TextareaMarkdown, { TextareaMarkdownRef } from 'textarea-markdown-editor'
-import { ItemOptions, useItemList } from 'use-item-list'
-
-type MarkdownEditorProps = {
- label?: string
- value: string
- onChange: (value: string) => void
- onTriggerSubmit?: () => void
-} & Omit<
- TextareaAutosizeProps,
- 'value' | 'onChange' | 'onKeyDown' | 'onInput' | 'onPaste' | 'onDrop'
->
+import TextareaMarkdown, {
+ type TextareaMarkdownRef,
+} from 'textarea-markdown-editor'
+
+import BoldIcon from '~/components/svg/bold-icon'
+import { classNames } from '~/utils/core'
+import ItalicIcon from '~/components/svg/italic-icon'
+import LinkIcon from '~/components/svg/link-icon'
+import ListIcon from '~/components/svg/list-icon'
+import { HtmlView } from './html-view'
+import { type SuggestionType, getSuggestionData } from '~/utils/suggestion'
+import { env } from '~/env'
+import { api } from '~/trpc/react'
+import { uploadImageCommandHandler } from '~/server/cloudinary'
+import { markdownToHtml } from '~/utils/text'
+import { useEffect, useRef } from 'react'
type SuggestionResult = {
label: string
@@ -40,8 +37,6 @@ type SuggestionPosition = {
left: number
}
-type SuggestionType = 'mention' | 'emoji'
-
type SuggestionState = {
isOpen: boolean
type: SuggestionType | null
@@ -63,10 +58,10 @@ type SuggestionActionType =
| { type: 'close' }
| { type: 'updateQuery'; payload: string }
-function suggestionReducer(
+const suggestionReducer = (
state: SuggestionState,
- action: SuggestionActionType
-) {
+ action: SuggestionActionType,
+) => {
switch (action.type) {
case 'open':
return {
@@ -114,7 +109,7 @@ const TOOLBAR_ITEMS = [
},
]
-function MarkdownPreview({ markdown }: { markdown: string }) {
+const MarkdownPreview = ({ markdown }: { markdown: string }) => {
return (
{markdown ? (
@@ -126,14 +121,24 @@ function MarkdownPreview({ markdown }: { markdown: string }) {
)
}
-export function MarkdownEditor({
+type MarkdownEditorProps = {
+ label?: string
+ value: string
+ onChange: (value: string) => void
+ onTriggerSubmit?: () => void
+} & Omit<
+ TextareaAutosizeProps,
+ 'value' | 'onChange' | 'onKeyDown' | 'onInput' | 'onPaste' | 'onDrop'
+>
+
+export const MarkdownEditor = ({
label,
value,
minRows = 15,
onChange,
onTriggerSubmit,
...rest
-}: MarkdownEditorProps) {
+}: MarkdownEditorProps) => {
const textareaMarkdownRef = React.useRef
(null)
const [showPreview, setShowPreview] = React.useState(false)
const [suggestionState, suggestionDispatch] = React.useReducer(
@@ -144,15 +149,15 @@ export function MarkdownEditor({
position: null,
triggerIdx: null,
query: '',
- }
+ },
)
- function closeSuggestion() {
+ const closeSuggestion = () => {
suggestionDispatch({ type: 'close' })
}
return (
-
+ <>
{label &&
{label} }
@@ -163,12 +168,12 @@ export function MarkdownEditor({
type="button"
onClick={() => {
textareaMarkdownRef.current?.trigger(
- toolbarItem.commandTrigger
+ toolbarItem.commandTrigger,
)
}}
className={classNames(
'rounded inline-flex items-center justify-center h-8 w-8 disabled:opacity-50 disabled:cursor-default focus:border focus-ring',
- !showPreview && 'transition-colors hover:text-blue'
+ !showPreview && 'transition-colors hover:text-blue',
)}
disabled={showPreview}
title={toolbarItem.name}
@@ -178,34 +183,33 @@ export function MarkdownEditor({
))}
-
- {
- if (value === false) {
- textareaMarkdownRef.current?.focus()
- }
- setShowPreview(value)
- }}
+ {
+ if (value === false) {
+ textareaMarkdownRef.current?.focus()
+ }
+ setShowPreview(value)
+ }}
+ >
+
-
+
+
Preview
-
-
+
+
@@ -231,7 +235,7 @@ export function MarkdownEditor({
} else {
const coords = getCaretCoordinates(
event.currentTarget,
- triggerIdx + 1
+ triggerIdx + 1,
)
suggestionDispatch({
type: 'open',
@@ -253,8 +257,8 @@ export function MarkdownEditor({
onTriggerSubmit?.()
}
}}
- onPaste={(event) => {
- if (browserEnv.NEXT_PUBLIC_ENABLE_IMAGE_UPLOAD) {
+ onPaste={async (event) => {
+ if (env.NEXT_PUBLIC_ENABLE_IMAGE_UPLOAD) {
const filesArray = Array.from(event.clipboardData.files)
if (filesArray.length === 0) {
@@ -262,7 +266,7 @@ export function MarkdownEditor({
}
const imageFiles = filesArray.filter((file) =>
- /image/i.test(file.type)
+ /image/i.test(file.type),
)
if (imageFiles.length === 0) {
@@ -271,11 +275,14 @@ export function MarkdownEditor({
event.preventDefault()
- uploadImageCommandHandler(event.currentTarget, imageFiles)
+ await uploadImageCommandHandler(
+ event.currentTarget,
+ imageFiles,
+ )
}
}}
- onDrop={(event) => {
- if (browserEnv.NEXT_PUBLIC_ENABLE_IMAGE_UPLOAD) {
+ onDrop={async (event) => {
+ if (env.NEXT_PUBLIC_ENABLE_IMAGE_UPLOAD) {
const filesArray = Array.from(event.dataTransfer.files)
if (filesArray.length === 0) {
@@ -283,7 +290,7 @@ export function MarkdownEditor({
}
const imageFiles = filesArray.filter((file) =>
- /image/i.test(file.type)
+ /image/i.test(file.type),
)
if (imageFiles.length === 0) {
@@ -292,7 +299,10 @@ export function MarkdownEditor({
event.preventDefault()
- uploadImageCommandHandler(event.currentTarget, imageFiles)
+ await uploadImageCommandHandler(
+ event.currentTarget,
+ imageFiles,
+ )
}
}}
className="block w-full rounded shadow-sm bg-secondary border-secondary focus-ring"
@@ -300,12 +310,12 @@ export function MarkdownEditor({
/>
- {
const preSuggestion = value.slice(0, suggestionState.triggerIdx!)
const postSuggestion = value.slice(
- textareaMarkdownRef.current?.selectionStart
+ textareaMarkdownRef.current?.selectionStart,
)
let suggestionInsertion = ''
@@ -330,7 +340,7 @@ export function MarkdownEditor({
textareaMarkdownRef.current?.focus()
textareaMarkdownRef.current?.setSelectionRange(
caretPosition,
- caretPosition
+ caretPosition,
)
}, 0)
}}
@@ -340,11 +350,11 @@ export function MarkdownEditor({
{showPreview &&
-
{
+ id: string
+ index: number
+ highlight: () => void
+ select: () => void
+ selected: boolean
+ useHighlighted: () => boolean
+ }
+ }
suggestionResult={suggestionResult}
/>
))}
@@ -478,7 +490,8 @@ function SuggestionList({
)
}
-function SuggestionResult({
+
+const SuggestionResult = ({
useItem,
suggestionResult,
}: {
@@ -487,13 +500,13 @@ function SuggestionResult({
index: number
highlight: () => void
select: () => void
- selected: any
- useHighlighted: () => Boolean
+ selected: boolean
+ useHighlighted: () => boolean
}
suggestionResult: SuggestionResult
-}) {
- const ref = React.useRef
(null)
- const { id, index, highlight, select, useHighlighted } = useItem({
+}) => {
+ const ref = useRef(null)
+ const { id, highlight, select, useHighlighted } = useItem({
ref,
value: suggestionResult,
})
@@ -509,7 +522,7 @@ function SuggestionResult({
aria-selected={highlighted ? 'true' : 'false'}
className={classNames(
'px-4 py-2 text-sm text-left transition-colors cursor-pointer ',
- highlighted ? 'bg-blue-600 text-white' : 'text-primary'
+ highlighted ? 'bg-blue-600 text-white' : 'text-primary',
)}
>
{suggestionResult.label}
diff --git a/src/components/menu.tsx b/src/components/menu.tsx
new file mode 100644
index 0000000..a7ef185
--- /dev/null
+++ b/src/components/menu.tsx
@@ -0,0 +1,90 @@
+'use client'
+
+import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu'
+import Link, { type LinkProps } from 'next/link'
+import * as React from 'react'
+import { forwardRef, type ComponentPropsWithRef, type Ref } from 'react'
+
+import { classNames } from '~/utils/core'
+
+export const Menu = ({ children }: { children: React.ReactNode }) => {
+ return {children}
+}
+
+export const MenuButton = DropdownPrimitive.Trigger
+export const MenuItem = ({
+ asChild = true,
+ ...props
+}: DropdownPrimitive.DropdownMenuItemProps) => {
+ return ,
+ ) => {
+ return (
+ , 'href'> & LinkProps
+
+export const MenuItemLink = forwardRef(
+ ({ className, ...props }: MenuItemLink, ref: Ref) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export const MenuItemsContent = ({
+ children,
+}: {
+ children: React.ReactNode
+}) => {
+ return {children}
+}
diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx
new file mode 100644
index 0000000..8f77c9b
--- /dev/null
+++ b/src/components/pagination.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import { Button } from './button'
+import ChevronLeftIcon from '~/components/svg/chevron-left-icon'
+import ChevronRightIcon from '~/components/svg/chevron-right-icon'
+import { POSTS_PER_PAGE } from '~/utils/core'
+
+type PaginationProps = {
+ itemCount: number
+ currentPageNumber: number
+}
+
+export const Pagination = ({
+ itemCount,
+ currentPageNumber,
+}: PaginationProps) => {
+ const pathname = usePathname()
+
+ const totalPages = Math.ceil(itemCount / POSTS_PER_PAGE)
+
+ if (totalPages <= 1) {
+ return null
+ }
+
+ return (
+
+
+
+
+ Newer posts
+
+
+ Older posts{' '}
+
+
+
+
+ )
+}
diff --git a/src/components/post-action.tsx b/src/components/post-action.tsx
new file mode 100644
index 0000000..eee2753
--- /dev/null
+++ b/src/components/post-action.tsx
@@ -0,0 +1,302 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { toast } from 'react-hot-toast'
+import { Button } from '~/components/button'
+import {
+ AlertDialogAction,
+ AlertDialogActions,
+ AlertDialogCloseButton,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogTitle,
+ AlertDialogCancel,
+} from '~/components/alert-dialog'
+import {
+ Menu,
+ MenuButton,
+ MenuItemButton,
+ MenuItems,
+ MenuItem,
+ MenuItemsContent,
+ MenuItemLink,
+} from '~/components/menu'
+import { useDialogStore } from '~/hooks/use-dialog-store'
+import DotsIcon from '~/components/svg/dots-icon'
+import EditIcon from '~/components/svg/edit-icon'
+import EyeIcon from '~/components/svg/eye-icon'
+import TrashIcon from '~/components/svg/trash-icon'
+import { api } from '~/trpc/react'
+import { getFeedPagination } from './post-summary'
+
+type PostActionProps = {
+ isUserAdmin: boolean
+ isHidden: boolean
+ postBelongsToUser: boolean
+ postId: number
+}
+
+export const PostAction = ({
+ isUserAdmin,
+ isHidden,
+ postBelongsToUser,
+ postId,
+}: PostActionProps) => {
+ const { handleDialog } = useDialogStore()
+
+ return (
+ <>
+
+
+
+
+
+
+
+ {isUserAdmin &&
+ (isHidden ? (
+
+
+ handleDialog({
+ component: (
+
+
+ ) : (
+
+
+ handleDialog({
+ component:
+
+ ))}
+ {postBelongsToUser && (
+ <>
+
+
+ Edit
+
+
+
+
+ handleDialog({
+ component:
+
+
+ )}
+
+
+
+
+
+ {isUserAdmin &&
+ (isHidden ? (
+
+ handleDialog({
+ component:
+ ) : (
+
+ handleDialog({
+ component:
+ ))}
+ {postBelongsToUser && (
+ <>
+
+
+
+ handleDialog({
+ component:
+
+ )}
+
+
+ )
+}
+
+const ConfirmDeleteDialog = ({ postId }: { postId: number }) => {
+ const { handleDialogClose } = useDialogStore()
+ const router = useRouter()
+ const utils = api.useUtils()
+ const deletePostMutation = api.post.delete.useMutation({
+ onMutate: () => {
+ const previousQuery = utils.post.feed.getData(
+ getFeedPagination({ currentPageNumber: 1 }),
+ )
+
+ if (previousQuery) {
+ utils.post.feed.setData(getFeedPagination({ currentPageNumber: 1 }), {
+ ...previousQuery,
+ posts: previousQuery.posts.filter((post) => post.id !== postId),
+ })
+ }
+ },
+ onSuccess: () => {
+ router.push('/')
+ },
+ onError: (error) => {
+ toast.error(`Something went wrong: ${error.message}`)
+ },
+ })
+
+ return (
+ <>
+
+ Delete post
+
+ Are you sure you want to delete this post?
+
+
+
+
+ {
+ deletePostMutation.mutate(postId, {
+ onSuccess: () => router.push('/'),
+ })
+ }}
+ >
+ Delete post
+
+
+
+
+ Cancel
+
+
+
+
+ )
+}
+
+const ConfirmHidePostDialog = ({ postId }: { postId: number }) => {
+ const { handleDialogClose } = useDialogStore()
+
+ const hidePostMutation = api.post.hide.useMutation({
+ onError: (error) => {
+ toast.error(`Something went wrong: ${error.message}`)
+ },
+ })
+
+ return (
+ <>
+
+ Hide post
+
+ Are you sure you want to hide this post?
+
+
+
+
+ hidePostMutation.mutate(postId, {
+ onSuccess: () => {
+ toast.success('Post hidden')
+ handleDialogClose()
+ },
+ })
+ }
+ >
+ Hide post
+
+
+ Cancel
+
+
+
+ )
+}
+
+const ConfirmUnhidePostDialog = ({ postId }: { postId: number }) => {
+ const { handleDialogClose } = useDialogStore()
+
+ const unhidePostMutation = api.post.unhide.useMutation({
+ onError: (error) => {
+ toast.error(`Something went wrong: ${error.message}`)
+ },
+ })
+
+ return (
+ <>
+
+ Hide post
+
+ Are you sure you want to unhide this post?
+
+
+
+
+ unhidePostMutation.mutate(postId, {
+ onSuccess: () => {
+ toast.success('Post unhidden')
+ handleDialogClose()
+ },
+ })
+ }
+ >
+ Hide post
+
+
+ Cancel
+
+
+
+ )
+}
diff --git a/src/components/post-feed.tsx b/src/components/post-feed.tsx
new file mode 100644
index 0000000..272a8dd
--- /dev/null
+++ b/src/components/post-feed.tsx
@@ -0,0 +1,129 @@
+'use client'
+
+import { api } from '~/trpc/react'
+import { PostSummary, getFeedPagination } from './post-summary'
+import { Pagination } from './pagination'
+import { PostSkeleton } from './post-skeleton'
+import { useSession } from 'next-auth/react'
+
+type PostFeedProps = {
+ fallbackMessage: string
+ currentPageNumber?: number
+ authorId?: string
+}
+
+export const PostFeed = ({
+ fallbackMessage,
+ currentPageNumber,
+ authorId,
+}: PostFeedProps) => {
+ const { data, isLoading } = api.post.feed.useQuery(
+ getFeedPagination({ authorId, currentPageNumber }),
+ )
+
+ const { like, unlike } = useReaction({ currentPageNumber, authorId })
+
+ if (isLoading) return
+ {fallbackMessage}
+
+ ) : (
+ <>
+
+ {data?.posts.map((post) => {
+ return (
+
+ like.mutate({ id: post.id })}
+ onUnlike={() => unlike.mutate({ id: post.id })}
+ post={post}
+ />
+
+ )
+ })}
+
+
}
export function PostForm({
+ postId,
defaultValues,
isSubmitting,
backTo,
- onSubmit,
}: PostFormProps) {
- const { control, register, formState, getValues, reset, handleSubmit } =
+ const { control, register, handleSubmit, reset, getValues } =
useForm({
defaultValues,
})
- useLeaveConfirm({ formState })
-
- const { isSubmitSuccessful } = formState
+ const { newPost, editPost } = usePostMutations(postId, () =>
+ reset(getValues()),
+ )
- React.useEffect(() => {
- if (isSubmitSuccessful) {
- reset(getValues())
+ const onSubmit = (values: FormData) => {
+ if (postId) {
+ editPost.mutate({
+ id: postId,
+ data: values,
+ })
+ } else {
+ newPost.mutate(values)
}
- }, [isSubmitSuccessful, reset, getValues])
+ }
return (
diff --git a/doc/okta_setup.md b/doc/okta_setup.md
deleted file mode 100644
index 82ae89a..0000000
--- a/doc/okta_setup.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Okta setup
-
-- Create an [Okta account](https://login.okta.com/signin/register/) if you don't have one and go to the **Applications** page
-- **Create an integration**
- - Click **Create App Integration**
- - For the **Sign-in method**, select **OIDC - OpenID Connect**
- - For the **Application type**, pick **Web Application**
- - Click **Next**
- - Set **Sign-in redirect URIs** to `http://localhost:3000/api/auth/callback/okta`
- - Set **Sign-out redirect URIs** to `http://localhost:3000`
- - Click **Save**
-
-⚠️ Remember to update `Sign-in redirect URIs` and `Sign-out redirect URIs` when deploying your app to production.
-
-- **Set environment variables in `.env`**
- - Set `AUTH_PROVIDER` to **okta**
- - Set `OKTA_CLIENT_ID` to **Client ID**
- - Set `OKTA_CLIENT_SECRET` to **Client secret**
- - Set `OKTA_ISSUER` to **Okta domain** (including `https://` prefix)
- - Set `NEXTAUTH_SECRET` to a random secret. [This](https://generate-secret.now.sh/32) is a good resource.
diff --git a/doc/pscale-actions-setup.md b/doc/pscale-actions-setup.md
deleted file mode 100644
index 3ef9442..0000000
--- a/doc/pscale-actions-setup.md
+++ /dev/null
@@ -1,10 +0,0 @@
-### Create a database with pscale
-
-```bash
-cd .pscale/cli-helper-scripts/
-./create-database.sh
-```
-
-### Create a database with the GitHub Actions workflow
-
-
diff --git a/doc/slack_setup.md b/doc/slack_setup.md
deleted file mode 100644
index 3653649..0000000
--- a/doc/slack_setup.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Slack setup
-
-- [Create a Slack app](https://api.slack.com/apps/new) if you don't have one already
-- Pick a name, choose a workspace to associate your app with, and then click **Create App**
-- Select the **Incoming Webhooks** feature and click the **Activate Incoming Webhooks** toggle to switch it on
-- Click **Add New Webhook to Workspace**
-- Pick the channel the app will post to and then click to **Authorize** your app
-- You should see a new entry under the Webhook URLs for Your Workspace section
-
-See the [Slack API docs](https://api.slack.com/messaging/webhooks) for more detailed instructions on creating Slack apps.
-
-- **Set environment variables in `.env`**
- - Set `ENABLE_SLACK_POSTING` to **true**
- - Set `SLACK_WEBHOOK_URL` to the Webhook URL from your Slack app setting
diff --git a/env/browser.ts b/env/browser.ts
deleted file mode 100644
index 436457d..0000000
--- a/env/browser.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { bool, envsafe } from 'envsafe'
-
-export const browserEnv = envsafe({
- NEXT_PUBLIC_ENABLE_IMAGE_UPLOAD: bool({
- input: process.env.NEXT_PUBLIC_ENABLE_IMAGE_UPLOAD,
- default: false,
- }),
-})
diff --git a/env/server.ts b/env/server.ts
deleted file mode 100644
index 692b3b1..0000000
--- a/env/server.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
- bool,
- envsafe,
- invalidEnvError,
- makeValidator,
- str,
- url,
-} from 'envsafe'
-import { browserEnv } from './browser'
-
-if (process.browser) {
- throw new Error(
- 'This should only be included on the client (but the env vars wont be exposed)'
- )
-}
-
-const githubParser = makeValidator
- {postQuery.data.comments.map((comment) => ( --
-
- ))}
-
- )} -