FW-2923, FW-5063 join

src/assets/parentLanguageColors.js → src/assets/languageColors.js

@@ -1,4 +1,4 @@
-export const parentLanguageColors = {
+export const languageColors = {
   dtd: 'rgb(255,112,255)',
   hei: 'rgb(255,128,255)',
   kwk: 'rgb(255,176,255)',

src/common/constants/index.js

@@ -1,4 +1,5 @@
 export * from './docTypes'
+export * from './join'
 export * from './media'
 export * from './misc'
 export * from './notificationTypes'

src/common/constants/join.js

@@ -0,0 +1,11 @@
+// Join Request Reason Keys for API
+export const OTHER = 'OTHER'
+export const LANGUAGE_LEARNER = 'LANGUAGE_LEARNER'
+export const LANGUAGE_TEACHER = 'LANGUAGE_TEACHER'
+export const FLUENT_SPEAKER = 'FLUENT_SPEAKER'
+export const LANGUAGE_INTEREST = 'LANGUAGE_INTEREST'
+export const HERITAGE = 'HERITAGE'
+export const COMMUNITY_MEMBER = 'COMMUNITY_MEMBER'
+export const COMMUNITY_STAFF = 'COMMUNITY_STAFF'
+export const RECONCILIATION = 'RECONCILIATION'
+export const FV_TEAM = 'FV_TEAM'

src/common/constants/paths.js

@@ -4,6 +4,7 @@ export const CATEGORIES = 'categories'
 export const CHARACTERS = 'characters'
 export const CONTACT_US = 'contact-us'
 export const DICTIONARY = 'dictionary'
+export const JOIN_REQUESTS = 'join-requests'
 export const PAGES = 'pages'
 export const PARTS_OF_SPEECH = 'parts-of-speech'
 export const PEOPLE = 'people'

src/common/dataAdaptors/siteAdaptors.js

@@ -16,7 +16,7 @@ import {
 
 export function languagesListAdaptor({ languagesData }) {
   return languagesData?.map((language) => ({
-    language: language?.language,
+    title: language?.language,
     languageCode: language?.languageCode,
     sites: sitesListAdaptor({ sitesData: language?.sites }),
   }))

src/common/dataHooks/useJoinRequests.js

@@ -0,0 +1,151 @@
+import {
+  useInfiniteQuery,
+  useMutation,
+  useQueryClient,
+} from '@tanstack/react-query'
+import { useParams } from 'react-router-dom'
+
+// FPCC
+import api from 'services/api'
+import { JOIN_REQUESTS, MEMBER } from 'common/constants'
+import useMutationWithNotification from 'common/dataHooks/useMutationWithNotification'
+
+export function useJoinRequests() {
+  const { sitename } = useParams()
+
+  const allJoinRequestsResponse = useInfiniteQuery(
+    [JOIN_REQUESTS, sitename],
+    ({ pageParam = 1 }) =>
+      api.joinRequests.getJoinRequests({
+        sitename,
+        pageParam,
+      }),
+    {
+      // The query will not execute until the sitename exists
+      enabled: !!sitename,
+    },
+  )
+
+  return allJoinRequestsResponse
+}
+
+export function useJoinRequestCreate(options = {}) {
+  const queryClient = useQueryClient()
+
+  const createJoinRequest = async (formData) => {
+    const { sitename, reasons, message } = formData
+
+    const properties = {
+      reasons,
+      reason_note: message,
+    }
+    return api.joinRequests.create({
+      sitename,
+      properties,
+    })
+  }
+  const _options = {
+    ...options,
+    mutationFn: createJoinRequest,
+    onSuccess: (response) => {
+      queryClient.invalidateQueries({
+        queryKey: [JOIN_REQUESTS, response?.site?.slug],
+      })
+    },
+  }
+
+  const mutation = useMutation(_options)
+
+  return mutation
+}
+
+// APPROVE
+export function useJoinRequestApprove() {
+  const { sitename } = useParams()
+
+  const approveJoinRequest = async (formData) => {
+    const properties = {
+      role: formData?.role || MEMBER,
+    }
+    return api.joinRequests.approve({
+      id: formData?.id,
+      sitename,
+      properties,
+    })
+  }
+
+  const mutation = useMutationWithNotification({
+    mutationFn: approveJoinRequest,
+    queryKeyToInvalidate: [JOIN_REQUESTS, sitename],
+    actionWord: 'approved',
+    type: 'join request',
+  })
+
+  const onSubmit = (formData) => {
+    mutation.mutate(formData)
+  }
+  return { ...mutation, onSubmit }
+}
+
+// IGNORE
+export function useJoinRequestIgnore() {
+  const { sitename } = useParams()
+  const ignoreJoinRequest = async (id) =>
+    api.joinRequests.ignore({
+      id,
+      sitename,
+    })
+
+  const mutation = useMutationWithNotification({
+    mutationFn: ignoreJoinRequest,
+    queryKeyToInvalidate: [JOIN_REQUESTS, sitename],
+    actionWord: 'ignored',
+    type: 'join request',
+  })
+  const onSubmit = (id) => {
+    mutation.mutate(id)
+  }
+  return { ...mutation, onSubmit }
+}
+
+// REJECT
+export function useJoinRequestReject() {
+  const { sitename } = useParams()
+  const rejectJoinRequest = async (id) =>
+    api.joinRequests.reject({
+      id,
+      sitename,
+    })
+
+  const mutation = useMutationWithNotification({
+    mutationFn: rejectJoinRequest,
+    queryKeyToInvalidate: [JOIN_REQUESTS, sitename],
+    actionWord: 'rejected',
+    type: 'join request',
+  })
+  const onSubmit = (id) => {
+    mutation.mutate(id)
+  }
+  return { ...mutation, onSubmit }
+}
+
+// DELETE
+export function useJoinRequestDelete() {
+  const { sitename } = useParams()
+  const deleteJoinRequest = async (id) =>
+    api.joinRequests.delete({
+      id,
+      sitename,
+    })
+
+  const mutation = useMutationWithNotification({
+    mutationFn: deleteJoinRequest,
+    queryKeyToInvalidate: [JOIN_REQUESTS, sitename],
+    actionWord: 'deleted',
+    type: 'join request',
+  })
+  const onSubmit = (id) => {
+    mutation.mutate(id)
+  }
+  return { ...mutation, onSubmit }
+}

src/common/dataHooks/useMutationWithNotification.js

@@ -1,4 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from 'react-router-dom'
 
 // FPCC
 import { ERROR, SUCCESS } from 'common/constants'
@@ -15,6 +16,7 @@ export default function useMutationWithNotification({
 }) {
   const queryClient = useQueryClient()
   const { setNotification } = useNotification()
+  const navigate = useNavigate()
 
   const mutation = useMutation({
     mutationFn,
@@ -28,7 +30,7 @@ export default function useMutationWithNotification({
       }
       if (redirectTo) {
         setTimeout(() => {
-          window.location.href = redirectTo
+          navigate(redirectTo)
         }, 1000)
       }
     },

src/common/utils/membershipHelpers.js

@@ -0,0 +1,7 @@
+// FPCC
+import { atLeastMember } from 'common/constants/roles'
+
+export const isMember = ({ user, sitename }) => {
+  const userSiteRole = user?.roles?.[sitename] || ''
+  return userSiteRole.match(atLeastMember)
+}

src/components/AudioButton/AudioButton.js

@@ -8,23 +8,24 @@ import getIcon from 'common/utils/getIcon'
 function AudioButton({ audioArray, iconStyling, hoverTooltip }) {
   const { setCurrentAudio } = useAudiobar()
 
-  const audioButtons = audioArray?.map((audioObject) => (
-    <button
-      type="button"
-      key={audioObject?.id}
-      className="print:hidden relative group"
-      onClick={() => setCurrentAudio(audioObject)}
-    >
-      <div className="sr-only">Play audio</div>
-      {getIcon('Audio', iconStyling)}
-      {hoverTooltip ? (
-        <div className="z-10 hidden group-hover:inline-flex absolute -bottom-8 -right-1 w-auto p-1 text-sm bg-fv-charcoal-light text-white text-center rounded-lg whitespace-nowrap">
-          Play audio
-        </div>
-      ) : null}
-    </button>
-  ))
-  return audioArray?.length > 0 ? audioButtons : ''
+  return audioArray?.map((audioObject) =>
+    audioObject?.id ? (
+      <button
+        type="button"
+        key={audioObject?.id}
+        className="print:hidden relative group"
+        onClick={() => setCurrentAudio(audioObject)}
+      >
+        <div className="sr-only">Play audio</div>
+        {getIcon('Audio', iconStyling)}
+        {hoverTooltip ? (
+          <div className="z-10 hidden group-hover:inline-flex absolute -bottom-8 -right-1 w-auto p-1 text-sm bg-fv-charcoal-light text-white text-center rounded-lg whitespace-nowrap">
+            Play audio
+          </div>
+        ) : null}
+      </button>
+    ) : null,
+  )
 }
 // PROPTYPES
 const { array, string, bool } = PropTypes

src/components/ConfirmationDialog/ConfirmationDialogPresentation.js

@@ -13,7 +13,7 @@ function ConfirmationDialogPresentation({
   return (
     <Modal.Presentation isOpen={isOpen} closeHandler={closeHandler}>
       <div
-        id="RemoveWidgetModalContent"
+        data-testid="ConfirmationDialogPresentation"
         className="inline-block align-bottom space-y-5 bg-white rounded-lg p-6 lg:p-8 overflow-hidden shadow-xl transform transition-all sm:align-middle sm:max-w-sm sm:w-full"
       >
         <div className="text-center space-y-2">

src/components/DeleteButton/DeleteButtonPresentation.js

@@ -20,13 +20,12 @@ function DeleteButtonPresentation({ deleteHandler, label, message, styling }) {
         <span>{label}</span>
       </button>
 
-      {/* Remove Modal */}
       <Modal.Presentation
         isOpen={deleteModalOpen}
         closeHandler={() => setDeleteModalOpen(false)}
       >
         <div
-          id="RemoveWidgetModalContent"
+          data-testid="DeleteModal"
           className="inline-block align-bottom space-y-5 bg-white rounded-lg p-6 lg:p-8 overflow-hidden shadow-xl transform transition-all sm:align-middle sm:max-w-sm sm:w-full"
         >
           <div className="text-center space-y-2">

src/components/DictionaryDetail/DictionaryDetailContainer.js

@@ -6,9 +6,9 @@ import DictionaryDetailPresentationDrawer from 'components/DictionaryDetail/Dict
 import DictionaryDetailPresentationKids from 'components/DictionaryDetail/DictionaryDetailPresentationKids'
 import Loading from 'components/Loading'
 
-function DictionaryDetailContainer({ docId, docType, isDrawer, kids }) {
+function DictionaryDetailContainer({ id, isDrawer, kids }) {
   const { actions, entry, isLoading, moreActions, sitename, backHandler } =
-    DictionaryDetailData({ docId, docType })
+    DictionaryDetailData({ id })
   return (
     <Loading.Container isLoading={isLoading}>
       {isDrawer && (
@@ -40,8 +40,7 @@ function DictionaryDetailContainer({ docId, docType, isDrawer, kids }) {
 // PROPTYPES
 const { bool, string } = PropTypes
 DictionaryDetailContainer.propTypes = {
-  docId: string,
-  docType: string.isRequired,
+  id: string,
   isDrawer: bool,
   kids: bool,
 }

src/components/DictionaryDetail/DictionaryDetailData.js

@@ -4,11 +4,11 @@ import { useNavigate, useParams } from 'react-router-dom'
 // FPCC
 import { useDictionaryEntry } from 'common/dataHooks/useDictionaryEntry'
 
-function DictionaryDetailData({ docId }) {
-  const { id, sitename } = useParams()
+function DictionaryDetailData({ id }) {
+  const { id: paramsId, sitename } = useParams()
   const navigate = useNavigate()
 
-  const idToSend = docId || id
+  const idToSend = id || paramsId
 
   const backHandler = () => navigate(-1)
 

src/components/EntryDetail/EntryDetailContainer.js

@@ -11,13 +11,7 @@ function EntryDetailContainer({ id, type, isDrawer }) {
   switch (type) {
     case TYPE_PHRASE:
     case TYPE_WORD:
-      return (
-        <DictionaryDetail.Container
-          docId={id}
-          docType={type}
-          isDrawer={isDrawer}
-        />
-      )
+      return <DictionaryDetail.Container id={id} isDrawer={isDrawer} />
     case TYPE_SONG:
       return <Song.Container docId={id} isDrawer={isDrawer} />
     case TYPE_STORY: