Merge pull request #1237 from topcoder-platform/feat/review-edit-integration

Review Edit Integration

Author: jmgasper

src/apps/accounts/src/lib/userflow-survey.ts

@@ -1,9 +1,7 @@
-import { TcUniNavFn } from 'universal-navigation'
+import { getTcUniNav } from '~/apps/platform/src/utils'
 
 import { CES_SURVEY_ID } from '../config'
 
-declare let tcUniNav: TcUniNavFn
-
 export function triggerSurvey(): void {
-    tcUniNav('triggerFlow', CES_SURVEY_ID, {})
+    getTcUniNav()?.('triggerFlow', CES_SURVEY_ID, {})
 }

src/apps/platform/src/components/app-footer/AppFooter.tsx

@@ -1,7 +1,6 @@
 import { FC, MutableRefObject, useEffect, useRef } from 'react'
-import type { TcUniNavFn } from 'universal-navigation'
 
-declare let tcUniNav: TcUniNavFn
+import { getTcUniNav } from '../../utils'
 
 const APP_FOOTER_EL_ID: string = 'footer-nav-el'
 
@@ -22,7 +21,7 @@ const AppFooter: FC<{}> = () => {
             return
         }
 
-        tcUniNav(
+        getTcUniNav()?.(
             'init',
             APP_FOOTER_EL_ID,
             {

src/apps/platform/src/components/app-header/AppHeader.tsx

@@ -11,7 +11,7 @@ import {
     useState,
 } from 'react'
 import { NavigateFunction, useNavigate } from 'react-router-dom'
-import type { AuthUser as NavAuthUser, TcUniNavFn } from 'universal-navigation'
+import type { AuthUser as NavAuthUser } from 'universal-navigation'
 import classNames from 'classnames'
 
 import { EnvironmentConfig, PageSubheaderPortalId } from '~/config'
@@ -25,9 +25,10 @@ import {
 } from '~/libs/core'
 import { ConfigContextValue, useConfigContext } from '~/libs/shared'
 
+import { getTcUniNav } from '../../utils'
+
 import UniNavSnippet from './universal-nav-snippet'
 
-declare let tcUniNav: TcUniNavFn
 UniNavSnippet(EnvironmentConfig.URLS.UNIVERSAL_NAV)
 
 interface NavigationRequest {
@@ -86,7 +87,7 @@ const AppHeader: FC<{}> = () => {
 
         headerInit.current = true
 
-        tcUniNav(
+        getTcUniNav()?.(
             'init',
             navElementId,
             {
@@ -116,7 +117,7 @@ const AppHeader: FC<{}> = () => {
     // update uni-nav's tool details
     useEffect(() => {
 
-        tcUniNav(
+        getTcUniNav()?.(
             'update',
             navElementId,
             {
@@ -139,7 +140,7 @@ const AppHeader: FC<{}> = () => {
             return
         }
 
-        tcUniNav(
+        getTcUniNav()?.(
             'update',
             navElementId,
             {

src/apps/platform/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './other'

src/apps/platform/src/utils/other.ts

@@ -0,0 +1,15 @@
+import { TcUniNavFn } from 'universal-navigation'
+
+declare let tcUniNav: TcUniNavFn
+
+/**
+ * Get tcUniNav
+ * @returns tcUniNav
+ */
+export function getTcUniNav(): TcUniNavFn | undefined {
+    if (typeof tcUniNav === 'undefined') {
+        return undefined
+    }
+
+    return tcUniNav
+}

src/apps/profiles/src/lib/userflow-survey.ts

@@ -1,9 +1,7 @@
-import { TcUniNavFn } from 'universal-navigation'
+import { getTcUniNav } from '~/apps/platform/src/utils'
 
 import { CES_SURVEY_ID } from '../config'
 
-declare let tcUniNav: TcUniNavFn
-
 export function triggerSurvey(): void {
-    tcUniNav('triggerFlow', CES_SURVEY_ID, {})
+    getTcUniNav()?.('triggerFlow', CES_SURVEY_ID, {})
 }

src/apps/review/src/config/index.config.ts

@@ -76,3 +76,5 @@ export const WINNERS = 'Winners'
 export const TAB = 'tab'
 export const FINISHTAB = [WINNERS]
 export const WITHOUT_APPEAL = [DESIGN, FIRST2FINISH]
+
+export const NO_RESOURCE_ID = 'noResource'

src/apps/review/src/lib/components/Appeal/Appeal.tsx

@@ -1,35 +1,51 @@
 /**
  * AppealComment.
  */
-import { FC, useCallback, useState } from 'react'
+import { FC, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import {
     Controller,
     ControllerRenderProps,
     useForm,
     UseFormReturn,
 } from 'react-hook-form'
-import _, { bind, includes } from 'lodash'
+import { get } from 'lodash'
 import classNames from 'classnames'
 
 import { yupResolver } from '@hookform/resolvers/yup'
 
 import { MarkdownReview } from '../MarkdownReview'
 import { FieldMarkdownEditor } from '../FieldMarkdownEditor'
-import { FormAppealResponse } from '../../models'
-import { formAppealResponseSchema } from '../../utils'
-import { ADMIN, COPILOT, FINISHTAB, ITERATIVE_REVIEW, TAB } from '../../../config/index.config'
+import { AppealInfo, ChallengeDetailContextModel, FormAppealResponse } from '../../models'
+import { formAppealResponseSchema, isAppealsPhase } from '../../utils'
+import { ReviewItemComment } from '../../models/ReviewItemComment.model'
+import { ChallengeDetailContext } from '../../contexts'
 
 import styles from './Appeal.module.scss'
 
 interface Props {
     className?: string
-    role?: string
+    appealInfo?: AppealInfo
+    commentItem: ReviewItemComment
+    isSavingAppeal: boolean
+    addAppeal: (
+        content: string,
+        commentItem: ReviewItemComment,
+        success: () => void,
+    ) => void
+    doDeleteAppeal: (
+        appealInfo: AppealInfo | undefined,
+        success: () => void,
+    ) => void
 }
 
 export const AppealComment: FC<Props> = (props: Props) => {
     const [appealResponse, setAppealResponse] = useState('')
     const [showResponseForm, setShowResponseForm] = useState(false)
-    const [showAppealResponse, setShowAppealResponse] = useState(false)
+
+    const { challengeInfo }: ChallengeDetailContextModel = useContext(
+        ChallengeDetailContext,
+    )
+    const canAddAppeal = useMemo(() => isAppealsPhase(challengeInfo), [challengeInfo])
 
     const {
         handleSubmit,
@@ -44,29 +60,54 @@ export const AppealComment: FC<Props> = (props: Props) => {
     })
 
     const onSubmit = useCallback((data: FormAppealResponse) => {
-        setAppealResponse(data.response)
-        setShowResponseForm(false)
-        setShowAppealResponse(true)
-    }, [])
+        props.addAppeal(data.response, props.commentItem, () => {
+            setAppealResponse(data.response)
+            setShowResponseForm(false)
+        })
+    }, [props.commentItem])
 
-    if (includes(FINISHTAB, sessionStorage.getItem(TAB))) {
-        return <></>
-    }
+    useEffect(() => {
+        if (props.appealInfo) {
+            setAppealResponse(props.appealInfo.content)
+        }
+    }, [props.appealInfo])
 
     return (
         <div className={classNames(styles.container, props.className)}>
-            {showAppealResponse && (
+            {appealResponse && !showResponseForm && (
                 <div className={styles.blockAppealComment}>
                     <span className={styles.textTitle}>Appeal Comment</span>
                     <MarkdownReview value={appealResponse} />
+                    {canAddAppeal && (
+                        <div className={styles.blockBtns}>
+                            <button
+                                onClick={function onClick() {
+                                    setShowResponseForm(true)
+                                }}
+                                className='filledButton'
+                                type='button'
+                                disabled={props.isSavingAppeal}
+                            >
+                                Edit Appeal
+                            </button>
+                            <button
+                                onClick={function onClick() {
+                                    props.doDeleteAppeal(props.appealInfo, () => {
+                                        setAppealResponse('')
+                                    })
+                                }}
+                                type='button'
+                                className='cancelButton'
+                                disabled={props.isSavingAppeal}
+                            >
+                                Delete
+                            </button>
+                        </div>
+                    )}
                 </div>
             )}
 
-            {!showResponseForm
-                && !showAppealResponse
-                && !includes(FINISHTAB, sessionStorage.getItem(TAB))
-                && !includes(sessionStorage.getItem(TAB), ITERATIVE_REVIEW)
-                && !includes([COPILOT, ADMIN], props.role) && (
+            {!appealResponse && !showResponseForm && canAddAppeal && (
                 <button
                     type='button'
                     className='borderButton'
@@ -95,23 +136,31 @@ export const AppealComment: FC<Props> = (props: Props) => {
                         }) {
                             return (
                                 <FieldMarkdownEditor
+                                    initialValue={appealResponse}
                                     className={styles.markdownEditor}
                                     onChange={controlProps.field.onChange}
                                     showBorder
                                     onBlur={controlProps.field.onBlur}
-                                    error={_.get(errors, 'response.message')}
+                                    error={get(errors, 'response.message')}
+                                    disabled={props.isSavingAppeal}
                                 />
                             )
                         }}
                     />
                     <div className={styles.blockBtns}>
-                        <button className='filledButton' type='submit'>
+                        <button
+                            disabled={props.isSavingAppeal}
+                            className='filledButton'
+                            type='submit'
+                        >
                             Submit Appeal
                         </button>
                         <button
                             type='button'
                             className='borderButton'
-                            onClick={bind(setShowResponseForm, undefined, false)}
+                            onClick={function onClick() {
+                                setShowResponseForm(false)
+                            }}
                         >
                             Cancel
                         </button>

src/apps/review/src/lib/components/AppealComment/AppealComment.module.scss

@@ -73,3 +73,10 @@
         line-height: 20px;
     }
 }
+
+.blockReaponseAppealHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}