From d8b3b2a2b180232c2c0390b1ab49d8b85458769c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Nunes?= <mario.nunes@create.pt>
Date: Sat, 26 Oct 2024 20:04:57 +0100
Subject: [PATCH 01/10] wip

---
 .../HowtoDescription/HowtoDescription.tsx     |  19 ++-
 .../Research/Content/ResearchArticle.tsx      | 133 +++++-------------
 .../Research/Content/ResearchDescription.tsx  |  35 +++--
 src/pages/Research/research.service.ts        |  54 ++++++-
 src/routes/_.research.$slug._index.tsx        |  39 ++++-
 src/stores/Research/research.store.tsx        |  74 +---------
 6 files changed, 163 insertions(+), 191 deletions(-)

diff --git a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx b/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
index 4f51f0814a..cd3cb759b2 100644
--- a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
+++ b/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
@@ -110,17 +110,14 @@ const HowtoDescription = ({ howto, loggedInUser, ...props }: IProps) => {
             <ClientOnly fallback={<></>}>
               {() => (
                 <>
-                  {props.votedUsefulCount !== undefined &&
-                    howto.moderation === IModerationStatus.ACCEPTED && (
-                      <Box>
-                        <UsefulStatsButton
-                          votedUsefulCount={props.votedUsefulCount}
-                          hasUserVotedUseful={props.hasUserVotedUseful}
-                          isLoggedIn={loggedInUser ? true : false}
-                          onUsefulClick={props.onUsefulClick}
-                        />
-                      </Box>
-                    )}
+                  {howto.moderation === IModerationStatus.ACCEPTED && (
+                    <UsefulStatsButton
+                      votedUsefulCount={props.votedUsefulCount}
+                      hasUserVotedUseful={props.hasUserVotedUseful}
+                      isLoggedIn={loggedInUser ? true : false}
+                      onUsefulClick={props.onUsefulClick}
+                    />
+                  )}
                 </>
               )}
             </ClientOnly>
diff --git a/src/pages/Research/Content/ResearchArticle.tsx b/src/pages/Research/Content/ResearchArticle.tsx
index c27a40ca44..3ae80fe743 100644
--- a/src/pages/Research/Content/ResearchArticle.tsx
+++ b/src/pages/Research/Content/ResearchArticle.tsx
@@ -1,11 +1,10 @@
-import React, { useEffect } from 'react'
-import { Link, useLocation, useParams } from '@remix-run/react'
+import { useEffect } from 'react'
+import { Link, useLocation } from '@remix-run/react'
 import { observer } from 'mobx-react'
 import {
   ArticleCallToAction,
   Button,
   FollowButton,
-  Loader,
   UsefulStatsButton,
   UserEngagementWrapper,
 } from 'oa-components'
@@ -14,7 +13,6 @@ import { trackEvent } from 'src/common/Analytics'
 import { useContributorsData } from 'src/common/hooks/contributorsData'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
 import { Breadcrumbs } from 'src/pages/common/Breadcrumbs/Breadcrumbs'
-import { NotFoundPage } from 'src/pages/NotFound/NotFound'
 import {
   getResearchCommentId,
   getResearchUpdateId,
@@ -24,7 +22,6 @@ import {
   isAllowedToDeleteContent,
   isAllowedToEditContent,
 } from 'src/utils/helpers'
-import { seoTagsUpdate, SeoTagsUpdateComponent } from 'src/utils/seo'
 import { Box, Flex } from 'theme-ui'
 
 import {
@@ -34,19 +31,20 @@ import {
 import ResearchDescription from './ResearchDescription'
 import ResearchUpdate from './ResearchUpdate'
 
-import type { IUploadedFileMeta, IUser } from 'oa-shared'
+import type { IResearchDB, IUser } from 'oa-shared'
 
 const areCommentsVisible = (updateId) => {
   return updateId === getResearchUpdateId(window.location.hash)
 }
 
-const ResearchArticle = observer(() => {
-  const { slug } = useParams()
+type ResearchArticleProps = {
+  research: IResearchDB
+}
+
+const ResearchArticle = observer(({ research }: ResearchArticleProps) => {
   const location = useLocation()
   const researchStore = useResearchStore()
   const { aggregationsStore } = useCommonStores().stores
-  const [isLoading, setIsLoading] = React.useState(true)
-  const item = researchStore.activeResearchItem
   const loggedInUser = researchStore.activeUser
 
   const moderateResearch = async (accepted: boolean) => {
@@ -86,59 +84,26 @@ const ResearchArticle = observer(() => {
     section?.scrollIntoView({ behavior: 'smooth', block: 'start' })
   }
 
-  useEffect(() => {
-    const init = async () => {
-      const researchItem = await researchStore.setActiveResearchItemBySlug(slug)
-      setIsLoading(false)
-      setTimeout(() => {
-        // Needed for browser and loading delay issues
-        scrollIntoRelevantSection()
-      }, 500)
-
-      // Update SEO tags
-      if (researchItem) {
-        // Use whatever image used in most recent update for SEO image
-        const latestImage = researchItem?.updates
-          ?.map((u) => (u.images?.[0] as IUploadedFileMeta)?.downloadUrl)
-          .filter((url: string) => !!url)
-          .pop()
-        seoTagsUpdate({
-          title: `${researchItem.title} - Research`,
-          description: researchItem.description,
-          imageUrl: latestImage,
-        })
-      }
-    }
-    setIsLoading(true)
-    init()
-
-    // Reset the store's active item and seo tags on component cleanup
-    return () => {
-      researchStore.setActiveResearchItemBySlug()
-      seoTagsUpdate({})
-    }
-  }, [slug])
-
   useEffect(() => {
     scrollIntoRelevantSection()
   }, [location.hash])
 
   const onFollowClick = (researchSlug: string) => {
-    if (!loggedInUser?.userName || !item) {
+    if (!loggedInUser?.userName || !research) {
       return null
     }
 
     let action: string
 
-    if (item.subscribers?.includes(loggedInUser?.userName || '')) {
+    if (research.subscribers?.includes(loggedInUser?.userName || '')) {
       researchStore.removeSubscriberFromResearchArticle(
-        item._id,
+        research._id,
         loggedInUser?.userName,
       )
       action = 'Unsubscribed'
     } else {
       researchStore.addSubscriberToResearchArticle(
-        item._id,
+        research._id,
         loggedInUser?.userName,
       )
       action = 'Subscribed'
@@ -150,71 +115,51 @@ const ResearchArticle = observer(() => {
     })
   }
 
-  const collaborators = Array.isArray(item?.collaborators)
-    ? item?.collaborators
-    : ((item?.collaborators as string | undefined)?.split(',') || []).filter(
-        Boolean,
-      )
+  const collaborators = Array.isArray(research?.collaborators)
+    ? research?.collaborators
+    : (
+        (research?.collaborators as string | undefined)?.split(',') || []
+      ).filter(Boolean)
 
   const contributors = useContributorsData(collaborators || [])
 
   const isEditable =
     !!researchStore.activeUser &&
-    !!item &&
-    isAllowedToEditContent(item, researchStore.activeUser)
+    isAllowedToEditContent(research, researchStore.activeUser)
   const isDeletable =
     !!researchStore.activeUser &&
-    !!item &&
-    isAllowedToDeleteContent(item, researchStore.activeUser)
-
-  const researchAuthor = item
-    ? {
-        userName: item._createdBy,
-        countryCode: item.creatorCountry,
-        isVerified: aggregationsStore.isVerified(item._createdBy),
-      }
-    : undefined
-
-  if (isLoading) {
-    return <Loader />
-  }
+    isAllowedToDeleteContent(research, researchStore.activeUser)
 
-  if (!item) {
-    return <NotFoundPage />
+  const researchAuthor = {
+    userName: research._createdBy,
+    countryCode: research.creatorCountry,
+    isVerified: aggregationsStore.isVerified(research._createdBy),
   }
 
-  const research = { ...item }
-
   return (
     <Box sx={{ width: '100%', maxWidth: '1000px', alignSelf: 'center' }}>
-      <SeoTagsUpdateComponent
-        title={`${item.title} - Research`}
-        description={item.description}
-        imageUrl={(item.updates?.at(0)?.images?.[0] as any)?.downloadUrl}
-      />
-
-      <Breadcrumbs content={item} variant="research" />
+      <Breadcrumbs content={research} variant="research" />
       <ResearchDescription
         research={research}
-        key={item._id}
+        key={research._id}
         votedUsefulCount={researchStore.votedUsefulCount}
         loggedInUser={loggedInUser as IUser}
         isEditable={isEditable}
         isDeletable={isDeletable}
-        needsModeration={researchStore.needsModeration(item)}
+        needsModeration={researchStore.needsModeration(research)}
         hasUserVotedUseful={researchStore.userVotedActiveResearchUseful}
         hasUserSubscribed={researchStore.userHasSubscribed}
         moderateResearch={moderateResearch}
         onUsefulClick={() =>
-          onUsefulClick(item._id, item.slug, 'ResearchDescription')
+          onUsefulClick(research._id, research.slug, 'ResearchDescription')
         }
-        onFollowClick={() => onFollowClick(item.slug)}
+        onFollowClick={() => onFollowClick(research.slug)}
         contributors={contributors}
         subscribersCount={researchStore.subscribersCount}
-        commentsCount={item.totalCommentCount}
+        commentsCount={research.totalCommentCount}
         updatesCount={
-          item.updates?.filter((u) =>
-            researchUpdateStatusFilter(item, u, researchStore.activeUser),
+          research.updates?.filter((u) =>
+            researchUpdateStatusFilter(research, u, researchStore.activeUser),
           ).length || 0
         }
       />
@@ -226,15 +171,15 @@ const ResearchArticle = observer(() => {
           gap: [4, 6],
         }}
       >
-        {item &&
-          getPublicUpdates(item, researchStore.activeUser).map(
+        {research &&
+          getPublicUpdates(research, researchStore.activeUser).map(
             (update, index) => (
               <ResearchUpdate
                 update={update}
                 key={update._id}
                 updateIndex={index}
                 isEditable={isEditable}
-                slug={item.slug}
+                slug={research.slug}
                 showComments={areCommentsVisible(update._id)}
               />
             ),
@@ -252,7 +197,7 @@ const ResearchArticle = observer(() => {
               author={researchAuthor}
               contributors={contributors}
             >
-              {item.moderation === IModerationStatus.ACCEPTED && (
+              {research.moderation === IModerationStatus.ACCEPTED && (
                 <UsefulStatsButton
                   isLoggedIn={!!loggedInUser}
                   votedUsefulCount={researchStore.votedUsefulCount}
@@ -261,8 +206,8 @@ const ResearchArticle = observer(() => {
                   }
                   onUsefulClick={async () =>
                     await onUsefulClick(
-                      item._id,
-                      item.slug,
+                      research._id,
+                      research.slug,
                       'ArticleCallToAction',
                     )
                   }
@@ -271,7 +216,7 @@ const ResearchArticle = observer(() => {
               <FollowButton
                 isLoggedIn={!!loggedInUser}
                 hasUserSubscribed={researchStore.userHasSubscribed}
-                onFollowClick={() => onFollowClick(item.slug)}
+                onFollowClick={() => onFollowClick(research.slug)}
               />
             </ArticleCallToAction>
           )}
@@ -280,7 +225,7 @@ const ResearchArticle = observer(() => {
 
       {isEditable && (
         <Flex my={4}>
-          <Link to={`/research/${item.slug}/new-update`}>
+          <Link to={`/research/${research.slug}/new-update`}>
             <Button
               type="button"
               large
diff --git a/src/pages/Research/Content/ResearchDescription.tsx b/src/pages/Research/Content/ResearchDescription.tsx
index faf45556ef..61bb50367e 100644
--- a/src/pages/Research/Content/ResearchDescription.tsx
+++ b/src/pages/Research/Content/ResearchDescription.tsx
@@ -12,6 +12,8 @@ import {
   Username,
 } from 'oa-components'
 import { IModerationStatus } from 'oa-shared'
+// eslint-disable-next-line import/no-unresolved
+import { ClientOnly } from 'remix-utils/client-only'
 import { trackEvent } from 'src/common/Analytics'
 import { TagList } from 'src/common/Tags/TagsList'
 import { logger } from 'src/logger'
@@ -115,20 +117,25 @@ const ResearchDescription = ({
           )}
           <Flex sx={{ justifyContent: 'space-between' }}>
             <Flex sx={{ flexWrap: 'wrap', gap: '10px' }}>
-              {research.moderation === IModerationStatus.ACCEPTED && (
-                <UsefulStatsButton
-                  votedUsefulCount={votedUsefulCount}
-                  hasUserVotedUseful={props.hasUserVotedUseful}
-                  isLoggedIn={props.loggedInUser ? true : false}
-                  onUsefulClick={props.onUsefulClick}
-                />
-              )}
-              <FollowButton
-                hasUserSubscribed={props.hasUserSubscribed}
-                isLoggedIn={props.loggedInUser ? true : false}
-                onFollowClick={props.onFollowClick}
-              ></FollowButton>
-              {/* Check if research should be moderated */}
+              <ClientOnly fallback={<></>}>
+                {() => (
+                  <>
+                    {research.moderation === IModerationStatus.ACCEPTED && (
+                      <UsefulStatsButton
+                        votedUsefulCount={votedUsefulCount}
+                        hasUserVotedUseful={props.hasUserVotedUseful}
+                        isLoggedIn={!!props.loggedInUser}
+                        onUsefulClick={props.onUsefulClick}
+                      />
+                    )}
+                    <FollowButton
+                      hasUserSubscribed={props.hasUserSubscribed}
+                      isLoggedIn={!!props.loggedInUser}
+                      onFollowClick={props.onFollowClick}
+                    />
+                  </>
+                )}
+              </ClientOnly>
               {props.needsModeration &&
                 research.moderation ===
                   IModerationStatus.AWAITING_MODERATION && (
diff --git a/src/pages/Research/research.service.ts b/src/pages/Research/research.service.ts
index 0c38104a62..b43dd20bf3 100644
--- a/src/pages/Research/research.service.ts
+++ b/src/pages/Research/research.service.ts
@@ -11,6 +11,7 @@ import {
 } from 'firebase/firestore'
 import { IModerationStatus } from 'oa-shared'
 import { DB_ENDPOINTS } from 'src/models/dbEndpoints'
+import { changeUserReferenceToPlainText } from 'src/utils/mentions.utils'
 
 import { firestore } from '../../utils/firebase'
 
@@ -20,7 +21,12 @@ import type {
   QueryFilterConstraint,
   QueryNonFilterConstraint,
 } from 'firebase/firestore'
-import type { ICategory, IResearch, ResearchStatus } from 'oa-shared'
+import type {
+  ICategory,
+  IResearch,
+  IResearchDB,
+  ResearchStatus,
+} from 'oa-shared'
 import type { ResearchSortOption } from './ResearchSortOptions'
 
 const search = async (
@@ -165,11 +171,57 @@ const getDrafts = async (userId: string) => {
   return docs.docs ? docs.docs.map((x) => x.data() as IResearch.Item) : []
 }
 
+const getBySlug = async (slug: string) => {
+  // Get all that match the slug, to avoid creating an index (blocker for cypress tests)
+  let snapshot = await getDocs(
+    query(
+      collection(firestore, DB_ENDPOINTS.research),
+      where('slug', '==', slug),
+    ),
+  )
+
+  if (snapshot.size === 0) {
+    // try previous slugs if slug is not recognized as primary
+    snapshot = await getDocs(
+      query(
+        collection(firestore, DB_ENDPOINTS.research),
+        where('previousSlugs', 'array-contains', slug),
+      ),
+    )
+  }
+
+  if (snapshot.size === 0) {
+    return null
+  }
+
+  const research = snapshot.docs[0].data() as IResearchDB
+
+  if (!research) {
+    return null
+  }
+
+  // Change all UserReferences to mentions
+  if (research.description) {
+    research.description = changeUserReferenceToPlainText(research.description)
+  }
+
+  for (const update of research.updates) {
+    if (!update.description) {
+      continue
+    }
+
+    update.description = changeUserReferenceToPlainText(update.description)
+  }
+
+  return research
+}
+
 export const researchService = {
   search,
   getResearchCategories,
   getDrafts,
   getDraftCount,
+  getBySlug,
 }
 
 export const exportedForTesting = {
diff --git a/src/routes/_.research.$slug._index.tsx b/src/routes/_.research.$slug._index.tsx
index 2252420d72..bbcee02d25 100644
--- a/src/routes/_.research.$slug._index.tsx
+++ b/src/routes/_.research.$slug._index.tsx
@@ -1,9 +1,42 @@
+import { json } from '@remix-run/node'
+import { useLoaderData } from '@remix-run/react'
+import { NotFoundPage } from 'src/pages/NotFound/NotFound'
 import ResearchArticle from 'src/pages/Research/Content/ResearchArticle'
+import { researchService } from 'src/pages/Research/research.service'
+import { generateTags, mergeMeta } from 'src/utils/seo.utils'
 
-export async function clientLoader() {
-  return null
+import type { LoaderFunctionArgs } from '@remix-run/node'
+import type { IResearchDB } from 'oa-shared'
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  const research = await researchService.getBySlug(params.slug as string)
+
+  return json({ research })
 }
 
+export const meta = mergeMeta<typeof loader>(({ data }) => {
+  const research = data?.research as IResearchDB
+
+  if (!research) {
+    return []
+  }
+
+  const title = `${research.title} - Research - ${import.meta.env.VITE_SITE_NAME}`
+
+  return generateTags(
+    title,
+    research.description,
+    (research.updates?.at(0)?.images?.[0] as any)?.downloadUrl,
+  )
+})
+
 export default function Index() {
-  return <ResearchArticle />
+  const data = useLoaderData<typeof loader>()
+  const research = data.research as IResearchDB
+
+  if (!research) {
+    return <NotFoundPage />
+  }
+
+  return <ResearchArticle research={research} />
 }
diff --git a/src/stores/Research/research.store.tsx b/src/stores/Research/research.store.tsx
index a7aa04606f..d3206cd5d7 100644
--- a/src/stores/Research/research.store.tsx
+++ b/src/stores/Research/research.store.tsx
@@ -8,17 +8,14 @@ import {
   runInAction,
   toJS,
 } from 'mobx'
-import { IModerationStatus, ResearchStatus } from 'oa-shared'
+import { IModerationStatus } from 'oa-shared'
 import { logger } from 'src/logger'
 import { getUserCountry } from 'src/utils/getUserCountry'
 import { hasAdminRights, needsModeration, randomID } from 'src/utils/helpers'
 import { getKeywords } from 'src/utils/searchHelper'
 
 import { incrementDocViewCount } from '../common/incrementDocViewCount'
-import {
-  changeMentionToUserReference,
-  changeUserReferenceToPlainText,
-} from '../common/mentions'
+import { changeMentionToUserReference } from '../common/mentions'
 import { ModuleStore } from '../common/module.store'
 import { toggleDocSubscriberStatusByUserName } from '../common/toggleDocSubscriberStatusByUserName'
 import { toggleDocUsefulByUser } from '../common/toggleDocUsefulByUser'
@@ -48,10 +45,8 @@ export class ResearchStore extends ModuleStore {
   constructor(rootStore: IRootStore) {
     super(rootStore, COLLECTION_NAME)
     makeObservable(this, {
-      activeResearchItem: observable,
       researchUploadStatus: observable,
       updateUploadStatus: observable,
-      setActiveResearchItemBySlug: action,
       toggleUsefulByUser: action,
       deleteResearch: action,
       updateResearchUploadStatus: action,
@@ -69,42 +64,6 @@ export class ResearchStore extends ModuleStore {
     })
   }
 
-  public async setActiveResearchItemBySlug(slug?: string) {
-    logger.debug(`setActiveResearchItemBySlug:`, { slug })
-    let activeResearchItem: IResearchDB | null = null
-
-    const enrichResearchUpdate = async (update: IResearch.UpdateDB) => {
-      const enrichedResearchUpdated = cloneDeep(update)
-      enrichedResearchUpdated.description = changeUserReferenceToPlainText(
-        update.description,
-      )
-      return enrichedResearchUpdated
-    }
-
-    if (slug) {
-      activeResearchItem = await this._getResearchItemBySlug(slug)
-
-      if (activeResearchItem) {
-        activeResearchItem.collaborators =
-          activeResearchItem.collaborators || []
-        activeResearchItem.description = changeUserReferenceToPlainText(
-          activeResearchItem.description,
-        )
-        activeResearchItem.researchStatus =
-          activeResearchItem.researchStatus || ResearchStatus.IN_PROGRESS
-        const researchUpdates = activeResearchItem.updates || []
-        activeResearchItem.updates = await Promise.all(
-          researchUpdates.map(enrichResearchUpdate),
-        )
-      }
-    }
-
-    runInAction(() => {
-      this.activeResearchItem = activeResearchItem
-    })
-    return activeResearchItem
-  }
-
   public async addSubscriberToResearchArticle(
     docId: string,
     userId: string,
@@ -265,16 +224,9 @@ export class ResearchStore extends ModuleStore {
       }
       logger.debug('populating database', researchItem)
       // set the database document
-      const updatedItem = await this._updateResearchItem(
-        dbRef,
-        researchItem,
-        true,
-      )
+      await this._updateResearchItem(dbRef, researchItem, true)
       this.updateResearchUploadStatus('Database')
       logger.debug('post added')
-      if (updatedItem) {
-        this.setActiveResearchItemBySlug(updatedItem.slug)
-      }
       // complete
       this.updateResearchUploadStatus('Complete')
     } catch (error) {
@@ -407,13 +359,7 @@ export class ResearchStore extends ModuleStore {
         newItem.updates[existingUpdateIndex]._deleted = true
 
         // set the database document
-        const updatedItem = await this._updateResearchItem(dbRef, newItem, true)
-
-        if (updatedItem) {
-          this.setActiveResearchItemBySlug(updatedItem.slug)
-        }
-
-        return updatedItem
+        await this._updateResearchItem(dbRef, newItem, true)
       } catch (error) {
         logger.error('error deleting article', error)
       }
@@ -448,11 +394,7 @@ export class ResearchStore extends ModuleStore {
           updates: [...toJS(newUpdates)],
         }
 
-        const updatedItem = await this._updateResearchItem(dbRef, newItem)
-
-        if (updatedItem) {
-          this.setActiveResearchItemBySlug(updatedItem.slug)
-        }
+        await this._updateResearchItem(dbRef, newItem)
       }
 
       return downloadCount
@@ -740,7 +682,7 @@ export class ResearchStore extends ModuleStore {
     return null
   }
 
-  private async _toggleSubscriber(docId, userId) {
+  private async _toggleSubscriber(docId: string, userId: string) {
     const updatedItem = await toggleDocSubscriberStatusByUserName(
       this.db,
       COLLECTION_NAME,
@@ -748,10 +690,6 @@ export class ResearchStore extends ModuleStore {
       userId,
     )
 
-    if (updatedItem) {
-      this.setActiveResearchItemBySlug(updatedItem.slug)
-    }
-
     return updatedItem
   }
 }

From 933cea1b50e336674c03fe38d4eb1ef3cd12e278 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Nunes?= <mario.nunes@create.pt>
Date: Sat, 26 Oct 2024 21:00:15 +0100
Subject: [PATCH 02/10] feat: research ssr

---
 .../src/FollowButton/FollowButton.tsx         |   6 +-
 .../UsefulStatsButton/UsefulStatsButton.tsx   |   7 +-
 src/pages/Howto/Content/Howto/Howto.tsx       |  11 +-
 .../HowtoDescription/HowtoDescription.tsx     |   1 -
 .../Research/Content/ResearchArticle.tsx      | 137 ++++++++++--------
 .../Research/Content/ResearchDescription.tsx  |  37 +----
 src/routes/_.research.$slug._index.tsx        |   2 +
 src/stores/Howto/howto.store.tsx              |   5 -
 src/stores/Research/research.store.tsx        | 112 ++++----------
 9 files changed, 126 insertions(+), 192 deletions(-)

diff --git a/packages/components/src/FollowButton/FollowButton.tsx b/packages/components/src/FollowButton/FollowButton.tsx
index 56f0554d3c..2f704a7732 100644
--- a/packages/components/src/FollowButton/FollowButton.tsx
+++ b/packages/components/src/FollowButton/FollowButton.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { useNavigate } from '@remix-run/react'
 
 import { Button } from '../Button/Button'
@@ -15,6 +16,7 @@ export interface IProps {
 export const FollowButton = (props: IProps) => {
   const { hasUserSubscribed, isLoggedIn, onFollowClick, sx } = props
   const navigate = useNavigate()
+  const uuid = useMemo(() => crypto.randomUUID(), [])
 
   return (
     <>
@@ -22,7 +24,7 @@ export const FollowButton = (props: IProps) => {
         type="button"
         data-testid={isLoggedIn ? 'follow-button' : 'follow-redirect'}
         data-cy={isLoggedIn ? 'follow-button' : 'follow-redirect'}
-        data-tooltip-id="login-follow"
+        data-tooltip-id={uuid}
         data-tooltip-content={isLoggedIn ? '' : 'Login to follow'}
         icon="thunderbolt"
         variant="outline"
@@ -36,7 +38,7 @@ export const FollowButton = (props: IProps) => {
       >
         {hasUserSubscribed ? 'Following' : 'Follow'}
       </Button>
-      <Tooltip id="login-follow" />
+      <Tooltip id={uuid} />
     </>
   )
 }
diff --git a/packages/components/src/UsefulStatsButton/UsefulStatsButton.tsx b/packages/components/src/UsefulStatsButton/UsefulStatsButton.tsx
index e29394243b..0698587768 100644
--- a/packages/components/src/UsefulStatsButton/UsefulStatsButton.tsx
+++ b/packages/components/src/UsefulStatsButton/UsefulStatsButton.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useNavigate } from '@remix-run/react'
 import { Text, useThemeUI } from 'theme-ui'
 
@@ -18,6 +18,7 @@ export interface IProps {
 export const UsefulStatsButton = (props: IProps) => {
   const { theme } = useThemeUI() as any
   const navigate = useNavigate()
+  const uuid = useMemo(() => crypto.randomUUID(), [])
 
   const [disabled, setDisabled] = useState<boolean>()
 
@@ -35,7 +36,7 @@ export const UsefulStatsButton = (props: IProps) => {
     <>
       <Button
         type="button"
-        data-tooltip-id="login-vote"
+        data-tooltip-id={uuid}
         data-tooltip-content={props.isLoggedIn ? '' : 'Login to add your vote'}
         data-cy={props.isLoggedIn ? 'vote-useful' : 'vote-useful-redirect'}
         onClick={() =>
@@ -73,7 +74,7 @@ export const UsefulStatsButton = (props: IProps) => {
           {props.hasUserVotedUseful ? 'Marked as useful' : 'Mark as useful'}
         </Text>
       </Button>
-      <Tooltip id="login-vote" />
+      <Tooltip id={uuid} />
     </>
   )
 }
diff --git a/src/pages/Howto/Content/Howto/Howto.tsx b/src/pages/Howto/Content/Howto/Howto.tsx
index 4d044246e3..6cbf644d0f 100644
--- a/src/pages/Howto/Content/Howto/Howto.tsx
+++ b/src/pages/Howto/Content/Howto/Howto.tsx
@@ -50,7 +50,6 @@ export const Howto = observer(({ howto }: HowtoParams) => {
   }, [howtoStore?.activeUser])
 
   const onUsefulClick = async (
-    howToSlug: string,
     vote: 'add' | 'delete',
     eventCategory: string,
   ) => {
@@ -69,7 +68,7 @@ export const Howto = observer(({ howto }: HowtoParams) => {
     trackEvent({
       category: eventCategory,
       action: vote === 'add' ? 'HowtoUseful' : 'HowtoUsefulRemoved',
-      label: howToSlug,
+      label: howto.slug,
     })
   }
 
@@ -79,17 +78,12 @@ export const Howto = observer(({ howto }: HowtoParams) => {
       <HowtoDescription
         howto={howto}
         key={howto._id}
-        needsModeration={howtoStore.needsModeration(howto)}
         loggedInUser={loggedInUser as IUser}
         commentsCount={totalCommentsCount}
         votedUsefulCount={usefulCount}
         hasUserVotedUseful={voted}
         onUsefulClick={async () =>
-          await onUsefulClick(
-            howto.slug,
-            voted ? 'delete' : 'add',
-            'HowtoDescription',
-          )
+          await onUsefulClick(voted ? 'delete' : 'add', 'HowtoDescription')
         }
       />
       <Box sx={{ mt: 9 }}>
@@ -139,7 +133,6 @@ export const Howto = observer(({ howto }: HowtoParams) => {
                   isLoggedIn={!!loggedInUser}
                   onUsefulClick={() =>
                     onUsefulClick(
-                      howto.slug,
                       voted ? 'delete' : 'add',
                       'ArticleCallToAction',
                     )
diff --git a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx b/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
index cd3cb759b2..68866408a3 100644
--- a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
+++ b/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
@@ -36,7 +36,6 @@ import type { IHowtoDB, ITag, IUser } from 'oa-shared'
 interface IProps {
   howto: IHowtoDB & { tagList?: ITag[] }
   loggedInUser: IUser | undefined
-  needsModeration: boolean
   commentsCount: number
   votedUsefulCount?: number
   verified?: boolean
diff --git a/src/pages/Research/Content/ResearchArticle.tsx b/src/pages/Research/Content/ResearchArticle.tsx
index 3ae80fe743..092755f938 100644
--- a/src/pages/Research/Content/ResearchArticle.tsx
+++ b/src/pages/Research/Content/ResearchArticle.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { Link, useLocation } from '@remix-run/react'
 import { observer } from 'mobx-react'
 import {
@@ -9,6 +9,8 @@ import {
   UserEngagementWrapper,
 } from 'oa-components'
 import { IModerationStatus } from 'oa-shared'
+// eslint-disable-next-line import/no-unresolved
+import { ClientOnly } from 'remix-utils/client-only'
 import { trackEvent } from 'src/common/Analytics'
 import { useContributorsData } from 'src/common/hooks/contributorsData'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
@@ -46,20 +48,32 @@ const ResearchArticle = observer(({ research }: ResearchArticleProps) => {
   const researchStore = useResearchStore()
   const { aggregationsStore } = useCommonStores().stores
   const loggedInUser = researchStore.activeUser
+  const [subscribed, setSubscribed] = useState<boolean>(
+    research.subscribers?.includes(loggedInUser?.userName || '') || false,
+  )
+  const [subscribersCount, setSubscribersCount] = useState<number>(
+    research.subscribers?.length || 0,
+  )
+  const [voted, setVoted] = useState<boolean>(false)
+  const [usefulCount, setUsefulCount] = useState<number>(
+    research.votedUsefulBy?.length || 0,
+  )
 
-  const moderateResearch = async (accepted: boolean) => {
-    const item = researchStore.activeResearchItem
-    if (item) {
-      item.moderation = accepted
-        ? IModerationStatus.ACCEPTED
-        : IModerationStatus.REJECTED
-      await researchStore.moderateResearch(item)
+  useEffect(() => {
+    // This could be improved if we can load the user profile server-side
+    if (researchStore?.activeUser) {
+      if (research.votedUsefulBy?.includes(researchStore.activeUser._id)) {
+        setVoted(true)
+      }
+
+      if (research.subscribers?.includes(researchStore.activeUser._id)) {
+        setSubscribed(true)
+      }
     }
-  }
+  }, [researchStore?.activeUser])
 
   const onUsefulClick = async (
-    researchId: string,
-    researchSlug: string,
+    vote: 'add' | 'delete',
     eventCategory = 'Research',
   ) => {
     if (!loggedInUser?.userName) {
@@ -67,12 +81,17 @@ const ResearchArticle = observer(({ research }: ResearchArticleProps) => {
     }
 
     // Trigger update without waiting
-    await researchStore.toggleUsefulByUser(researchId, loggedInUser?.userName)
-    const hasUserVotedUseful = researchStore.userVotedActiveResearchUseful
+    await researchStore.toggleUsefulByUser(research, loggedInUser?.userName)
+    setVoted((prev) => !prev)
+
+    setUsefulCount((prev) => {
+      return vote === 'add' ? prev + 1 : prev - 1
+    })
+
     trackEvent({
       category: eventCategory,
-      action: hasUserVotedUseful ? 'ResearchUseful' : 'ResearchUsefulRemoved',
-      label: researchSlug,
+      action: vote === 'add' ? 'ResearchUseful' : 'ResearchUsefulRemoved',
+      label: research.slug,
     })
   }
 
@@ -95,7 +114,7 @@ const ResearchArticle = observer(({ research }: ResearchArticleProps) => {
 
     let action: string
 
-    if (research.subscribers?.includes(loggedInUser?.userName || '')) {
+    if (subscribed) {
       researchStore.removeSubscriberFromResearchArticle(
         research._id,
         loggedInUser?.userName,
@@ -108,6 +127,11 @@ const ResearchArticle = observer(({ research }: ResearchArticleProps) => {
       )
       action = 'Subscribed'
     }
+
+    setSubscribersCount((prev) => prev + (subscribed ? -1 : 1))
+    // toggle subscribed
+    setSubscribed((prev) => !prev)
+
     trackEvent({
       category: 'Research',
       action: action,
@@ -142,20 +166,18 @@ const ResearchArticle = observer(({ research }: ResearchArticleProps) => {
       <ResearchDescription
         research={research}
         key={research._id}
-        votedUsefulCount={researchStore.votedUsefulCount}
+        votedUsefulCount={usefulCount}
         loggedInUser={loggedInUser as IUser}
         isEditable={isEditable}
         isDeletable={isDeletable}
-        needsModeration={researchStore.needsModeration(research)}
-        hasUserVotedUseful={researchStore.userVotedActiveResearchUseful}
-        hasUserSubscribed={researchStore.userHasSubscribed}
-        moderateResearch={moderateResearch}
+        hasUserVotedUseful={voted}
+        hasUserSubscribed={subscribed}
         onUsefulClick={() =>
-          onUsefulClick(research._id, research.slug, 'ResearchDescription')
+          onUsefulClick(voted ? 'delete' : 'add', 'ResearchDescription')
         }
         onFollowClick={() => onFollowClick(research.slug)}
         contributors={contributors}
-        subscribersCount={researchStore.subscribersCount}
+        subscribersCount={subscribersCount}
         commentsCount={research.totalCommentCount}
         updatesCount={
           research.updates?.filter((u) =>
@@ -186,42 +208,43 @@ const ResearchArticle = observer(({ research }: ResearchArticleProps) => {
           )}
       </Flex>
 
-      <UserEngagementWrapper>
-        <Box
-          sx={{
-            marginBottom: [6, 6, 12],
-          }}
-        >
-          {researchAuthor && (
-            <ArticleCallToAction
-              author={researchAuthor}
-              contributors={contributors}
+      <ClientOnly fallback={<></>}>
+        {() => (
+          <UserEngagementWrapper>
+            <Box
+              sx={{
+                marginBottom: [6, 6, 12],
+              }}
             >
-              {research.moderation === IModerationStatus.ACCEPTED && (
-                <UsefulStatsButton
-                  isLoggedIn={!!loggedInUser}
-                  votedUsefulCount={researchStore.votedUsefulCount}
-                  hasUserVotedUseful={
-                    researchStore.userVotedActiveResearchUseful
-                  }
-                  onUsefulClick={async () =>
-                    await onUsefulClick(
-                      research._id,
-                      research.slug,
-                      'ArticleCallToAction',
-                    )
-                  }
-                />
+              {researchAuthor && (
+                <ArticleCallToAction
+                  author={researchAuthor}
+                  contributors={contributors}
+                >
+                  {research.moderation === IModerationStatus.ACCEPTED && (
+                    <UsefulStatsButton
+                      isLoggedIn={!!loggedInUser}
+                      votedUsefulCount={usefulCount}
+                      hasUserVotedUseful={voted}
+                      onUsefulClick={() =>
+                        onUsefulClick(
+                          voted ? 'delete' : 'add',
+                          'ArticleCallToAction',
+                        )
+                      }
+                    />
+                  )}
+                  <FollowButton
+                    isLoggedIn={!!loggedInUser}
+                    hasUserSubscribed={subscribed}
+                    onFollowClick={() => onFollowClick(research.slug)}
+                  />
+                </ArticleCallToAction>
               )}
-              <FollowButton
-                isLoggedIn={!!loggedInUser}
-                hasUserSubscribed={researchStore.userHasSubscribed}
-                onFollowClick={() => onFollowClick(research.slug)}
-              />
-            </ArticleCallToAction>
-          )}
-        </Box>
-      </UserEngagementWrapper>
+            </Box>
+          </UserEngagementWrapper>
+        )}
+      </ClientOnly>
 
       {isEditable && (
         <Flex my={4}>
diff --git a/src/pages/Research/Content/ResearchDescription.tsx b/src/pages/Research/Content/ResearchDescription.tsx
index 61bb50367e..836c6a5f04 100644
--- a/src/pages/Research/Content/ResearchDescription.tsx
+++ b/src/pages/Research/Content/ResearchDescription.tsx
@@ -25,21 +25,19 @@ import { Box, Card, Divider, Flex, Heading, Text } from 'theme-ui'
 import { ContentAuthorTimestamp } from '../../common/ContentAuthorTimestamp/ContentAuthorTimestamp'
 import { researchStatusColour } from '../researchHelpers'
 
-import type { IResearch, ITag, IUser } from 'oa-shared'
+import type { IResearch, IResearchDB, ITag, IUser } from 'oa-shared'
 
 interface IProps {
   research: IResearch.ItemDB & { tagList?: ITag[] }
   isEditable: boolean
   isDeletable: boolean
   loggedInUser: IUser | undefined
-  needsModeration: boolean
   votedUsefulCount?: number
   hasUserVotedUseful: boolean
   hasUserSubscribed: boolean
   subscribersCount: number
   commentsCount: number
   updatesCount: number
-  moderateResearch: (accepted: boolean) => void
   onUsefulClick: () => Promise<void>
   onFollowClick: () => void
   contributors?: { userName: string; isVerified: boolean }[]
@@ -60,19 +58,19 @@ const ResearchDescription = ({
 
   const store = useResearchStore()
 
-  const handleDelete = async (_id: string) => {
+  const handleDelete = async (research: IResearchDB) => {
     try {
-      await store.deleteResearch(_id)
+      await store.deleteResearch(research._id)
       trackEvent({
         category: 'Research',
         action: 'Deleted',
-        label: store.activeResearchItem?.title,
+        label: research.title,
       })
       logger.debug(
         {
           category: 'Research',
           action: 'Deleted',
-          label: store.activeResearchItem?.title,
+          label: research.title,
         },
         'Research marked for deletion',
       )
@@ -136,27 +134,6 @@ const ResearchDescription = ({
                   </>
                 )}
               </ClientOnly>
-              {props.needsModeration &&
-                research.moderation ===
-                  IModerationStatus.AWAITING_MODERATION && (
-                  <Flex sx={{ justifyContent: 'space-between' }}>
-                    <Button
-                      type="button"
-                      data-cy="accept"
-                      variant="primary"
-                      icon="check"
-                      mr={1}
-                      onClick={() => props.moderateResearch(true)}
-                    />
-                    <Button
-                      type="button"
-                      data-cy="reject-research"
-                      variant="outline"
-                      icon="delete"
-                      onClick={() => props.moderateResearch(false)}
-                    />
-                  </Flex>
-                )}
               {/* Show edit button for the creator of the research OR a super-admin */}
               {isEditable && (
                 <Link to={'/research/' + research.slug + '/edit'}>
@@ -185,9 +162,7 @@ const ResearchDescription = ({
                     message="Are you sure you want to delete this Research?"
                     confirmButtonText="Delete"
                     handleCancel={() => setShowDeleteModal(false)}
-                    handleConfirm={() =>
-                      handleDelete && handleDelete(research._id)
-                    }
+                    handleConfirm={() => handleDelete && handleDelete(research)}
                   />
                 </Fragment>
               )}
diff --git a/src/routes/_.research.$slug._index.tsx b/src/routes/_.research.$slug._index.tsx
index bbcee02d25..70712bcde1 100644
--- a/src/routes/_.research.$slug._index.tsx
+++ b/src/routes/_.research.$slug._index.tsx
@@ -21,6 +21,8 @@ export const meta = mergeMeta<typeof loader>(({ data }) => {
     return []
   }
 
+  console.log(JSON.stringify(research))
+
   const title = `${research.title} - Research - ${import.meta.env.VITE_SITE_NAME}`
 
   return generateTags(
diff --git a/src/stores/Howto/howto.store.tsx b/src/stores/Howto/howto.store.tsx
index 880cb97e14..8d90e20717 100644
--- a/src/stores/Howto/howto.store.tsx
+++ b/src/stores/Howto/howto.store.tsx
@@ -1,7 +1,6 @@
 import { action, makeObservable, observable, runInAction, toJS } from 'mobx'
 import { logger } from 'src/logger'
 import { getUserCountry } from 'src/utils/getUserCountry'
-import { needsModeration } from 'src/utils/helpers'
 import { getKeywords } from 'src/utils/searchHelper'
 
 import { incrementDocViewCount } from '../common/incrementDocViewCount'
@@ -100,10 +99,6 @@ export class HowtoStore extends ModuleStore {
     })
   }
 
-  public needsModeration(howto: IHowto) {
-    return needsModeration(howto, toJS(this.activeUser) as IUser)
-  }
-
   private async addUserReference(msg: string): Promise<{
     text: string
     users: string[]
diff --git a/src/stores/Research/research.store.tsx b/src/stores/Research/research.store.tsx
index d3206cd5d7..b57019fb69 100644
--- a/src/stores/Research/research.store.tsx
+++ b/src/stores/Research/research.store.tsx
@@ -1,17 +1,10 @@
 import { createContext, useContext } from 'react'
 import lodash from 'lodash'
-import {
-  action,
-  computed,
-  makeObservable,
-  observable,
-  runInAction,
-  toJS,
-} from 'mobx'
+import { action, makeObservable, observable, runInAction, toJS } from 'mobx'
 import { IModerationStatus } from 'oa-shared'
 import { logger } from 'src/logger'
 import { getUserCountry } from 'src/utils/getUserCountry'
-import { hasAdminRights, needsModeration, randomID } from 'src/utils/helpers'
+import { hasAdminRights, randomID } from 'src/utils/helpers'
 import { getKeywords } from 'src/utils/searchHelper'
 
 import { incrementDocViewCount } from '../common/incrementDocViewCount'
@@ -36,7 +29,6 @@ const { cloneDeep } = lodash
 const COLLECTION_NAME = 'research'
 
 export class ResearchStore extends ModuleStore {
-  public activeResearchItem: IResearch.ItemDB | null = null
   public researchUploadStatus: IResearchUploadStatus =
     getInitialResearchUploadStatus()
   public updateUploadStatus: IUpdateUploadStatus =
@@ -57,10 +49,6 @@ export class ResearchStore extends ModuleStore {
       unlockResearchItem: action,
       lockResearchUpdate: action,
       unlockResearchUpdate: action,
-      userVotedActiveResearchUseful: computed,
-      userHasSubscribed: computed,
-      votedUsefulCount: computed,
-      subscribersCount: computed,
     })
   }
 
@@ -82,34 +70,29 @@ export class ResearchStore extends ModuleStore {
   }
 
   public async toggleUsefulByUser(
-    docId: string,
+    research: IResearchDB,
     userName: string,
   ): Promise<void> {
     const updatedItem = (await toggleDocUsefulByUser(
       COLLECTION_NAME,
-      docId,
+      research._id,
       userName,
     )) as IResearch.ItemDB
 
     runInAction(() => {
-      this.activeResearchItem = updatedItem
       if ((updatedItem?.votedUsefulBy || []).includes(userName)) {
         this.userNotificationsStore.triggerNotification(
           'research_useful',
-          this.activeResearchItem._createdBy,
-          '/research/' + this.activeResearchItem.slug,
-          this.activeResearchItem.title,
+          research._createdBy,
+          '/research/' + research.slug,
+          research.title,
         )
-        for (
-          let i = 0;
-          i < (this.activeResearchItem.collaborators || []).length;
-          i++
-        ) {
+        for (let i = 0; i < (research.collaborators || []).length; i++) {
           this.userNotificationsStore.triggerNotification(
             'research_useful',
-            this.activeResearchItem.collaborators[i],
-            '/research/' + this.activeResearchItem.slug,
-            this.activeResearchItem.title,
+            research.collaborators[i],
+            '/research/' + research.slug,
+            research.title,
           )
         }
       }
@@ -153,10 +136,6 @@ export class ResearchStore extends ModuleStore {
     return doc.set(toJS(research))
   }
 
-  public needsModeration(research: IResearch.ItemDB) {
-    return needsModeration(research, toJS(this.activeUser || undefined))
-  }
-
   public updateResearchUploadStatus(update: keyof IResearchUploadStatus) {
     this.researchUploadStatus[update] = true
   }
@@ -241,9 +220,11 @@ export class ResearchStore extends ModuleStore {
    *
    * @param update
    */
-  public async uploadUpdate(update: IResearch.Update | IResearch.UpdateDB) {
+  public async uploadUpdate(
+    item: IResearchDB,
+    update: IResearch.Update | IResearch.UpdateDB,
+  ) {
     logger.debug(`uploadUpdate`, { update })
-    const item = this.activeResearchItem
     if (item) {
       const dbRef = this.db
         .collection<IResearch.Item>(COLLECTION_NAME)
@@ -322,10 +303,6 @@ export class ResearchStore extends ModuleStore {
         await this._updateResearchItem(dbRef, newItem, true)
         logger.debug('populate db ok')
         this.updateUpdateUploadStatus('Database')
-        const createdItem = (await dbRef.get('server')) as IResearch.ItemDB
-        runInAction(() => {
-          this.activeResearchItem = createdItem
-        })
         this.updateUpdateUploadStatus('Complete')
       } catch (error) {
         logger.error('error', error)
@@ -333,8 +310,7 @@ export class ResearchStore extends ModuleStore {
     }
   }
 
-  public async deleteUpdate(updateId: string) {
-    const item = this.activeResearchItem
+  public async deleteUpdate(item: IResearchDB, updateId: string) {
     if (item) {
       const dbRef = this.db
         .collection<IResearch.Item>(COLLECTION_NAME)
@@ -371,10 +347,12 @@ export class ResearchStore extends ModuleStore {
    *
    * @param updateId
    */
-  public async incrementDownloadCount(updateId: string): Promise<number> {
+  public async incrementDownloadCount(
+    item: IResearchDB,
+    updateId: string,
+  ): Promise<number> {
     try {
       let downloadCount = 0
-      const item = this.activeResearchItem
 
       if (item) {
         const dbRef = this.db
@@ -404,30 +382,7 @@ export class ResearchStore extends ModuleStore {
     }
   }
 
-  get userVotedActiveResearchUseful(): boolean {
-    if (!this.activeUser) return false
-    return (this.activeResearchItem?.votedUsefulBy || []).includes(
-      this.activeUser.userName,
-    )
-  }
-
-  get userHasSubscribed(): boolean {
-    return (
-      this.activeResearchItem?.subscribers?.includes(
-        this.activeUser?.userName ?? '',
-      ) ?? false
-    )
-  }
-
-  get votedUsefulCount(): number {
-    return (this.activeResearchItem?.votedUsefulBy || []).length
-  }
-
-  get subscribersCount(): number {
-    return (this.activeResearchItem?.subscribers || []).length
-  }
-  public async lockResearchItem(username: string) {
-    const item = this.activeResearchItem
+  public async lockResearchItem(item: IResearchDB, username: string) {
     if (item) {
       const dbRef = this.db
         .collection<IResearch.Item>(COLLECTION_NAME)
@@ -440,14 +395,10 @@ export class ResearchStore extends ModuleStore {
         },
       }
       await this._updateResearchItem(dbRef, newItem)
-      runInAction(() => {
-        this.activeResearchItem = newItem
-      })
     }
   }
 
-  public async unlockResearchItem() {
-    const item = this.activeResearchItem
+  public async unlockResearchItem(item: IResearchDB) {
     if (item) {
       const dbRef = this.db
         .collection<IResearch.Item>(COLLECTION_NAME)
@@ -457,14 +408,14 @@ export class ResearchStore extends ModuleStore {
         locked: null,
       }
       await this._updateResearchItem(dbRef, newItem)
-      runInAction(() => {
-        this.activeResearchItem = newItem
-      })
     }
   }
 
-  public async lockResearchUpdate(username: string, updateId: string) {
-    const item = this.activeResearchItem
+  public async lockResearchUpdate(
+    item: IResearchDB,
+    username: string,
+    updateId: string,
+  ) {
     if (item) {
       const dbRef = this.db
         .collection<IResearch.Item>(COLLECTION_NAME)
@@ -482,14 +433,10 @@ export class ResearchStore extends ModuleStore {
         }
       }
       await this._updateResearchItem(dbRef, newItem)
-      runInAction(() => {
-        this.activeResearchItem = newItem
-      })
     }
   }
 
-  public async unlockResearchUpdate(updateId: string) {
-    const item = this.activeResearchItem
+  public async unlockResearchUpdate(item: IResearchDB, updateId: string) {
     if (item) {
       const dbRef = this.db
         .collection<IResearch.Item>(COLLECTION_NAME)
@@ -504,9 +451,6 @@ export class ResearchStore extends ModuleStore {
         newItem.updates[updateIndex].locked = null
       }
       await this._updateResearchItem(dbRef, newItem)
-      runInAction(() => {
-        this.activeResearchItem = newItem
-      })
     }
   }
 

From 0a2d653fea2d10e5e6dcc2dc7098a472d0815d20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Nunes?= <mario.nunes@create.pt>
Date: Sat, 26 Oct 2024 22:22:17 +0100
Subject: [PATCH 03/10] fix: tests

---
 .../Research/Content/ResearchArticle.test.tsx | 231 +++++++++---------
 .../ContentAuthorTimestamp.tsx                |   5 +-
 src/routes/_.research.$slug._index.tsx        |   2 -
 src/stores/Research/research.store.test.ts    |  63 ++---
 src/stores/Research/research.store.tsx        |  29 +--
 5 files changed, 137 insertions(+), 193 deletions(-)

diff --git a/src/pages/Research/Content/ResearchArticle.test.tsx b/src/pages/Research/Content/ResearchArticle.test.tsx
index 8ff4074d22..7400626ea0 100644
--- a/src/pages/Research/Content/ResearchArticle.test.tsx
+++ b/src/pages/Research/Content/ResearchArticle.test.tsx
@@ -20,6 +20,7 @@ import { describe, expect, it, vi } from 'vitest'
 
 import ResearchArticle from './ResearchArticle'
 
+import type { IResearchDB } from 'oa-shared'
 import type { Mock } from 'vitest'
 
 const Theme = testingThemeStyles
@@ -58,10 +59,7 @@ vi.mock('src/stores/Research/research.store')
 
 describe('Research Article', () => {
   const mockResearchStore = {
-    activeResearchItem: FactoryResearchItem(),
-    setActiveResearchItemBySlug: vi.fn().mockResolvedValue(true),
     addSubscriberToResearchArticle: vi.fn(),
-    needsModeration: vi.fn(),
     formatResearchCommentList: vi.fn(),
     incrementViewCount: vi.fn(),
   }
@@ -78,15 +76,12 @@ describe('Research Article', () => {
       ],
     })
 
-    ;(useResearchStore as Mock).mockReturnValue({
-      ...mockResearchStore,
-      activeResearchItem,
-    })
+    ;(useResearchStore as Mock).mockReturnValue(mockResearchStore)
 
     // Act
     let wrapper
     act(() => {
-      wrapper = getWrapper()
+      wrapper = getWrapper(activeResearchItem)
     })
 
     // Assert
@@ -103,17 +98,16 @@ describe('Research Article', () => {
 
   it('does not display contributors when undefined', async () => {
     // Arrange
-    ;(useResearchStore as Mock).mockReturnValue({
-      ...mockResearchStore,
-      activeResearchItem: FactoryResearchItem({
-        collaborators: undefined,
-      }),
-    })
+    ;(useResearchStore as Mock).mockReturnValue(mockResearchStore)
 
     // Act
     let wrapper
     await act(async () => {
-      wrapper = getWrapper()
+      wrapper = getWrapper(
+        FactoryResearchItem({
+          collaborators: undefined,
+        }),
+      )
     })
 
     // Assert
@@ -124,17 +118,16 @@ describe('Research Article', () => {
 
   it('displays contributors', async () => {
     // Arrange
-    ;(useResearchStore as Mock).mockReturnValue({
-      ...mockResearchStore,
-      activeResearchItem: FactoryResearchItem({
-        collaborators: ['example-username', 'another-example-username'],
-      }),
-    })
+    ;(useResearchStore as Mock).mockReturnValue(mockResearchStore)
 
     // Act
     let wrapper
     act(() => {
-      wrapper = getWrapper()
+      wrapper = getWrapper(
+        FactoryResearchItem({
+          collaborators: ['example-username', 'another-example-username'],
+        }),
+      )
     })
 
     // Assert
@@ -150,16 +143,17 @@ describe('Research Article', () => {
     // Arrange
     ;(useResearchStore as Mock).mockReturnValue({
       ...mockResearchStore,
-      activeResearchItem: FactoryResearchItem({
-        userHasSubscribed: false,
-      }),
       activeUser,
     })
 
     // Act
     let wrapper
     act(() => {
-      wrapper = getWrapper()
+      wrapper = getWrapper(
+        FactoryResearchItem({
+          userHasSubscribed: false,
+        }),
+      )
     })
 
     await waitFor(() => {
@@ -200,40 +194,39 @@ describe('Research Article', () => {
   describe('Research Update', () => {
     it('displays contributors', async () => {
       // Arrange
-      ;(useResearchStore as Mock).mockReturnValue({
-        ...mockResearchStore,
-        activeResearchItem: FactoryResearchItem({
-          collaborators: ['example-username', 'another-example-username'],
-          updates: [
-            FactoryResearchItemUpdate({
-              title: 'Research Update #1',
-              collaborators: [
-                'third-example-username',
-                'fourth-example-username',
-              ],
-              status: ResearchUpdateStatus.PUBLISHED,
-              _deleted: false,
-            }),
-            FactoryResearchItemUpdate({
-              title: 'Research Update #2',
-              collaborators: null!,
-              status: ResearchUpdateStatus.PUBLISHED,
-              _deleted: false,
-            }),
-            FactoryResearchItemUpdate({
-              title: 'Research Update #3',
-              collaborators: undefined,
-              status: ResearchUpdateStatus.PUBLISHED,
-              _deleted: false,
-            }),
-          ],
-        }),
-      })
+      ;(useResearchStore as Mock).mockReturnValue(mockResearchStore)
 
       // wait for Promise to resolve and state to update
       let wrapper
       act(() => {
-        wrapper = getWrapper()
+        wrapper = getWrapper(
+          FactoryResearchItem({
+            collaborators: ['example-username', 'another-example-username'],
+            updates: [
+              FactoryResearchItemUpdate({
+                title: 'Research Update #1',
+                collaborators: [
+                  'third-example-username',
+                  'fourth-example-username',
+                ],
+                status: ResearchUpdateStatus.PUBLISHED,
+                _deleted: false,
+              }),
+              FactoryResearchItemUpdate({
+                title: 'Research Update #2',
+                collaborators: null!,
+                status: ResearchUpdateStatus.PUBLISHED,
+                _deleted: false,
+              }),
+              FactoryResearchItemUpdate({
+                title: 'Research Update #3',
+                collaborators: undefined,
+                status: ResearchUpdateStatus.PUBLISHED,
+                _deleted: false,
+              }),
+            ],
+          }),
+        )
       })
 
       // Assert
@@ -265,27 +258,21 @@ describe('Research Article', () => {
         title: 'A title',
         description: 'A description',
       })
-      ;(useResearchStore as Mock).mockReturnValue({
-        ...mockResearchStore,
-        formatResearchCommentList: vi.fn().mockImplementation((c) => {
-          return c
-        }),
-        activeResearchItem: FactoryResearchItem({
-          updates: [update],
-        }),
-      })
+      ;(useResearchStore as Mock).mockReturnValue(mockResearchStore)
       // Act
-      const wrapper = getWrapper()
+      const item = FactoryResearchItem({
+        _created,
+        _modified: _created,
+        _contentModifiedTimestamp: _created,
+        updates: [update],
+      })
+      const wrapper = getWrapper(item)
 
       // Assert
       await waitFor(() => {
-        expect(() =>
-          wrapper.getAllByText(
-            `${formatDistanceToNow(_created, { addSuffix: true })}`,
-          ),
-        ).toThrow()
-      })
-      await waitFor(() => {
+        const lastUpdate = wrapper.getByTestId('last-update')
+        expect(lastUpdate).not.toBeVisible()
+
         expect(() =>
           wrapper.getAllByText((content) => content.includes('edited')),
         ).toThrow()
@@ -311,13 +298,14 @@ describe('Research Article', () => {
         formatResearchCommentList: vi.fn().mockImplementation((c) => {
           return c
         }),
-        activeResearchItem: FactoryResearchItem({
-          updates: [update],
-        }),
       })
 
       // Act
-      const wrapper = getWrapper()
+      const wrapper = getWrapper(
+        FactoryResearchItem({
+          updates: [update],
+        }),
+      )
       // Assert
       await waitFor(() => {
         expect(() =>
@@ -342,29 +330,28 @@ describe('Research Article', () => {
 
   it('shows only published updates', async () => {
     // Arrange
-    ;(useResearchStore as Mock).mockReturnValue({
-      ...mockResearchStore,
-      activeResearchItem: FactoryResearchItem({
-        collaborators: ['example-username', 'another-example-username'],
-        updates: [
-          FactoryResearchItemUpdate({
-            title: 'Research Update #1',
-            status: ResearchUpdateStatus.PUBLISHED,
-            _deleted: false,
-          }),
-          FactoryResearchItemUpdate({
-            title: 'Research Update #2',
-            status: ResearchUpdateStatus.DRAFT,
-            _deleted: false,
-          }),
-        ],
-      }),
-    })
+    ;(useResearchStore as Mock).mockReturnValue(mockResearchStore)
 
     // Act
     let wrapper
     act(() => {
-      wrapper = getWrapper()
+      wrapper = getWrapper(
+        FactoryResearchItem({
+          collaborators: ['example-username', 'another-example-username'],
+          updates: [
+            FactoryResearchItemUpdate({
+              title: 'Research Update #1',
+              status: ResearchUpdateStatus.PUBLISHED,
+              _deleted: false,
+            }),
+            FactoryResearchItemUpdate({
+              title: 'Research Update #2',
+              status: ResearchUpdateStatus.DRAFT,
+              _deleted: false,
+            }),
+          ],
+        }),
+      )
     })
 
     // Assert
@@ -377,25 +364,24 @@ describe('Research Article', () => {
   describe('Breadcrumbs', () => {
     it('displays breadcrumbs with category', async () => {
       // Arrange
-      ;(useResearchStore as Mock).mockReturnValue({
-        ...mockResearchStore,
-        activeResearchItem: FactoryResearchItem({
-          title: 'Innovative Study',
-          researchCategory: {
-            label: 'Science',
-            _id: faker.string.uuid(),
-            _modified: faker.date.past().toString(),
-            _created: faker.date.past().toString(),
-            _deleted: faker.datatype.boolean(),
-            _contentModifiedTimestamp: faker.date.past().toString(),
-          },
-        }),
-      })
+      ;(useResearchStore as Mock).mockReturnValue(mockResearchStore)
 
       // Act
       let wrapper
       act(() => {
-        wrapper = getWrapper()
+        wrapper = getWrapper(
+          FactoryResearchItem({
+            title: 'Innovative Study',
+            researchCategory: {
+              label: 'Science',
+              _id: faker.string.uuid(),
+              _modified: faker.date.past().toString(),
+              _created: faker.date.past().toString(),
+              _deleted: faker.datatype.boolean(),
+              _contentModifiedTimestamp: faker.date.past().toString(),
+            },
+          }),
+        )
       })
 
       // Assert: Check the breadcrumb items and chevrons
@@ -420,18 +406,17 @@ describe('Research Article', () => {
 
     it('displays breadcrumbs without category', async () => {
       // Arrange
-      ;(useResearchStore as Mock).mockReturnValue({
-        ...mockResearchStore,
-        activeResearchItem: FactoryResearchItem({
-          title: 'Innovative Study',
-          researchCategory: undefined, // No category provided
-        }),
-      })
+      ;(useResearchStore as Mock).mockReturnValue(mockResearchStore)
 
       // Act
       let wrapper
       act(() => {
-        wrapper = getWrapper()
+        wrapper = getWrapper(
+          FactoryResearchItem({
+            title: 'Innovative Study',
+            researchCategory: undefined, // No category provided
+          }),
+        )
       })
 
       // Assert: Check the breadcrumb items and chevrons
@@ -453,10 +438,14 @@ describe('Research Article', () => {
   })
 })
 
-const getWrapper = () => {
+const getWrapper = (research: IResearchDB) => {
   const router = createMemoryRouter(
     createRoutesFromElements(
-      <Route path="/research/:slug" key={1} element={<ResearchArticle />} />,
+      <Route
+        path="/research/:slug"
+        key={1}
+        element={<ResearchArticle research={research} />}
+      />,
     ),
     {
       initialEntries: ['/research/article'],
diff --git a/src/pages/common/ContentAuthorTimestamp/ContentAuthorTimestamp.tsx b/src/pages/common/ContentAuthorTimestamp/ContentAuthorTimestamp.tsx
index 7ceef203c3..e2fafd01ec 100644
--- a/src/pages/common/ContentAuthorTimestamp/ContentAuthorTimestamp.tsx
+++ b/src/pages/common/ContentAuthorTimestamp/ContentAuthorTimestamp.tsx
@@ -34,9 +34,10 @@ export const ContentAuthorTimestamp = ({
           '&!important': {
             color: 'lightgrey',
           },
+          mt: 1,
+          mb: 2,
         }}
-        mt={1}
-        mb={2}
+        data-testid="last-update"
       >
         Last update <DisplayDate date={modified} />
       </Text>
diff --git a/src/routes/_.research.$slug._index.tsx b/src/routes/_.research.$slug._index.tsx
index 70712bcde1..bbcee02d25 100644
--- a/src/routes/_.research.$slug._index.tsx
+++ b/src/routes/_.research.$slug._index.tsx
@@ -21,8 +21,6 @@ export const meta = mergeMeta<typeof loader>(({ data }) => {
     return []
   }
 
-  console.log(JSON.stringify(research))
-
   const title = `${research.title} - Research - ${import.meta.env.VITE_SITE_NAME}`
 
   return generateTags(
diff --git a/src/stores/Research/research.store.test.ts b/src/stores/Research/research.store.test.ts
index 2563dc37ea..823811aee8 100644
--- a/src/stores/Research/research.store.test.ts
+++ b/src/stores/Research/research.store.test.ts
@@ -120,8 +120,6 @@ const factory = async (
     deleteComment: vi.fn(),
   }
 
-  await store.setActiveResearchItemBySlug('fish')
-
   return {
     store,
     researchItem,
@@ -145,7 +143,7 @@ describe('research.store', () => {
         const newUpdate = FactoryResearchItemUpdate()
 
         // Act
-        await store.uploadUpdate(newUpdate)
+        await store.uploadUpdate(researchItem, newUpdate)
 
         // Assert
         const [newResearchItem] = setFn.mock.calls[0]
@@ -164,7 +162,7 @@ describe('research.store', () => {
         const editedUpdate = toJS(researchItem.updates[0])
 
         // Act
-        await store.uploadUpdate(editedUpdate)
+        await store.uploadUpdate(researchItem, editedUpdate)
 
         // Assert
         const [newResearchItem] = setFn.mock.calls[0]
@@ -182,19 +180,22 @@ describe('research.store', () => {
         const { store, researchItem } = await factoryResearchItem()
         const update = toJS(researchItem.updates[0])
 
-        await store.uploadUpdate(update)
+        await store.uploadUpdate(researchItem, update)
 
-        const count = await store.incrementDownloadCount(update._id)
+        const count = await store.incrementDownloadCount(
+          researchItem,
+          update._id,
+        )
         expect(count).toBe(1)
       })
 
       it('preserves @mention within Research description', async () => {
-        const { store, setFn } = await factoryResearchItem({
+        const { store, setFn, researchItem } = await factoryResearchItem({
           description: '@username',
         })
 
         // Act
-        await store.uploadUpdate(FactoryResearchItemUpdate())
+        await store.uploadUpdate(researchItem, FactoryResearchItemUpdate())
 
         // Assert
         const [newResearchItem] = setFn.mock.calls[0]
@@ -202,7 +203,7 @@ describe('research.store', () => {
       })
 
       it('preserves @mention within an existing Update description', async () => {
-        const { store, setFn } = await factoryResearchItem({
+        const { store, setFn, researchItem } = await factoryResearchItem({
           description: '@username',
           updates: [
             FactoryResearchItemUpdate({
@@ -212,7 +213,7 @@ describe('research.store', () => {
         })
 
         // Act
-        await store.uploadUpdate(FactoryResearchItemUpdate())
+        await store.uploadUpdate(researchItem, FactoryResearchItemUpdate())
 
         // Assert
         const [newResearchItem] = setFn.mock.calls[0]
@@ -227,7 +228,7 @@ describe('research.store', () => {
         const { store, researchItem, setFn } = await factoryResearchItem()
 
         // Act
-        await store.deleteUpdate(researchItem.updates[0]._id)
+        await store.deleteUpdate(researchItem, researchItem.updates[0]._id)
 
         // Assert
         expect(setFn).toBeCalledTimes(1)
@@ -240,10 +241,10 @@ describe('research.store', () => {
       })
 
       it('handles malformed update id', async () => {
-        const { store, setFn } = await factoryResearchItem()
+        const { store, setFn, researchItem } = await factoryResearchItem()
 
         // Act
-        await store.deleteUpdate('malformed-id')
+        await store.deleteUpdate(researchItem, 'malformed-id')
 
         // Assert
         expect(setFn).not.toBeCalled()
@@ -480,8 +481,11 @@ describe('research.store', () => {
       })
 
       // Act
-      await store.uploadUpdate(FactoryResearchItemUpdate())
-      await store.uploadUpdate(FactoryResearchItemUpdate())
+      const item = await store.uploadUpdate(
+        researchItem,
+        FactoryResearchItemUpdate(),
+      )
+      await store.uploadUpdate(item!, FactoryResearchItemUpdate())
 
       // Assert
       expect(setFn).toHaveBeenCalledTimes(2)
@@ -496,34 +500,5 @@ describe('research.store', () => {
         researchItem.title,
       )
     })
-
-    it('matches subscriber state for logged in user', async () => {
-      const { store } = await factoryResearchItem(
-        {
-          subscribers: ['subscriber'],
-        },
-        FactoryUser({
-          _id: 'fake-user-id',
-          userName: 'subscriber',
-        }),
-      )
-
-      // Assert
-      expect(store.userHasSubscribed).toBe(true)
-    })
-
-    it('does not match subscriber state for logged in user', async () => {
-      const { store } = await factoryResearchItem(
-        {
-          subscribers: ['subscriber'],
-        },
-        FactoryUser({
-          userName: 'another-user',
-        }),
-      )
-
-      // Assert
-      expect(store.userHasSubscribed).toBe(false)
-    })
   })
 })
diff --git a/src/stores/Research/research.store.tsx b/src/stores/Research/research.store.tsx
index b57019fb69..68bca5e332 100644
--- a/src/stores/Research/research.store.tsx
+++ b/src/stores/Research/research.store.tsx
@@ -225,6 +225,7 @@ export class ResearchStore extends ModuleStore {
     update: IResearch.Update | IResearch.UpdateDB,
   ) {
     logger.debug(`uploadUpdate`, { update })
+    let updatedItem: IResearchDB | null = null
     if (item) {
       const dbRef = this.db
         .collection<IResearch.Item>(COLLECTION_NAME)
@@ -300,7 +301,7 @@ export class ResearchStore extends ModuleStore {
         logger.debug('created:', newItem._created)
 
         // set the database document
-        await this._updateResearchItem(dbRef, newItem, true)
+        updatedItem = await this._updateResearchItem(dbRef, newItem, true)
         logger.debug('populate db ok')
         this.updateUpdateUploadStatus('Database')
         this.updateUpdateUploadStatus('Complete')
@@ -308,6 +309,8 @@ export class ResearchStore extends ModuleStore {
         logger.error('error', error)
       }
     }
+
+    return updatedItem
   }
 
   public async deleteUpdate(item: IResearchDB, updateId: string) {
@@ -601,29 +604,7 @@ export class ResearchStore extends ModuleStore {
       )
     }
 
-    return await dbRef.get('server')
-  }
-
-  private async _getResearchItemBySlug(
-    slug: string,
-  ): Promise<IResearchDB | null> {
-    const collection = await this.db
-      .collection<IResearch.ItemDB>(COLLECTION_NAME)
-      .getWhere('slug', '==', slug)
-
-    if (collection && collection.length) {
-      return collection[0]
-    }
-
-    const previousSlugCollection = await this.db
-      .collection<IResearch.ItemDB>(COLLECTION_NAME)
-      .getWhere('previousSlugs', 'array-contains', slug)
-
-    if (previousSlugCollection && previousSlugCollection.length) {
-      return previousSlugCollection[0]
-    }
-
-    return null
+    return (await dbRef.get('server')) as IResearchDB
   }
 
   private async _toggleSubscriber(docId: string, userId: string) {

From 799836ef814907f8f9d97d9a322ae90ff47a7db8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Nunes?= <mario.nunes@create.pt>
Date: Sun, 27 Oct 2024 00:00:18 +0100
Subject: [PATCH 04/10] fix: build

---
 .../Howto/Content/EditHowto/EditHowto.tsx     | 37 +-------
 .../Research/Content/Common/Research.form.tsx | 29 +++++--
 .../Content/Common/ResearchUpdate.form.tsx    | 25 +++---
 .../Research/Content/Common/SubmitStatus.tsx  |  7 +-
 .../Content/CreateUpdate/CreateUpdate.tsx     | 44 ++--------
 .../Research/Content/EditResearch/index.tsx   | 71 +++++----------
 .../Research/Content/EditUpdate/index.tsx     | 86 ++++---------------
 .../Research/Content/ResearchArticle.tsx      |  1 +
 src/pages/Research/Content/ResearchUpdate.tsx | 12 ++-
 .../_.research.$slug.edit-update.$update.tsx  | 18 ----
 ..._.research.$slug.edit-update.$updateId.tsx | 26 ++++++
 src/routes/_.research.$slug.edit.tsx          | 15 +++-
 src/routes/_.research.$slug.new-update.tsx    | 15 +++-
 src/stores/Research/research.store.tsx        |  9 +-
 14 files changed, 155 insertions(+), 240 deletions(-)
 delete mode 100644 src/routes/_.research.$slug.edit-update.$update.tsx
 create mode 100644 src/routes/_.research.$slug.edit-update.$updateId.tsx

diff --git a/src/pages/Howto/Content/EditHowto/EditHowto.tsx b/src/pages/Howto/Content/EditHowto/EditHowto.tsx
index ea49d60c3e..98e2c82f17 100644
--- a/src/pages/Howto/Content/EditHowto/EditHowto.tsx
+++ b/src/pages/Howto/Content/EditHowto/EditHowto.tsx
@@ -1,7 +1,5 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { Navigate } from '@remix-run/react'
-import { toJS } from 'mobx'
-import { Loader } from 'oa-components'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
 import { isAllowedToEditContent } from 'src/utils/helpers'
 import { Text } from 'theme-ui'
@@ -12,7 +10,6 @@ import type { IHowtoDB, IUser } from 'oa-shared'
 
 interface IState {
   formValues: IHowtoDB
-  isLoading: boolean
   loggedInUser?: IUser | undefined
 }
 
@@ -22,37 +19,11 @@ type EditHowtoProps = {
 
 const EditHowto = ({ howto }: EditHowtoProps) => {
   const { howtoStore } = useCommonStores().stores
-  const [{ formValues, isLoading, loggedInUser }, setState] = useState<IState>({
-    formValues: {} as IHowtoDB,
-    isLoading: true,
-    loggedInUser: undefined,
+  const [{ formValues, loggedInUser }] = useState<IState>({
+    formValues: howto,
+    loggedInUser: howtoStore.activeUser as IUser,
   })
 
-  useEffect(() => {
-    const loggedInUser = howtoStore.activeUser
-    const init = async () => {
-      if (howto) {
-        setState({
-          formValues: toJS(howto) as IHowtoDB,
-          isLoading: false,
-          loggedInUser: loggedInUser ? loggedInUser : undefined,
-        })
-      } else {
-        setState({
-          formValues: howto,
-          isLoading: false,
-          loggedInUser: loggedInUser ? (loggedInUser as IUser) : undefined,
-        })
-      }
-    }
-
-    init()
-  }, [])
-
-  if (isLoading) {
-    return <Loader />
-  }
-
   if (!formValues) {
     return (
       <Text mt="50px" sx={{ width: '100%', textAlign: 'center' }}>
diff --git a/src/pages/Research/Content/Common/Research.form.tsx b/src/pages/Research/Content/Common/Research.form.tsx
index 1c22c6e8af..d77b303d8f 100644
--- a/src/pages/Research/Content/Common/Research.form.tsx
+++ b/src/pages/Research/Content/Common/Research.form.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useState } from 'react'
 import { Field, Form } from 'react-final-form'
 import arrayMutators from 'final-form-arrays'
 import { observer } from 'mobx-react'
@@ -41,13 +41,14 @@ import {
 import { buttons, headings, overview } from '../../labels'
 import ResearchFieldCategory from './ResearchCategorySelect'
 
-import type { IResearch } from 'oa-shared'
+import type { IResearch, IResearchDB } from 'oa-shared'
 import type { MainFormAction } from 'src/common/Form/types'
 
 interface IProps {
   'data-testid'?: string
   formValues: any
   parentType: MainFormAction
+  research?: IResearchDB
 }
 
 const ResearchFormLabel = ({ children, ...props }) => (
@@ -72,22 +73,27 @@ const ResearchForm = observer((props: IProps) => {
   } = overview
 
   const store = useResearchStore()
-  const [showSubmitModal, setShowSubmitModal] = React.useState(false)
-  const [submissionHandler, setSubmissionHandler] = React.useState({
+  const [showSubmitModal, setShowSubmitModal] = useState(false)
+  const [submissionHandler, setSubmissionHandler] = useState({
     draft: formValues.moderation === IModerationStatus.DRAFT,
     shouldSubmit: false,
   })
+  const [slug, setSlug] = useState<string>('')
 
   // Managing locked state
-  React.useEffect(() => {
-    if (store.activeUser) store.lockResearchItem(store.activeUser.userName)
+  useEffect(() => {
+    if (store.activeUser && props.research) {
+      store.lockResearchItem(props.research, store.activeUser.userName)
+    }
 
     return () => {
-      store.unlockResearchItem()
+      if (props.research) {
+        store.unlockResearchItem(props.research)
+      }
     }
   }, [store.activeUser])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (submissionHandler.shouldSubmit) {
       const form = document.getElementById('researchForm')
       if (typeof form !== 'undefined' && form !== null) {
@@ -103,7 +109,11 @@ const ResearchForm = observer((props: IProps) => {
     formValues.moderation = submissionHandler.draft
       ? IModerationStatus.DRAFT
       : IModerationStatus.ACCEPTED // No moderation for researches for now
-    await store.uploadResearch(formValues)
+    const updatedResearh = await store.uploadResearch(formValues)
+
+    if (updatedResearh) {
+      setSlug(updatedResearh.slug)
+    }
   }
 
   const pageTitle = headings.overview[parentType]
@@ -112,6 +122,7 @@ const ResearchForm = observer((props: IProps) => {
     <div data-testid={props['data-testid']}>
       {showSubmitModal && (
         <ResearchSubmitStatus
+          slug={slug}
           onClose={() => {
             setShowSubmitModal(false)
             store.resetResearchUploadStatus()
diff --git a/src/pages/Research/Content/Common/ResearchUpdate.form.tsx b/src/pages/Research/Content/Common/ResearchUpdate.form.tsx
index 5dbfff57e3..70bc42e3f8 100644
--- a/src/pages/Research/Content/Common/ResearchUpdate.form.tsx
+++ b/src/pages/Research/Content/Common/ResearchUpdate.form.tsx
@@ -27,13 +27,14 @@ import { TitleField } from '../CreateResearch/Form/TitleField'
 import { ResearchErrors } from './ResearchErrors'
 import { UpdateSubmitStatus } from './SubmitStatus'
 
-import type { IResearch } from 'oa-shared'
+import type { IResearch, IResearchDB } from 'oa-shared'
 import type { MainFormAction } from 'src/common/Form/types'
 
 const CONFIRM_DIALOG_MSG =
   'You have unsaved changes. Are you sure you want to leave this page?'
 
 interface IProps {
+  research: IResearchDB
   formValues: any
   parentType: MainFormAction
   redirectUrl?: string
@@ -73,10 +74,14 @@ export const ResearchUpdateForm = observer((props: IProps) => {
   // Managing locked state
   React.useEffect(() => {
     if (store.activeUser)
-      store.lockResearchUpdate(store.activeUser.userName, formValues._id)
+      store.lockResearchUpdate(
+        props.research,
+        store.activeUser.userName,
+        formValues._id,
+      )
 
     return () => {
-      store.unlockResearchUpdate(formValues._id)
+      store.unlockResearchUpdate(props.research, formValues._id)
     }
   }, [store.activeUser])
 
@@ -105,7 +110,7 @@ export const ResearchUpdateForm = observer((props: IProps) => {
 
     setInvalidFileWarning(false)
 
-    await store.uploadUpdate({
+    await store.uploadUpdate(props.research, {
       ...formValues,
       collaborators: Array.from(
         new Set(
@@ -123,7 +128,7 @@ export const ResearchUpdateForm = observer((props: IProps) => {
 
   const handleDelete = async (_updateId: string) => {
     setShowDeleteModal(false)
-    await store.deleteUpdate(_updateId)
+    await store.deleteUpdate(props.research, _updateId)
     if (redirectUrl) {
       window.location.assign(redirectUrl)
     }
@@ -158,7 +163,7 @@ export const ResearchUpdateForm = observer((props: IProps) => {
     <>
       {showSubmitModal && (
         <UpdateSubmitStatus
-          {...props}
+          slug={props.research.slug}
           onClose={() => {
             setShowSubmitModal(false)
             store.resetUpdateUploadStatus()
@@ -324,16 +329,16 @@ export const ResearchUpdateForm = observer((props: IProps) => {
                     labels={update}
                   />
 
-                  {store.activeResearchItem ? (
+                  {props.research ? (
                     <ResearchEditorOverview
                       sx={{ mt: 2 }}
                       updates={getResearchUpdates(
-                        store.activeResearchItem.updates || [],
-                        store.activeResearchItem._id,
+                        props.research.updates || [],
+                        props.research._id,
                         !isEdit,
                         values.title,
                       )}
-                      researchSlug={store.activeResearchItem?.slug}
+                      researchSlug={props.research?.slug}
                       showCreateUpdateButton={isEdit}
                       showBackToResearchButton={true}
                     />
diff --git a/src/pages/Research/Content/Common/SubmitStatus.tsx b/src/pages/Research/Content/Common/SubmitStatus.tsx
index f867205b60..e66ddf3d35 100644
--- a/src/pages/Research/Content/Common/SubmitStatus.tsx
+++ b/src/pages/Research/Content/Common/SubmitStatus.tsx
@@ -5,6 +5,7 @@ import { useResearchStore } from 'src/stores/Research/research.store'
 import { Box, Flex, Heading, Text } from 'theme-ui'
 
 interface IProps {
+  slug: string
   onClose: () => void
 }
 
@@ -36,7 +37,7 @@ export const ResearchSubmitStatus = observer((props: IProps) => {
           </Flex>
         ))}
       </Box>
-      {store.activeResearchItem && store.activeResearchItem?.slug ? (
+      {props.slug ? (
         <Button
           type="button"
           data-cy={store.researchUploadStatus.Complete ? 'view-research' : ''}
@@ -46,7 +47,7 @@ export const ResearchSubmitStatus = observer((props: IProps) => {
           }
           icon="arrow-forward"
           onClick={() => {
-            navigate('/research/' + store.activeResearchItem!.slug)
+            navigate('/research/' + props.slug)
             props.onClose()
           }}
         >
@@ -93,7 +94,7 @@ export const UpdateSubmitStatus = observer((props: IProps) => {
         variant={!uploadStatus.Complete ? 'disabled' : 'outline'}
         icon="arrow-forward"
         onClick={() => {
-          navigate('/research/' + store.activeResearchItem!.slug)
+          navigate('/research/' + props.slug)
           props.onClose()
         }}
       >
diff --git a/src/pages/Research/Content/CreateUpdate/CreateUpdate.tsx b/src/pages/Research/Content/CreateUpdate/CreateUpdate.tsx
index 7a62c0984c..7a31fbdd74 100644
--- a/src/pages/Research/Content/CreateUpdate/CreateUpdate.tsx
+++ b/src/pages/Research/Content/CreateUpdate/CreateUpdate.tsx
@@ -1,7 +1,4 @@
-import React from 'react'
-import { Navigate, useParams } from '@remix-run/react'
 import { observer } from 'mobx-react'
-import { Loader } from 'oa-components'
 import { useResearchStore } from 'src/stores/Research/research.store'
 import { isAllowedToEditContent } from 'src/utils/helpers'
 import { Text } from 'theme-ui'
@@ -9,44 +6,19 @@ import { Text } from 'theme-ui'
 import { ResearchUpdateForm } from '../Common/ResearchUpdate.form'
 import TEMPLATE from './Template'
 
-const CreateUpdate = observer(() => {
-  const { slug } = useParams()
-  const [isLoading, setIsLoading] = React.useState<boolean>(true)
-  const store = useResearchStore()
+import type { IResearchDB } from 'oa-shared'
 
-  React.useEffect(() => {
-    const init = async () => {
-      let loggedInUser = store.activeUser
-      if (!loggedInUser) {
-        // TODO - handle the case where user is still loading
-        await new Promise<void>((resolve) =>
-          setTimeout(() => {
-            loggedInUser = store.activeUser
-            resolve()
-          }, 3000),
-        )
-      }
-      if (!store.activeResearchItem) {
-        await store.setActiveResearchItemBySlug(slug)
-      }
-      setIsLoading(false)
-    }
-    init()
-  }, [slug])
+type CreateUpdateProps = {
+  research: IResearchDB
+}
 
-  if (isLoading) {
-    return <Loader />
-  }
-  if (!store.activeUser) {
-    return <Navigate to={'/research/' + slug} />
-  }
+const CreateUpdate = observer(({ research }: CreateUpdateProps) => {
+  const store = useResearchStore()
 
-  if (
-    store.activeResearchItem &&
-    isAllowedToEditContent(store.activeResearchItem, store.activeUser)
-  ) {
+  if (store.activeUser && isAllowedToEditContent(research, store.activeUser)) {
     return (
       <ResearchUpdateForm
+        research={research}
         formValues={TEMPLATE.INITIAL_VALUES}
         parentType="create"
       />
diff --git a/src/pages/Research/Content/EditResearch/index.tsx b/src/pages/Research/Content/EditResearch/index.tsx
index 540b6b661d..5951b26f19 100644
--- a/src/pages/Research/Content/EditResearch/index.tsx
+++ b/src/pages/Research/Content/EditResearch/index.tsx
@@ -1,8 +1,7 @@
-import * as React from 'react'
-import { useNavigate, useParams } from '@remix-run/react'
-import { toJS } from 'mobx'
+import { useEffect, useState } from 'react'
+import { useNavigate } from '@remix-run/react'
 import { observer } from 'mobx-react'
-import { BlockedRoute, Loader } from 'oa-components'
+import { BlockedRoute } from 'oa-components'
 import ResearchForm from 'src/pages/Research/Content/Common/Research.form'
 import { useResearchStore } from 'src/stores/Research/research.store'
 import { isAllowedToEditContent } from 'src/utils/helpers'
@@ -10,58 +9,33 @@ import { Text } from 'theme-ui'
 
 import { logger } from '../../../../logger'
 
-import type { IResearch, IUser } from 'oa-shared'
+import type { IResearch, IResearchDB, IUser } from 'oa-shared'
 
 interface IState {
   formValues: IResearch.ItemDB | null
-  isLoading: boolean
   loggedInUser?: IUser | undefined
 }
 
-const EditResearch = observer(() => {
-  const { slug } = useParams()
+type EditResearchProps = {
+  research: IResearchDB
+}
+
+const EditResearch = observer(({ research }: EditResearchProps) => {
   const store = useResearchStore()
   const navigate = useNavigate()
-  const [{ formValues, isLoading, loggedInUser }, setState] =
-    React.useState<IState>({
-      formValues: store.activeResearchItem,
-      isLoading: !store.activeResearchItem,
-      loggedInUser: store.activeUser as IUser,
-    })
+  const [{ formValues, loggedInUser }, setState] = useState<IState>({
+    formValues: research,
+    loggedInUser: store.activeUser as IUser,
+  })
 
-  React.useEffect(() => {
-    const init = async () => {
-      let loggedInUser = store.activeUser
-      if (!loggedInUser) {
-        // TODO - handle the case where user is still loading
-        await new Promise<void>((resolve) =>
-          setTimeout(() => {
-            loggedInUser = store.activeUser
-            resolve()
-          }, 3000),
-        )
-      }
-      if (store.activeResearchItem) {
-        setState((prevState) => ({
-          ...prevState,
-          formValues: toJS(store.activeResearchItem) as IResearch.ItemDB,
-          isLoading: false,
-          loggedInUser: loggedInUser as IUser,
-        }))
-      } else {
-        const doc = await store.setActiveResearchItemBySlug(slug)
-        setState((prevState) => ({
-          ...prevState,
-          formValues: doc as IResearch.ItemDB,
-          isLoading: false,
-          loggedInUser: loggedInUser as IUser,
-        }))
-      }
-    }
-    init()
-  }, [slug])
+  useEffect(() => {
+    setState((prevState) => ({
+      ...prevState,
+      loggedInUser: store.activeUser as IUser,
+    }))
+  }, [store.activeUser])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (
       formValues &&
       (!loggedInUser || !isAllowedToEditContent(formValues, loggedInUser))
@@ -70,10 +44,6 @@ const EditResearch = observer(() => {
     }
   }, [loggedInUser && formValues])
 
-  if (isLoading) {
-    return <Loader />
-  }
-
   if (!formValues) {
     return (
       <Text mt="50px" sx={{ width: '100%', textAlign: 'center' }}>
@@ -95,6 +65,7 @@ const EditResearch = observer(() => {
     <ResearchForm
       data-testid="EditResearch"
       formValues={formValues}
+      research={research}
       parentType="edit"
     />
   )
diff --git a/src/pages/Research/Content/EditUpdate/index.tsx b/src/pages/Research/Content/EditUpdate/index.tsx
index 2c9ee27818..c885a9474c 100644
--- a/src/pages/Research/Content/EditUpdate/index.tsx
+++ b/src/pages/Research/Content/EditUpdate/index.tsx
@@ -1,90 +1,44 @@
 import React, { useEffect } from 'react'
 import { useNavigate, useParams } from '@remix-run/react'
-import { toJS } from 'mobx'
 import { observer } from 'mobx-react'
-import { BlockedRoute, Loader } from 'oa-components'
+import { BlockedRoute } from 'oa-components'
 import { ResearchUpdateForm } from 'src/pages/Research/Content/Common/ResearchUpdate.form'
 import { useResearchStore } from 'src/stores/Research/research.store'
 import { isAllowedToEditContent } from 'src/utils/helpers'
 import { Text } from 'theme-ui'
 
-import type { IResearch, IUser } from 'oa-shared'
+import type { IResearch, IResearchDB, IUser } from 'oa-shared'
 
 interface IState {
   formValues: IResearch.UpdateDB
-  isLoading: boolean
   loggedInUser?: IUser | undefined
 }
 type IProps = {
-  updateId?: string
+  updateId: string
+  research: IResearchDB
 }
 
 const EditUpdate = observer((props: IProps) => {
   const { update, slug } = useParams()
   const store = useResearchStore()
   const navigate = useNavigate()
-  const [state, setState] = React.useState<IState>({
-    formValues: {} as IResearch.UpdateDB,
-    isLoading: !store.activeResearchItem,
+  const [{ formValues, loggedInUser }] = React.useState<IState>({
+    formValues: props.research.updates.find(
+      (upd) => upd._id === update,
+    ) as IResearch.UpdateDB,
     loggedInUser: store.activeUser as IUser,
   })
 
-  React.useEffect(() => {
-    const init = async () => {
-      let loggedInUser = store.activeUser
-      if (!loggedInUser) {
-        // TODO - handle the case where user is still loading
-        await new Promise<void>((resolve) =>
-          setTimeout(() => {
-            loggedInUser = store.activeUser
-            resolve()
-          }, 3000),
-        )
-      }
-      const updateId = props.updateId ? props.updateId : update
-      if (store.activeResearchItem) {
-        const update = store.activeResearchItem.updates.find(
-          (upd) => upd._id === updateId,
-        )
-        setState((prevState) => ({
-          ...prevState,
-          formValues: toJS(update) as IResearch.UpdateDB,
-          isLoading: false,
-          loggedInUser: loggedInUser as IUser,
-        }))
-      } else {
-        const doc = await store.setActiveResearchItemBySlug(slug)
-        let update
-        if (doc) {
-          update = doc.updates.find((upd) => upd._id === updateId)
-        }
-        setState((prevState) => ({
-          ...prevState,
-          formValues: update as IResearch.UpdateDB,
-          isLoading: false,
-          loggedInUser: loggedInUser as IUser,
-        }))
-      }
-    }
-    init()
-  }, [slug, update, props.updateId])
-
   useEffect(() => {
-    if (store.activeResearchItem) {
-      if (
-        !state.loggedInUser ||
-        !isAllowedToEditContent(store.activeResearchItem, state.loggedInUser)
-      ) {
-        navigate('/research/' + store.activeResearchItem.slug)
-      }
+    if (
+      !loggedInUser ||
+      !isAllowedToEditContent(props.research, loggedInUser)
+    ) {
+      navigate('/research/' + props.research.slug)
     }
-  }, [state.loggedInUser, store.activeResearchItem])
-
-  if (state.isLoading) {
-    return <Loader />
-  }
+  }, [loggedInUser, formValues])
 
-  if (!state.formValues) {
+  if (!formValues) {
     return (
       <Text mt="50px" sx={{ width: '100%', textAlign: 'center' }}>
         Research update not found
@@ -92,10 +46,7 @@ const EditUpdate = observer((props: IProps) => {
     )
   }
 
-  if (
-    state.formValues.locked &&
-    state.formValues.locked.by !== state.loggedInUser?.userName
-  ) {
+  if (formValues.locked && formValues.locked.by !== loggedInUser?.userName) {
     return (
       <BlockedRoute
         redirectLabel="Back to research"
@@ -108,8 +59,9 @@ const EditUpdate = observer((props: IProps) => {
 
   return (
     <ResearchUpdateForm
-      formValues={state.formValues}
-      redirectUrl={'/research/' + store.activeResearchItem?.slug}
+      formValues={formValues}
+      research={props.research}
+      redirectUrl={'/research/' + props.research.slug}
       parentType="edit"
     />
   )
diff --git a/src/pages/Research/Content/ResearchArticle.tsx b/src/pages/Research/Content/ResearchArticle.tsx
index 092755f938..d1f3a3239d 100644
--- a/src/pages/Research/Content/ResearchArticle.tsx
+++ b/src/pages/Research/Content/ResearchArticle.tsx
@@ -197,6 +197,7 @@ const ResearchArticle = observer(({ research }: ResearchArticleProps) => {
           getPublicUpdates(research, researchStore.activeUser).map(
             (update, index) => (
               <ResearchUpdate
+                research={research}
                 update={update}
                 key={update._id}
                 updateIndex={index}
diff --git a/src/pages/Research/Content/ResearchUpdate.tsx b/src/pages/Research/Content/ResearchUpdate.tsx
index 845bad4f04..3185f0c0ff 100644
--- a/src/pages/Research/Content/ResearchUpdate.tsx
+++ b/src/pages/Research/Content/ResearchUpdate.tsx
@@ -18,9 +18,10 @@ import { Box, Card, Flex, Heading, Text } from 'theme-ui'
 import { ResearchLinkToUpdate } from './ResearchLinkToUpdate'
 import { ResearchUpdateDiscussion } from './ResearchUpdateDiscussion'
 
-import type { IResearch } from 'oa-shared'
+import type { IResearch, IResearchDB } from 'oa-shared'
 
 interface IProps {
+  research: IResearchDB
   update: IResearch.Update
   updateIndex: number
   isEditable: boolean
@@ -48,10 +49,9 @@ const ResearchUpdate = (props: IProps) => {
   const loggedInUser = useCommonStores().stores.userStore.activeUser
 
   const contributors = useContributorsData(collaborators || [])
-  const research = researchStore.activeResearchItem
 
   const handleDownloadClick = async () => {
-    researchStore.incrementDownloadCount(_id)
+    researchStore.incrementDownloadCount(props.research, _id)
   }
 
   const displayNumber = updateIndex + 1
@@ -103,9 +103,7 @@ const ResearchUpdate = (props: IProps) => {
             <Heading sx={{ textAlign: 'center' }}>{displayNumber}</Heading>
           </Card>
 
-          {research && (
-            <ResearchLinkToUpdate research={research} update={update} />
-          )}
+          <ResearchLinkToUpdate research={props.research} update={update} />
         </Flex>
 
         <Flex
@@ -212,7 +210,7 @@ const ResearchUpdate = (props: IProps) => {
             </Flex>
             <ResearchUpdateDiscussion
               update={update}
-              research={research}
+              research={props.research}
               showComments={showComments}
             />
           </Card>
diff --git a/src/routes/_.research.$slug.edit-update.$update.tsx b/src/routes/_.research.$slug.edit-update.$update.tsx
deleted file mode 100644
index 577d978b59..0000000000
--- a/src/routes/_.research.$slug.edit-update.$update.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { isPreciousPlastic } from 'src/config/config'
-import { AuthRoute } from 'src/pages/common/AuthRoute'
-import { RESEARCH_EDITOR_ROLES } from 'src/pages/Research/constants'
-import EditUpdate from 'src/pages/Research/Content/EditUpdate'
-
-export async function clientLoader() {
-  return null
-}
-
-export default function Index() {
-  const roles = isPreciousPlastic() ? [] : RESEARCH_EDITOR_ROLES
-
-  return (
-    <AuthRoute roleRequired={roles}>
-      <EditUpdate />
-    </AuthRoute>
-  )
-}
diff --git a/src/routes/_.research.$slug.edit-update.$updateId.tsx b/src/routes/_.research.$slug.edit-update.$updateId.tsx
new file mode 100644
index 0000000000..ef3f2e62fe
--- /dev/null
+++ b/src/routes/_.research.$slug.edit-update.$updateId.tsx
@@ -0,0 +1,26 @@
+import { json, useLoaderData } from '@remix-run/react'
+import { isPreciousPlastic } from 'src/config/config'
+import { AuthRoute } from 'src/pages/common/AuthRoute'
+import { RESEARCH_EDITOR_ROLES } from 'src/pages/Research/constants'
+import EditUpdate from 'src/pages/Research/Content/EditUpdate'
+import { researchService } from 'src/pages/Research/research.service'
+
+import type { LoaderFunctionArgs } from '@remix-run/node'
+import type { IResearchDB } from 'oa-shared'
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  const research = await researchService.getBySlug(params.slug as string)
+
+  return json({ research, updateId: params.updateId as string })
+}
+export default function Index() {
+  const data = useLoaderData<typeof loader>()
+  const research = data.research as IResearchDB
+  const roles = isPreciousPlastic() ? [] : RESEARCH_EDITOR_ROLES
+
+  return (
+    <AuthRoute roleRequired={roles}>
+      <EditUpdate research={research} updateId={data.updateId} />
+    </AuthRoute>
+  )
+}
diff --git a/src/routes/_.research.$slug.edit.tsx b/src/routes/_.research.$slug.edit.tsx
index 0ea0f40889..14498c7e73 100644
--- a/src/routes/_.research.$slug.edit.tsx
+++ b/src/routes/_.research.$slug.edit.tsx
@@ -1,18 +1,27 @@
+import { json, type LoaderFunctionArgs } from '@remix-run/node'
+import { useLoaderData } from '@remix-run/react'
 import { isPreciousPlastic } from 'src/config/config'
 import { AuthRoute } from 'src/pages/common/AuthRoute'
 import { RESEARCH_EDITOR_ROLES } from 'src/pages/Research/constants'
 import EditResearch from 'src/pages/Research/Content/EditResearch'
+import { researchService } from 'src/pages/Research/research.service'
 
-export async function clientLoader() {
-  return null
+import type { IResearchDB } from 'oa-shared'
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  const research = await researchService.getBySlug(params.slug as string)
+
+  return json({ research })
 }
 
 export default function Index() {
+  const data = useLoaderData<typeof loader>()
+  const research = data.research as IResearchDB
   const roles = isPreciousPlastic() ? [] : RESEARCH_EDITOR_ROLES
 
   return (
     <AuthRoute roleRequired={roles}>
-      <EditResearch />
+      <EditResearch research={research} />
     </AuthRoute>
   )
 }
diff --git a/src/routes/_.research.$slug.new-update.tsx b/src/routes/_.research.$slug.new-update.tsx
index dcfb990406..a8cb14777f 100644
--- a/src/routes/_.research.$slug.new-update.tsx
+++ b/src/routes/_.research.$slug.new-update.tsx
@@ -1,18 +1,27 @@
+import { json, type LoaderFunctionArgs } from '@remix-run/node'
+import { useLoaderData } from '@remix-run/react'
 import { isPreciousPlastic } from 'src/config/config'
 import { AuthRoute } from 'src/pages/common/AuthRoute'
 import { RESEARCH_EDITOR_ROLES } from 'src/pages/Research/constants'
 import CreateUpdate from 'src/pages/Research/Content/CreateUpdate/CreateUpdate'
+import { researchService } from 'src/pages/Research/research.service'
 
-export async function clientLoader() {
-  return null
+import type { IResearchDB } from 'oa-shared'
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  const research = await researchService.getBySlug(params.slug as string)
+
+  return json({ research })
 }
 
 export default function Index() {
+  const data = useLoaderData<typeof loader>()
+  const research = data.research as IResearchDB
   const roles = isPreciousPlastic() ? [] : RESEARCH_EDITOR_ROLES
 
   return (
     <AuthRoute roleRequired={roles}>
-      <CreateUpdate />
+      <CreateUpdate research={research} />
     </AuthRoute>
   )
 }
diff --git a/src/stores/Research/research.store.tsx b/src/stores/Research/research.store.tsx
index 68bca5e332..32eed4e012 100644
--- a/src/stores/Research/research.store.tsx
+++ b/src/stores/Research/research.store.tsx
@@ -175,6 +175,7 @@ export class ResearchStore extends ModuleStore {
     const user = this.activeUser as IUser
     const updates = (await dbRef.get('server'))?.updates || [] // save old updates when editing
     const collaborators = await this._setCollaborators(values.collaborators)
+    let updatedResearch: IResearchDB | null = null
 
     try {
       const userCountry = getUserCountry(user)
@@ -203,7 +204,11 @@ export class ResearchStore extends ModuleStore {
       }
       logger.debug('populating database', researchItem)
       // set the database document
-      await this._updateResearchItem(dbRef, researchItem, true)
+      updatedResearch = await this._updateResearchItem(
+        dbRef,
+        researchItem,
+        true,
+      )
       this.updateResearchUploadStatus('Database')
       logger.debug('post added')
       // complete
@@ -213,6 +218,8 @@ export class ResearchStore extends ModuleStore {
       //TODO: Add error handling here :(
       //throw new Error(error.message)
     }
+
+    return updatedResearch
   }
 
   /**

From 04870a571998ab8d5641b45e4037480feb655615 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Nunes?= <mario.nunes@create.pt>
Date: Sun, 27 Oct 2024 12:47:29 +0000
Subject: [PATCH 05/10] fix: research ssr with updates.

---
 .../Content/Common/ResearchUpdate.form.tsx    |  30 +-
 .../Research/Content/EditUpdate/index.tsx     |  27 +-
 .../Research/Content/ResearchArticle.tsx      | 418 +++++++++---------
 src/pages/Research/Content/ResearchUpdate.tsx |  33 +-
 src/routes/_.research.$slug._index.tsx        |  15 +-
 src/routes/_.research.tsx                     |   2 +-
 src/stores/Research/research.store.tsx        |  56 +--
 7 files changed, 298 insertions(+), 283 deletions(-)

diff --git a/src/pages/Research/Content/Common/ResearchUpdate.form.tsx b/src/pages/Research/Content/Common/ResearchUpdate.form.tsx
index 70bc42e3f8..e3c88e361e 100644
--- a/src/pages/Research/Content/Common/ResearchUpdate.form.tsx
+++ b/src/pages/Research/Content/Common/ResearchUpdate.form.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Form } from 'react-final-form'
 import styled from '@emotion/styled'
 import arrayMutators from 'final-form-arrays'
@@ -54,34 +54,40 @@ export const ResearchUpdateForm = observer((props: IProps) => {
   const { deletion, draft } = buttons
 
   const store = useResearchStore()
-  const [formState, setFormState] = React.useState<{ dirty: boolean }>({
+  const [formState, setFormState] = useState<{ dirty: boolean }>({
     dirty: false,
   })
-  const [showDeleteModal, setShowDeleteModal] = React.useState(false)
-  const [showSubmitModal, setShowSubmitModal] = React.useState<boolean>(false)
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [showSubmitModal, setShowSubmitModal] = useState<boolean>(false)
   const [showInvalidFileWarning, setInvalidFileWarning] =
-    React.useState<boolean>(false)
-  const [isDraft, setIsDraft] = React.useState<boolean>(
+    useState<boolean>(false)
+  const [isDraft, setIsDraft] = useState<boolean>(
     formValues.status === ResearchUpdateStatus.DRAFT,
   )
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (store.updateUploadStatus?.Complete) {
       window.removeEventListener('beforeunload', beforeUnload, false)
     }
   }, [store.updateUploadStatus?.Complete])
 
   // Managing locked state
-  React.useEffect(() => {
+  useEffect(() => {
     if (store.activeUser)
-      store.lockResearchUpdate(
-        props.research,
+      store.toggleLockResearchUpdate(
+        props.research._id,
         store.activeUser.userName,
         formValues._id,
+        true,
       )
 
     return () => {
-      store.unlockResearchUpdate(props.research, formValues._id)
+      store.toggleLockResearchUpdate(
+        props.research._id,
+        '',
+        formValues._id,
+        false,
+      )
     }
   }, [store.activeUser])
 
@@ -135,7 +141,7 @@ export const ResearchUpdateForm = observer((props: IProps) => {
   }
 
   // Display a confirmation dialog when leaving the page outside the React Router
-  const unloadDecorator = React.useCallback(
+  const unloadDecorator = useCallback(
     (form) => {
       return form.subscribe(
         ({ dirty }) => {
diff --git a/src/pages/Research/Content/EditUpdate/index.tsx b/src/pages/Research/Content/EditUpdate/index.tsx
index c885a9474c..8e1bc3fd74 100644
--- a/src/pages/Research/Content/EditUpdate/index.tsx
+++ b/src/pages/Research/Content/EditUpdate/index.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react'
-import { useNavigate, useParams } from '@remix-run/react'
+import { useEffect, useMemo } from 'react'
+import { useNavigate } from '@remix-run/react'
 import { observer } from 'mobx-react'
 import { BlockedRoute } from 'oa-components'
 import { ResearchUpdateForm } from 'src/pages/Research/Content/Common/ResearchUpdate.form'
@@ -7,27 +7,24 @@ import { useResearchStore } from 'src/stores/Research/research.store'
 import { isAllowedToEditContent } from 'src/utils/helpers'
 import { Text } from 'theme-ui'
 
-import type { IResearch, IResearchDB, IUser } from 'oa-shared'
+import type { IResearch, IResearchDB } from 'oa-shared'
 
-interface IState {
-  formValues: IResearch.UpdateDB
-  loggedInUser?: IUser | undefined
-}
 type IProps = {
   updateId: string
   research: IResearchDB
 }
 
 const EditUpdate = observer((props: IProps) => {
-  const { update, slug } = useParams()
   const store = useResearchStore()
   const navigate = useNavigate()
-  const [{ formValues, loggedInUser }] = React.useState<IState>({
-    formValues: props.research.updates.find(
-      (upd) => upd._id === update,
-    ) as IResearch.UpdateDB,
-    loggedInUser: store.activeUser as IUser,
-  })
+  const loggedInUser = store.activeUser
+  const formValues = useMemo<IResearch.UpdateDB>(
+    () =>
+      props.research.updates.find(
+        (upd) => upd._id === props.updateId,
+      ) as IResearch.UpdateDB,
+    [props.updateId, props.research.updates],
+  )
 
   useEffect(() => {
     if (
@@ -50,7 +47,7 @@ const EditUpdate = observer((props: IProps) => {
     return (
       <BlockedRoute
         redirectLabel="Back to research"
-        redirectUrl={`/research/${slug}`}
+        redirectUrl={`/research/${props.research.slug}`}
       >
         This research update is currently being edited by another editor.
       </BlockedRoute>
diff --git a/src/pages/Research/Content/ResearchArticle.tsx b/src/pages/Research/Content/ResearchArticle.tsx
index d1f3a3239d..5cbad0e8d6 100644
--- a/src/pages/Research/Content/ResearchArticle.tsx
+++ b/src/pages/Research/Content/ResearchArticle.tsx
@@ -26,244 +26,250 @@ import {
 } from 'src/utils/helpers'
 import { Box, Flex } from 'theme-ui'
 
-import {
-  getPublicUpdates,
-  researchUpdateStatusFilter,
-} from '../researchHelpers'
+import { researchUpdateStatusFilter } from '../researchHelpers'
 import ResearchDescription from './ResearchDescription'
 import ResearchUpdate from './ResearchUpdate'
 
-import type { IResearchDB, IUser } from 'oa-shared'
-
-const areCommentsVisible = (updateId) => {
-  return updateId === getResearchUpdateId(window.location.hash)
-}
+import type { IResearch, IResearchDB, IUser } from 'oa-shared'
 
 type ResearchArticleProps = {
   research: IResearchDB
+  publicUpdates: IResearch.UpdateDB[]
 }
 
-const ResearchArticle = observer(({ research }: ResearchArticleProps) => {
-  const location = useLocation()
-  const researchStore = useResearchStore()
-  const { aggregationsStore } = useCommonStores().stores
-  const loggedInUser = researchStore.activeUser
-  const [subscribed, setSubscribed] = useState<boolean>(
-    research.subscribers?.includes(loggedInUser?.userName || '') || false,
-  )
-  const [subscribersCount, setSubscribersCount] = useState<number>(
-    research.subscribers?.length || 0,
-  )
-  const [voted, setVoted] = useState<boolean>(false)
-  const [usefulCount, setUsefulCount] = useState<number>(
-    research.votedUsefulBy?.length || 0,
-  )
+const ResearchArticle = observer(
+  ({ research, publicUpdates }: ResearchArticleProps) => {
+    const [updates, setUpdates] = useState(publicUpdates)
+    const location = useLocation()
+    const researchStore = useResearchStore()
+    const { aggregationsStore } = useCommonStores().stores
+    const loggedInUser = researchStore.activeUser
+    const [subscribed, setSubscribed] = useState<boolean>(
+      research.subscribers?.includes(loggedInUser?.userName || '') || false,
+    )
+    const [subscribersCount, setSubscribersCount] = useState<number>(
+      research.subscribers?.length || 0,
+    )
+    const [voted, setVoted] = useState<boolean>(false)
+    const [usefulCount, setUsefulCount] = useState<number>(
+      research.votedUsefulBy?.length || 0,
+    )
 
-  useEffect(() => {
-    // This could be improved if we can load the user profile server-side
-    if (researchStore?.activeUser) {
-      if (research.votedUsefulBy?.includes(researchStore.activeUser._id)) {
-        setVoted(true)
+    useEffect(() => {
+      // Only public updates (non draft) are server-side rendered.
+      // But we still need to display the draft updates when the currentUser is the author/contributor.
+      // Since the current user is only loaded client-side, we need to check and re-set the updates.
+      if (!researchStore.activeUser) {
+        return
       }
 
-      if (research.subscribers?.includes(researchStore.activeUser._id)) {
-        setSubscribed(true)
-      }
-    }
-  }, [researchStore?.activeUser])
+      const authorUpdates = research.updates?.filter((update) =>
+        researchUpdateStatusFilter(research, update, researchStore.activeUser),
+      )
 
-  const onUsefulClick = async (
-    vote: 'add' | 'delete',
-    eventCategory = 'Research',
-  ) => {
-    if (!loggedInUser?.userName) {
-      return
-    }
+      if (authorUpdates.length !== updates.length) {
+        setUpdates(authorUpdates)
+      }
+    }, [researchStore.activeUser])
 
-    // Trigger update without waiting
-    await researchStore.toggleUsefulByUser(research, loggedInUser?.userName)
-    setVoted((prev) => !prev)
+    useEffect(() => {
+      // This could be improved if we can load the user profile server-side
+      if (researchStore?.activeUser) {
+        if (research.votedUsefulBy?.includes(researchStore.activeUser._id)) {
+          setVoted(true)
+        }
 
-    setUsefulCount((prev) => {
-      return vote === 'add' ? prev + 1 : prev - 1
-    })
+        if (research.subscribers?.includes(researchStore.activeUser._id)) {
+          setSubscribed(true)
+        }
+      }
+    }, [researchStore?.activeUser])
 
-    trackEvent({
-      category: eventCategory,
-      action: vote === 'add' ? 'ResearchUseful' : 'ResearchUsefulRemoved',
-      label: research.slug,
-    })
-  }
+    const onUsefulClick = async (
+      vote: 'add' | 'delete',
+      eventCategory = 'Research',
+    ) => {
+      if (!loggedInUser?.userName) {
+        return
+      }
 
-  const scrollIntoRelevantSection = () => {
-    if (getResearchCommentId(location.hash) === '') return
-    const section = document.getElementById(
-      `update_${getResearchUpdateId(location.hash)}`,
-    )
-    section?.scrollIntoView({ behavior: 'smooth', block: 'start' })
-  }
+      // Trigger update without waiting
+      await researchStore.toggleUsefulByUser(research, loggedInUser?.userName)
+      setVoted((prev) => !prev)
 
-  useEffect(() => {
-    scrollIntoRelevantSection()
-  }, [location.hash])
+      setUsefulCount((prev) => {
+        return vote === 'add' ? prev + 1 : prev - 1
+      })
 
-  const onFollowClick = (researchSlug: string) => {
-    if (!loggedInUser?.userName || !research) {
-      return null
+      trackEvent({
+        category: eventCategory,
+        action: vote === 'add' ? 'ResearchUseful' : 'ResearchUsefulRemoved',
+        label: research.slug,
+      })
     }
 
-    let action: string
-
-    if (subscribed) {
-      researchStore.removeSubscriberFromResearchArticle(
-        research._id,
-        loggedInUser?.userName,
-      )
-      action = 'Unsubscribed'
-    } else {
-      researchStore.addSubscriberToResearchArticle(
-        research._id,
-        loggedInUser?.userName,
+    const scrollIntoRelevantSection = () => {
+      if (getResearchCommentId(location.hash) === '') return
+      const section = document.getElementById(
+        `update_${getResearchUpdateId(location.hash)}`,
       )
-      action = 'Subscribed'
+      section?.scrollIntoView({ behavior: 'smooth', block: 'start' })
     }
 
-    setSubscribersCount((prev) => prev + (subscribed ? -1 : 1))
-    // toggle subscribed
-    setSubscribed((prev) => !prev)
+    useEffect(() => {
+      scrollIntoRelevantSection()
+    }, [location.hash])
 
-    trackEvent({
-      category: 'Research',
-      action: action,
-      label: researchSlug,
-    })
-  }
+    const onFollowClick = (researchSlug: string) => {
+      if (!loggedInUser?.userName || !research) {
+        return null
+      }
 
-  const collaborators = Array.isArray(research?.collaborators)
-    ? research?.collaborators
-    : (
-        (research?.collaborators as string | undefined)?.split(',') || []
-      ).filter(Boolean)
+      let action: string
 
-  const contributors = useContributorsData(collaborators || [])
+      if (subscribed) {
+        researchStore.removeSubscriberFromResearchArticle(
+          research._id,
+          loggedInUser?.userName,
+        )
+        action = 'Unsubscribed'
+      } else {
+        researchStore.addSubscriberToResearchArticle(
+          research._id,
+          loggedInUser?.userName,
+        )
+        action = 'Subscribed'
+      }
 
-  const isEditable =
-    !!researchStore.activeUser &&
-    isAllowedToEditContent(research, researchStore.activeUser)
-  const isDeletable =
-    !!researchStore.activeUser &&
-    isAllowedToDeleteContent(research, researchStore.activeUser)
+      setSubscribersCount((prev) => prev + (subscribed ? -1 : 1))
+      // toggle subscribed
+      setSubscribed((prev) => !prev)
 
-  const researchAuthor = {
-    userName: research._createdBy,
-    countryCode: research.creatorCountry,
-    isVerified: aggregationsStore.isVerified(research._createdBy),
-  }
+      trackEvent({
+        category: 'Research',
+        action: action,
+        label: researchSlug,
+      })
+    }
 
-  return (
-    <Box sx={{ width: '100%', maxWidth: '1000px', alignSelf: 'center' }}>
-      <Breadcrumbs content={research} variant="research" />
-      <ResearchDescription
-        research={research}
-        key={research._id}
-        votedUsefulCount={usefulCount}
-        loggedInUser={loggedInUser as IUser}
-        isEditable={isEditable}
-        isDeletable={isDeletable}
-        hasUserVotedUseful={voted}
-        hasUserSubscribed={subscribed}
-        onUsefulClick={() =>
-          onUsefulClick(voted ? 'delete' : 'add', 'ResearchDescription')
-        }
-        onFollowClick={() => onFollowClick(research.slug)}
-        contributors={contributors}
-        subscribersCount={subscribersCount}
-        commentsCount={research.totalCommentCount}
-        updatesCount={
-          research.updates?.filter((u) =>
-            researchUpdateStatusFilter(research, u, researchStore.activeUser),
-          ).length || 0
-        }
-      />
-      <Flex
-        sx={{
-          flexDirection: 'column',
-          marginTop: 8,
-          marginBottom: 4,
-          gap: [4, 6],
-        }}
-      >
-        {research &&
-          getPublicUpdates(research, researchStore.activeUser).map(
-            (update, index) => (
-              <ResearchUpdate
-                research={research}
-                update={update}
-                key={update._id}
-                updateIndex={index}
-                isEditable={isEditable}
-                slug={research.slug}
-                showComments={areCommentsVisible(update._id)}
-              />
-            ),
-          )}
-      </Flex>
+    const collaborators = Array.isArray(research?.collaborators)
+      ? research?.collaborators
+      : (
+          (research?.collaborators as string | undefined)?.split(',') || []
+        ).filter(Boolean)
+
+    const contributors = useContributorsData(collaborators || [])
 
-      <ClientOnly fallback={<></>}>
-        {() => (
-          <UserEngagementWrapper>
-            <Box
-              sx={{
-                marginBottom: [6, 6, 12],
-              }}
-            >
-              {researchAuthor && (
-                <ArticleCallToAction
-                  author={researchAuthor}
-                  contributors={contributors}
-                >
-                  {research.moderation === IModerationStatus.ACCEPTED && (
-                    <UsefulStatsButton
+    const isEditable =
+      !!researchStore.activeUser &&
+      isAllowedToEditContent(research, researchStore.activeUser)
+    const isDeletable =
+      !!researchStore.activeUser &&
+      isAllowedToDeleteContent(research, researchStore.activeUser)
+
+    const researchAuthor = {
+      userName: research._createdBy,
+      countryCode: research.creatorCountry,
+      isVerified: aggregationsStore.isVerified(research._createdBy),
+    }
+
+    return (
+      <Box sx={{ width: '100%', maxWidth: '1000px', alignSelf: 'center' }}>
+        <Breadcrumbs content={research} variant="research" />
+        <ResearchDescription
+          research={research}
+          key={research._id}
+          votedUsefulCount={usefulCount}
+          loggedInUser={loggedInUser as IUser}
+          isEditable={isEditable}
+          isDeletable={isDeletable}
+          hasUserVotedUseful={voted}
+          hasUserSubscribed={subscribed}
+          onUsefulClick={() =>
+            onUsefulClick(voted ? 'delete' : 'add', 'ResearchDescription')
+          }
+          onFollowClick={() => onFollowClick(research.slug)}
+          contributors={contributors}
+          subscribersCount={subscribersCount}
+          commentsCount={research.totalCommentCount}
+          updatesCount={publicUpdates.length}
+        />
+        <Flex
+          sx={{
+            flexDirection: 'column',
+            marginTop: 8,
+            marginBottom: 4,
+            gap: [4, 6],
+          }}
+        >
+          {updates.map((update, index) => (
+            <ResearchUpdate
+              research={research}
+              update={update}
+              key={update._id}
+              updateIndex={index}
+              isEditable={false}
+              slug={research.slug}
+            />
+          ))}
+        </Flex>
+
+        <ClientOnly fallback={<></>}>
+          {() => (
+            <UserEngagementWrapper>
+              <Box
+                sx={{
+                  marginBottom: [6, 6, 12],
+                }}
+              >
+                {researchAuthor && (
+                  <ArticleCallToAction
+                    author={researchAuthor}
+                    contributors={contributors}
+                  >
+                    {research.moderation === IModerationStatus.ACCEPTED && (
+                      <UsefulStatsButton
+                        isLoggedIn={!!loggedInUser}
+                        votedUsefulCount={usefulCount}
+                        hasUserVotedUseful={voted}
+                        onUsefulClick={() =>
+                          onUsefulClick(
+                            voted ? 'delete' : 'add',
+                            'ArticleCallToAction',
+                          )
+                        }
+                      />
+                    )}
+                    <FollowButton
                       isLoggedIn={!!loggedInUser}
-                      votedUsefulCount={usefulCount}
-                      hasUserVotedUseful={voted}
-                      onUsefulClick={() =>
-                        onUsefulClick(
-                          voted ? 'delete' : 'add',
-                          'ArticleCallToAction',
-                        )
-                      }
+                      hasUserSubscribed={subscribed}
+                      onFollowClick={() => onFollowClick(research.slug)}
                     />
-                  )}
-                  <FollowButton
-                    isLoggedIn={!!loggedInUser}
-                    hasUserSubscribed={subscribed}
-                    onFollowClick={() => onFollowClick(research.slug)}
-                  />
-                </ArticleCallToAction>
-              )}
-            </Box>
-          </UserEngagementWrapper>
-        )}
-      </ClientOnly>
+                  </ArticleCallToAction>
+                )}
+              </Box>
+            </UserEngagementWrapper>
+          )}
+        </ClientOnly>
 
-      {isEditable && (
-        <Flex my={4}>
-          <Link to={`/research/${research.slug}/new-update`}>
-            <Button
-              type="button"
-              large
-              ml={2}
-              mb={[3, 3, 0]}
-              data-cy="addResearchUpdateButton"
-            >
-              Add update
-            </Button>
-          </Link>
-        </Flex>
-      )}
-    </Box>
-  )
-})
+        {isEditable && (
+          <Flex my={4}>
+            <Link to={`/research/${research.slug}/new-update`}>
+              <Button
+                type="button"
+                large
+                ml={2}
+                mb={[3, 3, 0]}
+                data-cy="addResearchUpdateButton"
+              >
+                Add update
+              </Button>
+            </Link>
+          </Flex>
+        )}
+      </Box>
+    )
+  },
+)
 
 export default ResearchArticle
diff --git a/src/pages/Research/Content/ResearchUpdate.tsx b/src/pages/Research/Content/ResearchUpdate.tsx
index 3185f0c0ff..3e3cf56236 100644
--- a/src/pages/Research/Content/ResearchUpdate.tsx
+++ b/src/pages/Research/Content/ResearchUpdate.tsx
@@ -1,4 +1,5 @@
-import { Link } from '@remix-run/react'
+import { useMemo } from 'react'
+import { Link, useLocation } from '@remix-run/react'
 import {
   Button,
   DisplayDate,
@@ -8,6 +9,8 @@ import {
   Username,
   VideoPlayer,
 } from 'oa-components'
+// eslint-disable-next-line import/no-unresolved
+import { ClientOnly } from 'remix-utils/client-only'
 import { DownloadWrapper } from 'src/common/DownloadWrapper'
 import { useContributorsData } from 'src/common/hooks/contributorsData'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
@@ -15,6 +18,7 @@ import { useResearchStore } from 'src/stores/Research/research.store'
 import { formatImagesForGallery } from 'src/utils/formatImageListForGallery'
 import { Box, Card, Flex, Heading, Text } from 'theme-ui'
 
+import { getResearchUpdateId } from './helper'
 import { ResearchLinkToUpdate } from './ResearchLinkToUpdate'
 import { ResearchUpdateDiscussion } from './ResearchUpdateDiscussion'
 
@@ -26,11 +30,11 @@ interface IProps {
   updateIndex: number
   isEditable: boolean
   slug: string
-  showComments: boolean
 }
 
 const ResearchUpdate = (props: IProps) => {
-  const { update, updateIndex, isEditable, slug, showComments } = props
+  const location = useLocation()
+  const { update, updateIndex, isEditable, slug } = props
   const {
     _id,
     _created,
@@ -57,6 +61,11 @@ const ResearchUpdate = (props: IProps) => {
   const displayNumber = updateIndex + 1
   const isDraft = status == 'draft'
 
+  const showComments = useMemo(
+    () => update._id === getResearchUpdateId(location.hash),
+    [location.hash],
+  )
+
   return (
     <Flex
       sx={{
@@ -187,7 +196,9 @@ const ResearchUpdate = (props: IProps) => {
             </Flex>
             <Box sx={{ width: '100%' }}>
               {videoUrl ? (
-                <VideoPlayer videoUrl={videoUrl} />
+                <ClientOnly fallback={<></>}>
+                  {() => <VideoPlayer videoUrl={videoUrl} />}
+                </ClientOnly>
               ) : (
                 <ImageGallery
                   images={formatImagesForGallery(images) as any}
@@ -208,11 +219,15 @@ const ResearchUpdate = (props: IProps) => {
                 fileDownloadCount={downloadCount}
               />
             </Flex>
-            <ResearchUpdateDiscussion
-              update={update}
-              research={props.research}
-              showComments={showComments}
-            />
+            <ClientOnly fallback={<></>}>
+              {() => (
+                <ResearchUpdateDiscussion
+                  update={update}
+                  research={props.research}
+                  showComments={showComments}
+                />
+              )}
+            </ClientOnly>
           </Card>
         </Flex>
       </Flex>
diff --git a/src/routes/_.research.$slug._index.tsx b/src/routes/_.research.$slug._index.tsx
index bbcee02d25..5895c1f866 100644
--- a/src/routes/_.research.$slug._index.tsx
+++ b/src/routes/_.research.$slug._index.tsx
@@ -1,21 +1,27 @@
 import { json } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
+import { ResearchUpdateStatus } from 'oa-shared'
 import { NotFoundPage } from 'src/pages/NotFound/NotFound'
 import ResearchArticle from 'src/pages/Research/Content/ResearchArticle'
 import { researchService } from 'src/pages/Research/research.service'
 import { generateTags, mergeMeta } from 'src/utils/seo.utils'
 
 import type { LoaderFunctionArgs } from '@remix-run/node'
-import type { IResearchDB } from 'oa-shared'
+import type { IResearch, IResearchDB } from 'oa-shared'
 
 export async function loader({ params }: LoaderFunctionArgs) {
   const research = await researchService.getBySlug(params.slug as string)
+  const publicUpdates =
+    research?.updates.filter(
+      (x) => x.status !== ResearchUpdateStatus.DRAFT && x._deleted !== true,
+    ) || []
 
-  return json({ research })
+  return json({ research, publicUpdates })
 }
 
 export const meta = mergeMeta<typeof loader>(({ data }) => {
   const research = data?.research as IResearchDB
+  const publicUpdates = data?.publicUpdates as IResearch.UpdateDB[]
 
   if (!research) {
     return []
@@ -26,17 +32,18 @@ export const meta = mergeMeta<typeof loader>(({ data }) => {
   return generateTags(
     title,
     research.description,
-    (research.updates?.at(0)?.images?.[0] as any)?.downloadUrl,
+    (publicUpdates?.at(0)?.images?.[0] as any)?.downloadUrl,
   )
 })
 
 export default function Index() {
   const data = useLoaderData<typeof loader>()
   const research = data.research as IResearchDB
+  const publicUpdates = data.publicUpdates as IResearch.UpdateDB[]
 
   if (!research) {
     return <NotFoundPage />
   }
 
-  return <ResearchArticle research={research} />
+  return <ResearchArticle research={research} publicUpdates={publicUpdates} />
 }
diff --git a/src/routes/_.research.tsx b/src/routes/_.research.tsx
index e6d66135d2..9f766be5c0 100644
--- a/src/routes/_.research.tsx
+++ b/src/routes/_.research.tsx
@@ -6,7 +6,7 @@ import {
   ResearchStoreContext,
 } from 'src/stores/Research/research.store'
 
-export async function clientLoader() {
+export async function loader() {
   return null
 }
 
diff --git a/src/stores/Research/research.store.tsx b/src/stores/Research/research.store.tsx
index 32eed4e012..e9658b70a9 100644
--- a/src/stores/Research/research.store.tsx
+++ b/src/stores/Research/research.store.tsx
@@ -47,8 +47,6 @@ export class ResearchStore extends ModuleStore {
       resetUpdateUploadStatus: action,
       lockResearchItem: action,
       unlockResearchItem: action,
-      lockResearchUpdate: action,
-      unlockResearchUpdate: action,
     })
   }
 
@@ -421,47 +419,33 @@ export class ResearchStore extends ModuleStore {
     }
   }
 
-  public async lockResearchUpdate(
-    item: IResearchDB,
+  public async toggleLockResearchUpdate(
+    researchId: string,
     username: string,
     updateId: string,
+    lock: boolean,
   ) {
-    if (item) {
-      const dbRef = this.db
-        .collection<IResearch.Item>(COLLECTION_NAME)
-        .doc(item._id)
-      const updateIndex = item.updates.findIndex((upd) => upd._id === updateId)
-      const newItem = {
-        ...item,
-        updates: [...item.updates],
-      }
+    const dbRef = this.db
+      .collection<IResearch.Item>(COLLECTION_NAME)
+      .doc(researchId)
 
-      if (updateIndex && newItem.updates[updateIndex]) {
-        newItem.updates[updateIndex].locked = {
-          by: username,
-          at: new Date().toISOString(),
-        }
-      }
-      await this._updateResearchItem(dbRef, newItem)
+    const item = toJS(await dbRef.get('server')) as IResearchDB
+    const updateIndex = item.updates.findIndex((upd) => upd._id === updateId)
+    const updatedItem = {
+      ...item,
+      updates: [...item.updates],
     }
-  }
-
-  public async unlockResearchUpdate(item: IResearchDB, updateId: string) {
-    if (item) {
-      const dbRef = this.db
-        .collection<IResearch.Item>(COLLECTION_NAME)
-        .doc(item._id)
-      const updateIndex = item.updates.findIndex((upd) => upd._id === updateId)
-      const newItem = {
-        ...item,
-        updates: [...item.updates],
-      }
 
-      if (newItem.updates[updateIndex]) {
-        newItem.updates[updateIndex].locked = null
-      }
-      await this._updateResearchItem(dbRef, newItem)
+    if (updatedItem.updates[updateIndex]) {
+      updatedItem.updates[updateIndex].locked = lock
+        ? {
+            by: username,
+            at: new Date().toISOString(),
+          }
+        : null
     }
+
+    await dbRef.set(updatedItem)
   }
 
   private async _setCollaborators(

From aa246dbffce90bc2e2428bdb6db0eae2c40bd183 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Nunes?= <mario.nunes@create.pt>
Date: Sun, 27 Oct 2024 14:19:00 +0000
Subject: [PATCH 06/10] fix: tests

---
 .../Content/Common/ResearchUpdate.form.test.tsx     |  8 ++++++--
 src/pages/Research/Content/ResearchArticle.test.tsx | 13 +++++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/pages/Research/Content/Common/ResearchUpdate.form.test.tsx b/src/pages/Research/Content/Common/ResearchUpdate.form.test.tsx
index 2b65f900fd..b040013c85 100644
--- a/src/pages/Research/Content/Common/ResearchUpdate.form.test.tsx
+++ b/src/pages/Research/Content/Common/ResearchUpdate.form.test.tsx
@@ -4,7 +4,10 @@ import { createMemoryRouter, RouterProvider } from 'react-router-dom'
 import { createRoutesFromElements, Route } from '@remix-run/react'
 import { render } from '@testing-library/react'
 import { ThemeProvider } from '@theme-ui/core'
-import { FactoryResearchItemUpdate } from 'src/test/factories/ResearchItem'
+import {
+  FactoryResearchItem,
+  FactoryResearchItemUpdate,
+} from 'src/test/factories/ResearchItem'
 import { testingThemeStyles } from 'src/test/utils/themeUtils'
 import { describe, expect, it, vi } from 'vitest'
 
@@ -43,7 +46,7 @@ vi.mock('src/stores/Research/research.store', () => {
         Complete: false,
       },
       isTitleThatReusesSlug: vi.fn(),
-      unlockResearchUpdate: vi.fn(),
+      toggleLockResearchUpdate: vi.fn(),
     }),
   }
 })
@@ -86,6 +89,7 @@ const getWrapper = (formValues, parentType, navProps) => {
         index
         element={
           <ResearchUpdateForm
+            research={FactoryResearchItem()}
             formValues={formValues}
             parentType={parentType}
             {...navProps}
diff --git a/src/pages/Research/Content/ResearchArticle.test.tsx b/src/pages/Research/Content/ResearchArticle.test.tsx
index 7400626ea0..9d6a70f18a 100644
--- a/src/pages/Research/Content/ResearchArticle.test.tsx
+++ b/src/pages/Research/Content/ResearchArticle.test.tsx
@@ -215,7 +215,7 @@ describe('Research Article', () => {
               FactoryResearchItemUpdate({
                 title: 'Research Update #2',
                 collaborators: null!,
-                status: ResearchUpdateStatus.PUBLISHED,
+                status: ResearchUpdateStatus.DRAFT,
                 _deleted: false,
               }),
               FactoryResearchItemUpdate({
@@ -444,7 +444,16 @@ const getWrapper = (research: IResearchDB) => {
       <Route
         path="/research/:slug"
         key={1}
-        element={<ResearchArticle research={research} />}
+        element={
+          <ResearchArticle
+            research={research}
+            publicUpdates={research.updates.filter(
+              (x) =>
+                x._deleted !== true &&
+                x.status === ResearchUpdateStatus.PUBLISHED,
+            )}
+          />
+        }
       />,
     ),
     {

From 8eda30aee7d2c0b83813e7605c70cbcbd2913486 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Nunes?= <mario.nunes@create.pt>
Date: Sun, 27 Oct 2024 14:39:27 +0000
Subject: [PATCH 07/10] fix: edit update and tests

---
 src/pages/Research/Content/ResearchArticle.test.tsx | 1 +
 src/pages/Research/Content/ResearchArticle.tsx      | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/Research/Content/ResearchArticle.test.tsx b/src/pages/Research/Content/ResearchArticle.test.tsx
index 9d6a70f18a..b93f81b489 100644
--- a/src/pages/Research/Content/ResearchArticle.test.tsx
+++ b/src/pages/Research/Content/ResearchArticle.test.tsx
@@ -257,6 +257,7 @@ describe('Research Article', () => {
         _modified: _created,
         title: 'A title',
         description: 'A description',
+        status: ResearchUpdateStatus.PUBLISHED,
       })
       ;(useResearchStore as Mock).mockReturnValue(mockResearchStore)
       // Act
diff --git a/src/pages/Research/Content/ResearchArticle.tsx b/src/pages/Research/Content/ResearchArticle.tsx
index 5cbad0e8d6..1a51bff9e6 100644
--- a/src/pages/Research/Content/ResearchArticle.tsx
+++ b/src/pages/Research/Content/ResearchArticle.tsx
@@ -208,7 +208,7 @@ const ResearchArticle = observer(
               update={update}
               key={update._id}
               updateIndex={index}
-              isEditable={false}
+              isEditable={isEditable}
               slug={research.slug}
             />
           ))}

From b0d0063a843d48e6cc5c62db3ef37c1c673b2e66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Nunes?= <mario.nunes@create.pt>
Date: Thu, 31 Oct 2024 18:56:35 +0000
Subject: [PATCH 08/10] fix: don't use crypto api

---
 packages/components/src/FollowButton/FollowButton.tsx         | 2 +-
 .../components/src/UsefulStatsButton/UsefulStatsButton.tsx    | 2 +-
 packages/cypress/src/integration/questions/write.spec.ts      | 4 ++--
 packages/cypress/src/integration/research/write.spec.ts       | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/FollowButton/FollowButton.tsx b/packages/components/src/FollowButton/FollowButton.tsx
index 2f704a7732..dfa3291415 100644
--- a/packages/components/src/FollowButton/FollowButton.tsx
+++ b/packages/components/src/FollowButton/FollowButton.tsx
@@ -16,7 +16,7 @@ export interface IProps {
 export const FollowButton = (props: IProps) => {
   const { hasUserSubscribed, isLoggedIn, onFollowClick, sx } = props
   const navigate = useNavigate()
-  const uuid = useMemo(() => crypto.randomUUID(), [])
+  const uuid = useMemo(() => (Math.random() * 16).toString(), [])
 
   return (
     <>
diff --git a/packages/components/src/UsefulStatsButton/UsefulStatsButton.tsx b/packages/components/src/UsefulStatsButton/UsefulStatsButton.tsx
index 0698587768..f03659919e 100644
--- a/packages/components/src/UsefulStatsButton/UsefulStatsButton.tsx
+++ b/packages/components/src/UsefulStatsButton/UsefulStatsButton.tsx
@@ -18,7 +18,7 @@ export interface IProps {
 export const UsefulStatsButton = (props: IProps) => {
   const { theme } = useThemeUI() as any
   const navigate = useNavigate()
-  const uuid = useMemo(() => crypto.randomUUID(), [])
+  const uuid = useMemo(() => (Math.random() * 16).toString(), [])
 
   const [disabled, setDisabled] = useState<boolean>()
 
diff --git a/packages/cypress/src/integration/questions/write.spec.ts b/packages/cypress/src/integration/questions/write.spec.ts
index 2b0f48df87..28a8323af3 100644
--- a/packages/cypress/src/integration/questions/write.spec.ts
+++ b/packages/cypress/src/integration/questions/write.spec.ts
@@ -5,7 +5,7 @@ const item = questions[0]
 
 describe('[Question]', () => {
   describe('[Create a question]', () => {
-    const initialRandomId = crypto.randomUUID().slice(0, 8)
+    const initialRandomId = (Math.random() * 16).toString()
     const initialTitle = initialRandomId + ' Health cost of plastic?'
     const initialExpectedSlug = initialRandomId + '-health-cost-of-plastic'
     const initialQuestionDescription =
@@ -13,7 +13,7 @@ describe('[Question]', () => {
     const category = 'exhibition'
     const tag1 = 'product'
     const tag2 = 'workshop'
-    const updatedRandomId = crypto.randomUUID().slice(0, 8)
+    const updatedRandomId = (Math.random() * 16).toString()
     const updatedTitle = updatedRandomId + ' Real health cost of plastic?'
     const updatedExpectedSlug = updatedRandomId + '-real-health-cost-of-plastic'
     const updatedQuestionDescription = `${initialQuestionDescription} and super awesome goggles`
diff --git a/packages/cypress/src/integration/research/write.spec.ts b/packages/cypress/src/integration/research/write.spec.ts
index ff0bf84946..6a77cd0bed 100644
--- a/packages/cypress/src/integration/research/write.spec.ts
+++ b/packages/cypress/src/integration/research/write.spec.ts
@@ -154,7 +154,7 @@ describe('[Research]', () => {
     })
 
     it('[Any PP user]', () => {
-      const randomId = crypto.randomUUID().slice(0, 8)
+      const randomId = (Math.random() * 16).toString()
       const title = randomId + ' PP plastic stuff'
       const expectSlug = randomId + '-pp-plastic-stuff'
       const description = 'Bespoke research topic'
@@ -255,7 +255,7 @@ describe('[Research]', () => {
 
   describe('[Displays draft updates for Author]', () => {
     it('[By Authenticated]', () => {
-      const randomId = crypto.randomUUID().slice(0, 8)
+      const randomId = (Math.random() * 16).toString()
       const updateTitle = `${randomId} Create a research update`
       const updateDescription = 'This is the description for the update.'
       const updateVideoUrl = 'http://youtube.com/watch?v=sbcWY7t-JX8'

From 7a2a11c3f2a0bc460c7287ac0971390bccf7748f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Nunes?= <mario.nunes@create.pt>
Date: Thu, 31 Oct 2024 23:17:49 +0000
Subject: [PATCH 09/10] fix: tests

---
 packages/cypress/src/integration/questions/write.spec.ts | 5 +++--
 packages/cypress/src/integration/research/write.spec.ts  | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/cypress/src/integration/questions/write.spec.ts b/packages/cypress/src/integration/questions/write.spec.ts
index 28a8323af3..fc4dd65b45 100644
--- a/packages/cypress/src/integration/questions/write.spec.ts
+++ b/packages/cypress/src/integration/questions/write.spec.ts
@@ -1,11 +1,12 @@
 import { MOCK_DATA } from '../../data'
+import { generateAlphaNumeric } from '../../utils/TestUtils'
 
 const questions = Object.values(MOCK_DATA.questions)
 const item = questions[0]
 
 describe('[Question]', () => {
   describe('[Create a question]', () => {
-    const initialRandomId = (Math.random() * 16).toString()
+    const initialRandomId = generateAlphaNumeric(8)
     const initialTitle = initialRandomId + ' Health cost of plastic?'
     const initialExpectedSlug = initialRandomId + '-health-cost-of-plastic'
     const initialQuestionDescription =
@@ -13,7 +14,7 @@ describe('[Question]', () => {
     const category = 'exhibition'
     const tag1 = 'product'
     const tag2 = 'workshop'
-    const updatedRandomId = (Math.random() * 16).toString()
+    const updatedRandomId = generateAlphaNumeric(8)
     const updatedTitle = updatedRandomId + ' Real health cost of plastic?'
     const updatedExpectedSlug = updatedRandomId + '-real-health-cost-of-plastic'
     const updatedQuestionDescription = `${initialQuestionDescription} and super awesome goggles`
diff --git a/packages/cypress/src/integration/research/write.spec.ts b/packages/cypress/src/integration/research/write.spec.ts
index 6a77cd0bed..978ba11130 100644
--- a/packages/cypress/src/integration/research/write.spec.ts
+++ b/packages/cypress/src/integration/research/write.spec.ts
@@ -2,6 +2,7 @@ import { faker } from '@faker-js/faker'
 
 import { RESEARCH_TITLE_MIN_LENGTH } from '../../../../../src/pages/Research/constants'
 import {
+  generateAlphaNumeric,
   generateNewUserDetails,
   setIsPreciousPlastic,
 } from '../../utils/TestUtils'
@@ -154,7 +155,7 @@ describe('[Research]', () => {
     })
 
     it('[Any PP user]', () => {
-      const randomId = (Math.random() * 16).toString()
+      const randomId = generateAlphaNumeric(8)
       const title = randomId + ' PP plastic stuff'
       const expectSlug = randomId + '-pp-plastic-stuff'
       const description = 'Bespoke research topic'
@@ -255,7 +256,7 @@ describe('[Research]', () => {
 
   describe('[Displays draft updates for Author]', () => {
     it('[By Authenticated]', () => {
-      const randomId = (Math.random() * 16).toString()
+      const randomId = generateAlphaNumeric(8)
       const updateTitle = `${randomId} Create a research update`
       const updateDescription = 'This is the description for the update.'
       const updateVideoUrl = 'http://youtube.com/watch?v=sbcWY7t-JX8'

From 0fc6c41072183c92fcf84e23980bac15a05c85b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Nunes?= <mario.nunes@create.pt>
Date: Thu, 31 Oct 2024 23:56:14 +0000
Subject: [PATCH 10/10] fix: tests

---
 packages/cypress/src/integration/questions/write.spec.ts | 4 ++--
 packages/cypress/src/integration/research/write.spec.ts  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/cypress/src/integration/questions/write.spec.ts b/packages/cypress/src/integration/questions/write.spec.ts
index fc4dd65b45..f5c363c981 100644
--- a/packages/cypress/src/integration/questions/write.spec.ts
+++ b/packages/cypress/src/integration/questions/write.spec.ts
@@ -6,7 +6,7 @@ const item = questions[0]
 
 describe('[Question]', () => {
   describe('[Create a question]', () => {
-    const initialRandomId = generateAlphaNumeric(8)
+    const initialRandomId = generateAlphaNumeric(8).toLowerCase()
     const initialTitle = initialRandomId + ' Health cost of plastic?'
     const initialExpectedSlug = initialRandomId + '-health-cost-of-plastic'
     const initialQuestionDescription =
@@ -14,7 +14,7 @@ describe('[Question]', () => {
     const category = 'exhibition'
     const tag1 = 'product'
     const tag2 = 'workshop'
-    const updatedRandomId = generateAlphaNumeric(8)
+    const updatedRandomId = generateAlphaNumeric(8).toLowerCase()
     const updatedTitle = updatedRandomId + ' Real health cost of plastic?'
     const updatedExpectedSlug = updatedRandomId + '-real-health-cost-of-plastic'
     const updatedQuestionDescription = `${initialQuestionDescription} and super awesome goggles`
diff --git a/packages/cypress/src/integration/research/write.spec.ts b/packages/cypress/src/integration/research/write.spec.ts
index 978ba11130..6d36190635 100644
--- a/packages/cypress/src/integration/research/write.spec.ts
+++ b/packages/cypress/src/integration/research/write.spec.ts
@@ -155,7 +155,7 @@ describe('[Research]', () => {
     })
 
     it('[Any PP user]', () => {
-      const randomId = generateAlphaNumeric(8)
+      const randomId = generateAlphaNumeric(8).toLowerCase()
       const title = randomId + ' PP plastic stuff'
       const expectSlug = randomId + '-pp-plastic-stuff'
       const description = 'Bespoke research topic'
@@ -256,7 +256,7 @@ describe('[Research]', () => {
 
   describe('[Displays draft updates for Author]', () => {
     it('[By Authenticated]', () => {
-      const randomId = generateAlphaNumeric(8)
+      const randomId = generateAlphaNumeric(8).toLowerCase()
       const updateTitle = `${randomId} Create a research update`
       const updateDescription = 'This is the description for the update.'
       const updateVideoUrl = 'http://youtube.com/watch?v=sbcWY7t-JX8'