[WIP] V2

Dockerfile

@@ -1,35 +1,20 @@
-FROM node:16-alpine3.15 as builder
+FROM node:16-alpine
 
-VOLUME [ "/data" ]
+ARG DATABASE_URL
+ARG PORT
 
-ARG DB_TYPE=sqlite
-ENV DB_TYPE=$DB_TYPE
+ARG EnvironmentVariable
 
-RUN apk add --no-cache python3 py3-pip make gcc g++
-
-COPY . /app
-
-COPY package.json yarn.lock /app/
-
-WORKDIR /app
-
-RUN npm install -g pnpm
-RUN yarn install --frozen-lockfile && npx browserslist@latest --update-db
-RUN npm run build:without-migrate
-
-FROM node:16-alpine3.15 as runner
-
-ENV NODE_ENV=production
-ARG DB_TYPE=sqlite
-ENV DB_TYPE=$DB_TYPE
+ENV PORT=${PORT}
 
+ADD . /app
 WORKDIR /app
 
-COPY --from=builder /app/node_modules ./node_modules
-COPY --from=builder /app/public ./public
-COPY --from=builder /app/.next ./.next
-COPY . /app
-
-EXPOSE 3000/tcp
+RUN apk update
+RUN apk add python3 make g++
+RUN npm i -g pnpm
+RUN pnpm i
+RUN npm run build
 
-CMD ["npm", "run", "start:with-migrate"]
+EXPOSE ${PORT}
+CMD ["npm", "start"]

app/HomeActions.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { useSession } from "next-auth/client"
+import Link from "next/link"
+import { Button } from "./components/ui/Button"
+
+export const HomeActions = () => {
+  const [session, isLoadingSession] = useSession()
+
+  return (
+    <div className="flex gap-4 mt-4">
+      {!session && <Button>Sign in</Button>}
+      {!isLoadingSession && session && <a target={"_blank"} href="/dashboard"><Button>Dashboard</Button></a>}
+      <a href="/doc" target="_blank">
+        <Button variant="outline">Documentation</Button>
+        </a>
+    </div>
+  )
+}

app/c/[projectId]/Bridge.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { useEffect, useLayoutEffect } from "react"
+
+export function Bridge() {
+  useLayoutEffect(() => {
+
+    // @ts-expect-error
+    window.__CUSDIS__ = true
+
+    // auto size
+
+    function postMessage(event, data = {}) {
+    const parent = window.parent
+      parent.postMessage(
+        {
+          from: 'cusdis',
+          event,
+          data,
+        },
+        "*"
+      )
+    }
+    function requestResize() {
+      postMessage('resize', document.documentElement.offsetHeight)
+    }
+
+    const resizeObserve = new MutationObserver(() => {
+      requestResize()
+    })
+
+    resizeObserve.observe(document.body, {
+      childList: true,
+      subtree: true
+    })
+
+    function onMessage(e) {
+      console.log(e.data) 
+    }
+
+    window.addEventListener('message', onMessage)
+
+    requestResize()
+
+
+    return () => {
+      // console.log('disconnect')
+      // resizeObserve.disconnect()
+      // window.removeEventListener('message', onMessage)
+    }
+
+
+  }, [])
+
+  return (
+    <div></div>
+  )
+}

app/c/[projectId]/Comment.tsx

@@ -0,0 +1,64 @@
+import 'server-only'
+import { CommentList } from './CommentList'
+import { ReplyForm } from './ReplyForm'
+import { CommentAction } from './CommentAction'
+import classNames from 'classnames'
+import { env } from '../../env'
+import { getComments } from './data'
+
+export async function CommentComponent(props: {
+  locale: any,
+  session?: any,
+  isChild?: boolean
+  isModerator: boolean
+  timezoneOffset: number,
+  comment: Awaited<ReturnType<typeof getComments>>[0]
+}) {
+  const isSelfhost = !env.isHosted
+  // get child comments
+  const comments = await getComments(props.comment.page.projectId, props.comment.page.slug, 1, props.timezoneOffset, {
+    parentId: props.comment.id,
+    onlyApproved: !props.isModerator,
+  })
+  const isModerator = props.comment.moderator?.id === props.comment.page.project.ownerId
+
+  return (
+    <div className={classNames('flex flex-col gap-4 pt-2 border-b-gray-100', {
+    })}>
+      <div className='flex flex-col gap-1'>
+        <div className='flex gap-2 items-center'>
+          <div className='font-medium dark:text-white'>
+            {props.comment.moderator?.displayName || props.comment.moderator?.name || props.comment.by_nickname}
+          </div>
+          {isModerator && (
+            <span className='uppercase bg-gray-100 dark:bg-gray-700 text-xs font-bold px-2 py-1 rounded-md'>
+              MOD
+            </span>
+          )}
+          {!props.comment.approved && (
+            <div>
+              <span className='bg-yellow-500 text-yellow-50 rounded-md px-2 py-1 text-xs font-bold'>Unapproved</span>
+            </div>
+          )}
+          <div className='text-gray-500 text-sm'>
+            {/* @ts-expect-error */}
+            {props.comment.createdAt as string}
+          </div>
+        </div>
+      </div>
+      <div className='text-gray-500 dark:text-gray-100'>
+        {props.comment.content}
+      </div>
+      {props.session &&
+        <div>
+          <CommentAction comment={props.comment} />
+        </div>}
+      <ReplyForm isSelfHost={isSelfhost} session={props.session} parentId={props.comment.id} locale={props.locale} projectId={props.comment.page.projectId} />
+      {/* children comments */}
+      <div className='pl-8'>
+        {/* @ts-expect-error Server Component */}
+        <CommentList session={props.session} locale={props.locale} comments={comments} />
+      </div>
+    </div>
+  )
+}

app/c/[projectId]/CommentAction.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { Comment } from "@prisma/client"
+import { useMutation } from "@tanstack/react-query"
+import axios from "axios"
+import { useRouter } from "next/navigation"
+import type { getComments } from "./data"
+
+export function CommentAction(props: {
+  comment: Awaited<ReturnType<typeof getComments>>[0]
+}) {
+
+  const router = useRouter()
+
+  const deleteMutation = useMutation(async () => {
+    await axios.delete(`/api/v2/comments/${props.comment.id}`)
+  }, {
+    onSuccess() {
+      router.refresh()
+    }
+  })
+
+  const approveMutation = useMutation(async () => {
+    await axios.put(`/api/v2/comments/${props.comment.id}`, {
+      approved: true
+    })
+  }, {
+    onSuccess() {
+      router.refresh()
+    }
+  })
+
+  return (
+    <div className="flex gap-2 text-xs font-medium text-gray-500 dark:text-gray-300">
+      {!props.comment.approved && (
+        <button disabled={approveMutation.isLoading} type="button" onClick={_ => {
+          approveMutation.mutate()
+        }}>{approveMutation.isLoading ? 'Approving...' : 'Approve'}</button>
+      )}
+      <button disabled={deleteMutation.isLoading} type="button" onClick={_ => {
+        deleteMutation.mutate()
+      }}>{deleteMutation.isLoading ? 'Deleting...' : 'Delete'}</button>
+    </div>
+  )
+}

app/c/[projectId]/CommentList.tsx

@@ -0,0 +1,24 @@
+import 'server-only'
+import { CommentComponent } from './Comment'
+import type { getComments } from './data'
+
+export async function CommentList(props: {
+  comments: Awaited<ReturnType<typeof getComments>>,
+  locale: any,
+  session?: any,
+  isModerator: boolean
+  timezoneOffset: number,
+}) {
+  return (
+    <div className="flex flex-col" >
+      {props.comments.map(comment => {
+        return (
+          <div key={comment.id}>
+            {/* @ts-expect-error Server Component */}
+            <CommentComponent timezoneOffset={props.timezoneOffset} isModerator={props.isModerator}  session={props.session} locale={props.locale} comment={comment} />
+          </div>
+        )
+      })}
+    </div>
+  )
+}