refactor module structure jnakayama 2024 10 14

app/components/building-blocks/open-discussion-preview.tsx

@@ -0,0 +1,41 @@
+import { Link } from '@remix-run/react'
+import moment from 'moment'
+import { type FrontPagePost } from '#app/modules/posts/post-types.ts'
+import { PostContent } from './post-content.tsx'
+
+export function OpenDiscussionPreview({
+	post,
+	className,
+}: {
+	post: FrontPagePost
+	className?: string
+}) {
+	const ageString = moment(post.createdAt).fromNow()
+	const commentString = post.nTransitiveComments == 1 ? 'comment' : 'comments'
+
+	return (
+		<div
+			className={
+				'mb-2 w-full min-w-0 rounded-xl border-2 border-solid border-gray-200 bg-post px-3 py-2 dark:border-gray-700 ' +
+				(className || '')
+			}
+		>
+			<div className="flex">
+				<div className="flex w-full flex-col">
+					<div className="mb-2 text-sm opacity-50">{ageString}</div>
+					<PostContent
+						content={post.content}
+						maxLines={2}
+						deactivateLinks={false}
+						linkTo={`/post/${post.id}`}
+					/>
+					<div className="mt-auto text-sm opacity-50">
+						<Link to={`/post/${post.id}`}>
+							{post.nTransitiveComments} {commentString}
+						</Link>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}

app/components/building-blocks/poll-post-preview.tsx

@@ -2,7 +2,7 @@ import { Link } from '@remix-run/react'
 import moment from 'moment'
 import { useState } from 'react'
 import { type Artefact, type Quote } from '#app/modules/claims/claim-types.ts'
-import { type Poll } from '#app/modules/posts/post-types.ts'
+import { type FrontPagePoll } from '#app/modules/posts/post-types.ts'
 import { isValidTweetUrl } from '#app/utils/twitter-utils.ts'
 import { Icon } from '../ui/icon.tsx'
 import { EmbeddedTweet } from './embedded-integration.tsx'
@@ -13,7 +13,7 @@ export function PollPostPreview({
 	post,
 	className,
 }: {
-	post: Poll
+	post: FrontPagePoll
 	className?: string
 }) {
 	const ageString = moment(post.createdAt).fromNow()
@@ -38,7 +38,7 @@ export function PollPostPreview({
 						deactivateLinks={false}
 						linkTo={`/post/${post.id}`}
 					/>
-					{showPollPostContext && post.context && (
+					{showPollPostContext && post.context && post.context.artefact && (
 						<PollPostClaimContext
 							artefact={post.context.artefact}
 							quote={post.context.quote}

app/components/building-blocks/poll-result.tsx

@@ -10,7 +10,7 @@ export default function PollResult({
 	postId: number
 	pCurrent: number
 	voteCount: number
-	pollType: PollType | null
+	pollType: PollType
 }) {
 	const pCurrentString: string = (pCurrent * 100).toFixed(0) + '%'
 

app/components/building-blocks/post-action-bar.tsx

@@ -8,35 +8,40 @@ import {
 import TextareaAutosize from 'react-textarea-autosize'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { MAX_CHARS_PER_POST } from '#app/constants.ts'
-import { type Post } from '#app/modules/posts/post-types.ts'
-import { toImmutableReplyTree } from '#app/modules/posts/scoring/ranking-service.ts'
-import { type TreeContext } from '#app/routes/post.$postId.tsx'
+import { postIsPoll } from '#app/modules/posts/post-service.ts'
+import {
+	type Poll,
+	PollType,
+	VoteDirection,
+	type Post,
+} from '#app/modules/posts/post-types.ts'
 import {
-	type ReplyTree,
 	type CommentTreeState,
-	type ImmutableReplyTree,
-	Direction,
+	type ReplyTree,
 	type PostState,
-} from '#app/types/api-types.ts'
+	type MutableReplyTree,
+} from '#app/modules/posts/ranking/ranking-types.ts'
+import { toImmutableReplyTree } from '#app/modules/posts/ranking/ranking-utils.ts'
+import { type TreeContext } from '#app/routes/post.$postId.tsx'
 import { invariant } from '#app/utils/misc.tsx'
 import { useOptionalUser } from '#app/utils/user.ts'
 
 export function PostActionBar({
-	post,
 	replyTree,
 	pathFromTargetPost,
 	postDetailsRef,
 	treeContext,
 	postState,
 }: {
-	post: Post
-	replyTree: ImmutableReplyTree
+	replyTree: ReplyTree
 	pathFromTargetPost: Immutable.List<number>
 	postDetailsRef: React.RefObject<HTMLDivElement>
 	treeContext: TreeContext
 	postState: PostState
 }) {
+	const post = replyTree.post
 	const user = useOptionalUser()
+	const isPoll = postIsPoll(post)
 	const loggedIn: boolean = user !== null
 	const isAdminUser: boolean = user ? Boolean(user.isAdmin) : false
 	const [showAdminUI, setShowAdminUI] = useState(false)
@@ -87,11 +92,7 @@ export function PostActionBar({
 		})
 	}
 
-	const isTargetPost = post.id == treeContext.targetPostId
-
-	const isTopLevelPost = post.parentId === null
-
-	const submitVote = async function (direction: Direction) {
+	const submitVote = async function (direction: VoteDirection) {
 		const payLoad = {
 			postId: post.id,
 			focussedPostId: treeContext.targetPostId,
@@ -162,35 +163,17 @@ export function PostActionBar({
 							<Icon name="chevron-down" className="ml-[-0.2em]" />
 						</button>
 					))}
-				{loggedIn && (!isTargetPost || !isTopLevelPost || !post.pollType) && (
+				{loggedIn && !isDeleted && (
 					<>
-						<button
-							title={'Upvote'}
-							onClick={async () => await submitVote(Direction.Up)}
-						>
-							<Icon
-								name={
-									postState.voteState.vote == Direction.Up
-										? 'thick-arrow-up-solid'
-										: 'thick-arrow-up'
-								}
-							/>
-						</button>
-						<span className="mx-[-0.6em]">Vote</span>
-						<button
-							title={'Downvote'}
-							onClick={async () => await submitVote(Direction.Down)}
-							className="mr-[0.3em]"
-						>
-							<Icon
-								name={
-									postState.voteState.vote == Direction.Down
-										? 'thick-arrow-down-solid'
-										: 'thick-arrow-down'
-								}
-								className="mt-[-0.2em]"
+						{isPoll ? (
+							<PollVoteButtons
+								poll={post}
+								postState={postState}
+								submitVote={submitVote}
 							/>
-						</button>
+						) : (
+							<VoteButtons postState={postState} submitVote={submitVote} />
+						)}
 					</>
 				)}
 				{false && (
@@ -262,6 +245,90 @@ export function PostActionBar({
 	)
 }
 
+function VoteButtons({
+	postState,
+	submitVote,
+}: {
+	postState: PostState
+	submitVote: (direction: VoteDirection) => Promise<void>
+}) {
+	return (
+		<>
+			<button
+				title={'Upvote'}
+				onClick={async () => await submitVote(VoteDirection.Up)}
+			>
+				<Icon
+					name={
+						postState.voteState.vote == VoteDirection.Up
+							? 'thick-arrow-up-solid'
+							: 'thick-arrow-up'
+					}
+				/>
+			</button>
+			<span className="mx-[-0.6em]">Vote</span>
+			<button
+				title={'Downvote'}
+				onClick={async () => await submitVote(VoteDirection.Down)}
+				className="mr-[0.3em]"
+			>
+				<Icon
+					name={
+						postState.voteState.vote == VoteDirection.Down
+							? 'thick-arrow-down-solid'
+							: 'thick-arrow-down'
+					}
+					className="mt-[-0.2em]"
+				/>
+			</button>
+		</>
+	)
+}
+
+function PollVoteButtons({
+	poll,
+	postState,
+	submitVote,
+}: {
+	poll: Poll
+	postState: PostState
+	submitVote: (direction: VoteDirection) => Promise<void>
+}) {
+	// TODO: handle else case properly
+	const upvoteLabel = poll.pollType == PollType.FactCheck ? 'True' : 'Agree'
+
+	// TODO: handle else case properly
+	const downvoteLabel =
+		poll.pollType == PollType.FactCheck ? 'False' : 'Disagree'
+
+	return (
+		<div className="flex space-x-1 rounded px-2 opacity-100 ">
+			<button
+				title={upvoteLabel}
+				onClick={async () => await submitVote(VoteDirection.Up)}
+				className={
+					postState.voteState.vote == VoteDirection.Up
+						? 'font-bold text-purple-700 dark:text-purple-500'
+						: ''
+				}
+			>
+				{upvoteLabel + ' <'}
+			</button>
+			<button
+				title={downvoteLabel}
+				onClick={async () => await submitVote(VoteDirection.Down)}
+				className={
+					postState.voteState.vote == VoteDirection.Down
+						? 'font-bold text-purple-700 dark:text-purple-500'
+						: ''
+				}
+			>
+				{'> ' + downvoteLabel}
+			</button>
+		</div>
+	)
+}
+
 function AdminFeatureBar({
 	isDeleted,
 	handleDeletePost,
@@ -336,7 +403,7 @@ function ReplyForm({
 		})
 		const responseDecoded = (await response.json()) as {
 			commentTreeState: CommentTreeState
-			newReplyTree: ReplyTree
+			newReplyTree: MutableReplyTree
 		}
 		// after successful submission, remove from localstorage
 		localStorage.removeItem(storageKey)