feat: question ssr (#3977)

src/pages/Howto/Content/Howto/Howto.tsx

@@ -82,8 +82,8 @@ export const Howto = observer(({ howto }: HowtoParams) => {
         commentsCount={totalCommentsCount}
         votedUsefulCount={usefulCount}
         hasUserVotedUseful={voted}
-        onUsefulClick={async () =>
-          await onUsefulClick(voted ? 'delete' : 'add', 'HowtoDescription')
+        onUsefulClick={() =>
+          onUsefulClick(voted ? 'delete' : 'add', 'HowtoDescription')
         }
       />
       <Box sx={{ mt: 9 }}>

src/pages/Question/QuestionEdit.tsx

@@ -1,62 +1,35 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useNavigate, useParams } from '@remix-run/react'
-import { toJS } from 'mobx'
-import { Loader } from 'oa-components'
 import { UserRole } from 'oa-shared'
-import { logger } from 'src/logger'
 import { QuestionForm } from 'src/pages/Question/Content/Common/QuestionForm'
 import { useQuestionStore } from 'src/stores/Question/question.store'
 
-import type { IQuestion } from 'oa-shared'
+import type { IQuestionDB } from 'oa-shared'
 
-export const QuestionEdit = () => {
+type QuestionEdit = {
+  question: IQuestionDB
+}
+
+export const QuestionEdit = ({ question }: QuestionEdit) => {
   const { slug } = useParams()
   const navigate = useNavigate()
   const store = useQuestionStore()
-  const [isLoading, setIsLoading] = useState(true)
-  const [initialValues, setInitialValues] = useState<Partial<IQuestion.Item>>(
-    {},
-  )
 
   useEffect(() => {
-    const fetchQuestion = async () => {
-      logger.debug(`fetchQuestion`, slug)
-
-      if (slug) {
-        const questionDoc = await store.fetchQuestionBySlug(slug)
-        logger.debug(`fetchQuestion.questionDoc`, questionDoc)
-
-        if (questionDoc === null) {
-          navigate('/questions')
-        }
-
-        if (
-          questionDoc?._createdBy !== store.activeUser?.userName &&
-          !store.activeUser?.userRoles?.includes(UserRole.ADMIN)
-        ) {
-          navigate(`/questions/${slug}`)
-          return
-        }
-
-        setInitialValues(toJS(questionDoc || {}))
-      }
-      setIsLoading(false)
+    if (
+      question?._createdBy !== store.activeUser?.userName &&
+      !store.activeUser?.userRoles?.includes(UserRole.ADMIN)
+    ) {
+      navigate(`/questions/${slug}`)
+      return
     }
-
-    fetchQuestion()
-  }, [slug])
+  }, [slug, store.activeUser?.userName])
 
   return (
-    <>
-      {isLoading ? (
-        <Loader />
-      ) : (
-        <QuestionForm
-          data-testid="question-create-form"
-          parentType="edit"
-          formValues={initialValues}
-        />
-      )}
-    </>
+    <QuestionForm
+      data-testid="question-create-form"
+      parentType="edit"
+      formValues={question}
+    />
   )
 }

src/pages/Question/QuestionPage.test.tsx

@@ -16,6 +16,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { QuestionPage } from './QuestionPage'
 
+import type { IQuestionDB } from 'oa-shared'
 import type { Mock } from 'vitest'
 
 const Theme = testingThemeStyles
@@ -62,12 +63,6 @@ describe('Questions', () => {
   beforeEach(() => {
     // Setup a fresh instance of the mock store before each test
     mockQuestionStore = {
-      activeQuestionItem: mockQuestionItem,
-      incrementViewCount: vi.fn(),
-      fetchQuestionBySlug: vi.fn(() => {
-        return mockQuestionItem
-      }),
-      upsertQuestion: vi.fn(),
       toggleSubscriberStatusByUserName: vi.fn(),
       toggleUsefulByUser: vi.fn(),
     }
@@ -92,18 +87,11 @@ describe('Questions', () => {
         _deleted: faker.datatype.boolean(),
         _contentModifiedTimestamp: faker.date.past().toString(),
       }
-      ;(useQuestionStore as Mock).mockReturnValue({
-        ...mockQuestionStore,
-        activeQuestionItem: mockQuestionItem,
-        fetchQuestionBySlug: vi.fn(() => {
-          return mockQuestionItem
-        }),
-      })
 
       // Act
       let wrapper
       act(() => {
-        wrapper = getWrapper()
+        wrapper = getWrapper(mockQuestionItem)
       })
 
       // Assert: Check the breadcrumb items and chevrons
@@ -133,18 +121,11 @@ describe('Questions', () => {
       mockQuestionItem.title =
         'Do you prefer camping near a lake or in a forest?'
       mockQuestionItem.questionCategory = undefined
-      ;(useQuestionStore as Mock).mockReturnValue({
-        ...mockQuestionStore,
-        activeQuestionItem: mockQuestionItem,
-        fetchQuestionBySlug: vi.fn(() => {
-          return mockQuestionItem
-        }),
-      })
 
       // Act
       let wrapper
       act(() => {
-        wrapper = getWrapper()
+        wrapper = getWrapper(mockQuestionItem)
       })
 
       // Assert: Check the breadcrumb items and chevrons
@@ -168,10 +149,14 @@ describe('Questions', () => {
   })
 })
 
-const getWrapper = () => {
+const getWrapper = (question: IQuestionDB) => {
   const router = createMemoryRouter(
     createRoutesFromElements(
-      <Route path="/questions/:slug" key={1} element={<QuestionPage />} />,
+      <Route
+        path="/questions/:slug"
+        key={1}
+        element={<QuestionPage question={question} />}
+      />,
     ),
     {
       initialEntries: ['/questions/question'],