🤖 Release PR

package.json

@@ -104,7 +104,6 @@
     "react-dropzone": "^10.1.10",
     "react-final-form": "6.5.3",
     "react-final-form-arrays": "^3.1.3",
-    "react-firebase-file-uploader": "2.4.4",
     "react-foco": "^1.3.1",
     "react-ga4": "^1.4.1",
     "react-hamburger-menu": "^1.1.1",

packages/components/src/CommentItem/CommentItem.tsx

@@ -52,7 +52,7 @@ export const CommentItem = (props: CommentItemProps) => {
     if (textRef.current) {
       setTextHeight(textRef.current.scrollHeight)
     }
-  }, [text])
+  }, [textRef])
 
   const showMore = () => {
     setShowMore(!isShowMore)

packages/components/src/CommentList/CommentList.stories.tsx

@@ -1,25 +1,12 @@
 import type { StoryFn, Meta } from '@storybook/react'
 import { CommentList } from './CommentList'
-import { faker } from '@faker-js/faker'
+import { createComments } from './createComments'
 
 export default {
   title: 'Components/CommentList',
   component: CommentList,
 } as Meta<typeof CommentList>
 
-const createComments = (numberOfComments = 2, commentOverloads = {}) =>
-  [...Array(numberOfComments).keys()].slice(0).map(() => ({
-    _created: faker.date.past().toString(),
-    creatorCountry: faker.address.countryCode().toLowerCase(),
-    _creatorId: faker.internet.userName(),
-    _id: faker.database.mongodbObjectId(),
-    creatorName: faker.internet.userName(),
-    isUserVerified: faker.datatype.boolean(),
-    text: faker.lorem.text(),
-    isEditable: faker.datatype.boolean(),
-    ...commentOverloads,
-  }))
-
 export const Default: StoryFn<typeof CommentList> = () => (
   <CommentList
     comments={createComments(2)}

packages/components/src/CommentList/CommentList.test.tsx

@@ -0,0 +1,69 @@
+import { fireEvent } from '@testing-library/react'
+import { vi } from 'vitest'
+import { render } from '../tests/utils'
+import { CommentList } from './CommentList'
+import type { CommentItemProps as Comment } from '../CommentItem/CommentItem'
+import { createComments } from './createComments'
+
+const mockHandleEdit = vi.fn()
+const mockHandleEditRequest = vi.fn()
+const mockHandleDelete = vi.fn()
+const mockTrackEvent = vi.fn()
+
+describe('CommentList', () => {
+  it('renders the correct number of comments initially', () => {
+    const mockComments: Comment[] = createComments(2)
+    const screen = render(
+      <CommentList
+        comments={mockComments}
+        handleEdit={mockHandleEdit}
+        handleEditRequest={mockHandleEditRequest}
+        handleDelete={mockHandleDelete}
+        trackEvent={mockTrackEvent}
+      />,
+    )
+    expect(screen.getAllByTestId('CommentList: item')).toHaveLength(
+      mockComments.length,
+    )
+  })
+
+  it('loads more comments when show more button is clicked', () => {
+    const mockComments: Comment[] = createComments(20)
+    const screen = render(
+      <CommentList
+        comments={mockComments}
+        handleEdit={mockHandleEdit}
+        handleEditRequest={mockHandleEditRequest}
+        handleDelete={mockHandleDelete}
+        trackEvent={mockTrackEvent}
+      />,
+    )
+    fireEvent.click(screen.getByText('show more comments'))
+    expect(screen.getAllByTestId('CommentList: item').length).toBeGreaterThan(5)
+    expect(mockTrackEvent).toHaveBeenCalledWith({
+      category: 'Comments',
+      action: 'Show more',
+      label: undefined, // Replace with expected article title if available
+    })
+  })
+
+  it('highlights the correct comment when highlightedCommentId is provided', () => {
+    const mockComments: Comment[] = createComments(10)
+    const highComm = mockComments[1]
+    const highlightedCommentId = highComm._id // Replace with an actual ID from mockComments
+    highComm.text = 'Highlighted comment text'
+    const screen = render(
+      <CommentList
+        comments={mockComments}
+        highlightedCommentId={highlightedCommentId}
+        handleEdit={mockHandleEdit}
+        handleEditRequest={mockHandleEditRequest}
+        handleDelete={mockHandleDelete}
+        trackEvent={mockTrackEvent}
+      />,
+    )
+    expect(screen.getAllByTestId('CommentList: item')[1]).toHaveStyle(
+      'border: 2px dashed black',
+    )
+  })
+})

packages/components/src/CommentList/CommentList.tsx

@@ -4,7 +4,7 @@ import { Button, CommentItem } from '../'
 import type { CommentItemProps as Comment } from '../CommentItem/CommentItem'
 const MAX_COMMENTS = 5
 
-type CommentListProps = {
+export type CommentListProps = {
   comments: Comment[]
   handleEdit: (_id: string, comment: string) => Promise<void>
   handleEditRequest: () => Promise<void>
@@ -48,7 +48,7 @@ export const CommentList = ({
       setMoreComments(Math.floor(i / MAX_COMMENTS) + 1)
       scrollIntoRelevantComment(highlightedCommentId)
     }
-  }, [highlightedCommentId])
+  }, [highlightedCommentId, comments])
 
   return (
     <Box
@@ -62,6 +62,7 @@ export const CommentList = ({
         comments.slice(0, shownComments).map((comment: Comment) => (
           <Box
             key={comment._id}
+            data-testid="CommentList: item"
             sx={{
               marginBottom: 4,
               border: `${

packages/components/src/CommentList/createComments.tsx

@@ -0,0 +1,18 @@
+import type { CommentItemProps as Comment } from '../CommentItem/CommentItem'
+import { faker } from '@faker-js/faker'
+
+export const createComments = (
+  numberOfComments = 2,
+  commentOverloads = {},
+): Comment[] =>
+  [...Array(numberOfComments).keys()].slice(0).map(() => ({
+    _created: faker.date.past().toString(),
+    creatorCountry: faker.address.countryCode().toLowerCase(),
+    _creatorId: faker.internet.userName(),
+    _id: faker.database.mongodbObjectId(),
+    creatorName: faker.internet.userName(),
+    isUserVerified: faker.datatype.boolean(),
+    text: faker.lorem.text(),
+    isEditable: faker.datatype.boolean(),
+    ...commentOverloads,
+  }))

packages/components/src/ImageGallery/ImageGallery.tsx

@@ -63,11 +63,11 @@ export const ImageGallery = (props: ImageGalleryProps) => {
 
   useEffect(() => {
     const images = (props.images || []).filter((img) => img !== null)
-    setState({
+    setState((state) => ({
       ...state,
       activeImageIndex: 0,
       images: images,
-    })
+    }))
 
     // Initializes the Photoswipe lightbox to use the provided images
     lightbox.current = new PhotoSwipeLightbox({
@@ -103,7 +103,7 @@ export const ImageGallery = (props: ImageGalleryProps) => {
       lightbox.current?.destroy()
       lightbox.current = undefined
     }
-  }, [props.images])
+  }, [props.images, props.photoSwipeOptions])
 
   const setActive = (imageIndex: number) => {
     setState({

packages/components/src/NotificationList/NotificationList.tsx

@@ -31,7 +31,7 @@ export const NotificationList = (props: Props) => {
   const sx = props.sx || {}
   useEffect(() => {
     notifications.length && markAllNotified && markAllNotified()
-  }, [])
+  }, [notifications, markAllNotified])
 
   return (
     <Card sx={{ padding: 2, maxHeight: 310, overflowY: 'auto', ...sx }}>

packages/components/src/OsmGeocoding/OsmGeocoding.tsx

@@ -74,6 +74,7 @@ export const OsmGeocoding = ({
   }
 
   const showResultsListing = !!results.length && showResults && !showLoader
+
   const dcb = useDebouncedCallback(
     (search: string) => getGeocoding(search),
     debounceMs,
@@ -83,7 +84,7 @@ export const OsmGeocoding = ({
     if (queryLocationService) {
       dcb(searchValue)
     }
-  }, [searchValue, queryLocationService])
+  }, [searchValue, queryLocationService, dcb])
 
   return (
     <div

shared/models/db.ts

@@ -23,6 +23,7 @@ export const generateDBEndpoints = (DB_PREFIX = '') => ({
   questions: `${DB_PREFIX}questions_rev20230926`,
   questionCategories: `${DB_PREFIX}question_categories_rev20231130`,
   user_integrations: `${DB_PREFIX}user_integrations`,
+  discussions: `${DB_PREFIX}discussions_rev20231022`,
 })
 
 /**

src/common/hooks/userStats.ts → src/common/hooks/useMemberStatistics.ts

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
 import { useCommonStores } from '../../index'
 import type { AggregationsStore } from 'src/stores/Aggregations/aggregations.store'
 
-export const userStats = (userId: string) => {
+export const useMemberStatistics = (userId: string) => {
   const { aggregationsStore } = useCommonStores().stores
   const [totalUseful, setTotalUseful] = useState<number>(0)
   const [verified, setVerified] = useState<boolean>(false)

src/models/discussion.models.tsx

@@ -0,0 +1,12 @@
+import type { IComment } from './comment.model'
+
+export type IDiscussionComment = IComment & {
+  parentCommentId: string | null
+}
+
+export type IDiscussion = {
+  _id: string
+  sourceId: string
+  sourceType: 'question'
+  comments: IDiscussionComment[]
+}

src/models/index.ts

@@ -14,6 +14,7 @@ export * from './user.models'
 export * from './userPreciousPlastic.models'
 export * from './notifications.models'
 export * from './question.models'
+export * from './discussion.models'
 export interface UserComment extends IComment {
   isEditable: boolean
 }

src/pages/Howto/Content/Common/Howto.form.test.tsx

@@ -51,7 +51,7 @@ describe('Howto form', () => {
       // Act
       let wrapper
       await act(async () => {
-        wrapper = await getWrapper(formValues, 'edit', {})
+        wrapper = await Wrapper(formValues, 'edit', {})
       })
 
       // Assert
@@ -66,7 +66,7 @@ describe('Howto form', () => {
       // Act
       let wrapper
       await act(async () => {
-        wrapper = await getWrapper(formValues, 'edit', {})
+        wrapper = await Wrapper(formValues, 'edit', {})
       })
 
       // Assert
@@ -88,7 +88,7 @@ describe('Howto form', () => {
       // Act
       let wrapper
       await act(async () => {
-        wrapper = await getWrapper(formValues, 'edit', {})
+        wrapper = await Wrapper(formValues, 'edit', {})
       })
 
       // Assert
@@ -111,7 +111,7 @@ describe('Howto form', () => {
       // Act
       let wrapper
       await act(async () => {
-        wrapper = await getWrapper(formValues, 'edit', {})
+        wrapper = await Wrapper(formValues, 'edit', {})
       })
 
       // Assert
@@ -131,7 +131,7 @@ describe('Howto form', () => {
       // Act
       let wrapper
       await act(async () => {
-        wrapper = await getWrapper(formValues, 'edit', {})
+        wrapper = await Wrapper(formValues, 'edit', {})
 
         // clear files
         const reuploadFilesButton = wrapper.getByTestId('re-upload-files')
@@ -157,7 +157,7 @@ describe('Howto form', () => {
   })
 })
 
-const getWrapper = async (formValues, parentType, navProps) => {
+const Wrapper = async (formValues, parentType, navProps) => {
   return render(
     <Provider {...useCommonStores().stores}>
       <ThemeProvider theme={Theme}>

src/pages/Howto/Content/Common/Howto.form.tsx

@@ -35,7 +35,6 @@ import {
 } from '.'
 
 import type { IHowtoFormInput } from 'src/models/howto.models'
-import type { UploadedFile } from 'src/pages/common/UploadedFile/UploadedFile'
 import type { HowtoStore } from 'src/stores/Howto/howto.store'
 export type ParentType = 'create' | 'edit'
 
@@ -62,7 +61,6 @@ const FormContainer = styled.form`
 @inject('howtoStore')
 @observer
 export class HowtoForm extends React.PureComponent<IProps, IState> {
-  uploadRefs: { [key: string]: UploadedFile | null } = {}
   formContainerRef = React.createRef<HTMLElement>()
   public checkFilesValid = (formValues: IHowtoFormInput) => {
     if (

src/pages/Maps/Maps.test.tsx

@@ -71,7 +71,7 @@ describe('Maps', () => {
       },
     })
 
-    await getWrapper()
+    await Wrapper()
 
     expect(global.navigator.geolocation.getCurrentPosition).toBeCalled()
   })
@@ -99,7 +99,7 @@ describe('Maps', () => {
     let wrapper
 
     await act(async () => {
-      wrapper = await getWrapper('/map#abc')
+      wrapper = await Wrapper('/map#abc')
     })
 
     await waitFor(async () => {
@@ -109,7 +109,7 @@ describe('Maps', () => {
   })
 })
 
-const getWrapper = async (path = '/map') => {
+const Wrapper = async (path = '/map') => {
   const router = createMemoryRouter(
     createRoutesFromElements(<Route path="/map" element={<Maps />} />),
     {

src/pages/PageList.tsx

@@ -29,12 +29,6 @@ const SignUpMessagePage = lazy(
   () =>
     import(/* webpackChunkName: "SignUpMessage" */ './SignUp/SignUpMessage'),
 )
-const ResendSignUpMessagePage = lazy(
-  () =>
-    import(
-      /* webpackChunkName: "ResendSignUpMessage" */ './SignUp/ResendSignUpMessage'
-    ),
-)
 const SignUpPage = lazy(
   () => import(/* webpackChunkName: "SignUp" */ './SignUp/SignUp'),
 )
@@ -147,15 +141,6 @@ const signupmessage = {
   description: '',
 }
 
-const resendsignupmessage = {
-  moduleName: MODULE.USER,
-  path: '/resend-sign-up-message',
-  exact: true,
-  component: <ResendSignUpMessagePage />,
-  title: 'Resend Sign Up Message',
-  description: '',
-}
-
 const privacyPolicy = {
   moduleName: MODULE.CORE,
   path: '/privacy',
@@ -203,7 +188,6 @@ export const NO_HEADER_PAGES: IPageMeta[] = [
   user,
   signup,
   signupmessage,
-  resendsignupmessage,
   signin,
   ResearchModule, // CC 2021-06-24 - Temporary - make research module accessible to all in production but hide from nav
   unsubscribe,