Feat/bud 80

src/components/Base/RoutineFormActionsProvider/routine-form-actions-provider.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, ReactElement, useContext } from 'react'
 import { useRecoilState } from 'recoil'
 
-import { useRoutineFormAnswers } from 'src/components/Routine/hooks/setRoutineFormAnswers/set-routine-form-answers'
+import { useRoutineFormAnswers } from 'src/components/Routine/hooks/new/use-routine-form-answer'
 import { currentRoutinePropertiesAtom } from 'src/state/recoil/routine/current-routine-properties'
 import { retrospectiveRoutineIndexQuestionAtom } from 'src/state/recoil/routine/retrospective-showed-question'
 

src/components/Page/Team/Highlights/highlights.tsx

@@ -49,9 +49,7 @@ export const Highlights = ({ teamId, isLoading }: HighlightsProperties) => {
   useEffect(() => {
     const getRoutinesHighlights = async (id: Team['id']) => {
       const { routines } = await servicesPromise
-      const { data: flags } = await routines.get<HighlightCard[] | undefined>(
-        `/answers/flags/${id}`,
-      )
+      const flags = await routines.getFlags(id)
       setRoutineFlags(flags)
     }
 

src/components/Page/Team/team.tsx

@@ -81,6 +81,10 @@ const ExploreTeamPage = ({ teamId }: ExploreTeamPageProperties) => {
     if (tabs.has(routerTab) && routerTab !== activeTab) {
       setActiveTab(routerTab)
     }
+
+    if (!routerTab) {
+      setActiveTab('okrs')
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router])
 

src/components/Routine/Drawer/Base/TeamRedirectPage/team-redirect-page.tsx

@@ -1,4 +1,5 @@
 import { Box, Button, Flex, Text } from '@chakra-ui/react'
+import { useQueryClient } from '@tanstack/react-query'
 import React from 'react'
 import { useIntl } from 'react-intl'
 import { useRecoilState, useRecoilValue } from 'recoil'
@@ -18,6 +19,12 @@ const TeamRedirectPage = () => {
   const userTeams = useRecoilValue(routineAnswersReturnedData)
   const intl = useIntl()
   const routineTabName = useRoutineTab()
+  const queryClient = useQueryClient()
+
+  const redirectToTeam = (teamId: string) => {
+    setIsOpen(false)
+    queryClient.invalidateQueries({ queryKey: [`routines:getAnswer:${teamId}`] })
+  }
 
   return (
     <RoutineDrawer isOpen={isOpen} formSize={1} onClose={() => setIsOpen(false)}>
@@ -49,7 +56,7 @@ const TeamRedirectPage = () => {
                     desc={intl.formatMessage(messages.title)}
                   />
                 }
-                onClick={() => setIsOpen(false)}
+                onClick={() => redirectToTeam(team.id)}
               >
                 {team.name}
               </Button>

src/components/Routine/Retrospective/wrapper.tsx

@@ -8,7 +8,7 @@ import { retrospectiveRoutineIndexQuestionAtom } from 'src/state/recoil/routine/
 import RoutineDrawer from '../Drawer/Base/drawer'
 import RoutineFormQuestion from '../Drawer/Questions'
 import { FormQuestion } from '../Drawer/Questions/types'
-import { useRoutineFormQuestions } from '../hooks/getRoutineForm/get-routine-form'
+import { useRoutineFormQuestions } from '../hooks/new/use-get-routine-form'
 
 const updateDependQuestions = (questionId: string, value: string) => (question: FormQuestion) => {
   if (question.conditional?.dependsOn !== questionId) {

src/components/Routine/RetrospectiveTab/Answers/AnswerContent/AnswerCards/LongTextAnswerCard/long-text.tsx

@@ -2,10 +2,8 @@ import { Box, Skeleton, Text } from '@chakra-ui/react'
 import styled from '@emotion/styled'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useIntl } from 'react-intl'
-import { useRecoilValue } from 'recoil'
 
 import { StarIcon, TargetIcon, WriteIcon } from 'src/components/Icon'
-import { answerDetailedAtom } from 'src/state/recoil/routine/answer'
 
 import { routineAnswer } from '../../../types'
 import { themeColor } from '../../../utils/contants'
@@ -24,44 +22,41 @@ const StyledListItem = styled.span`
 `
 
 const LongTextAnswerCard = ({ answerData, isLoaded }: LongTextAnswerCardProperties) => {
-  const reference = useRef<HTMLDivElement>(null)
-  const [width, setWidth] = useState(0)
-  const answerDetailed = useRecoilValue(answerDetailedAtom)
   const intl = useIntl()
 
-  const isDependentThat = answerDetailed.answers.find(
-    (answer) => answer.id === answerData.conditional?.dependsOn,
-  )
+  const reference = useRef<HTMLDivElement>(null)
+
+  const [width, setWidth] = useState(0)
 
   useEffect(() => {
     if (reference.current) setWidth(reference.current?.offsetWidth)
-  }, [answerDetailed])
+  }, [])
 
   const answerValueThatDepends = useMemo(() => {
-    if (isDependentThat?.values) {
-      if (isDependentThat.type === 'value_range') {
-        const lastValue = isDependentThat.values[isDependentThat.values.length - 1]
+    if (answerData.dependsThat?.values) {
+      if (answerData.dependsThat?.type === 'value_range') {
+        const lastValue = answerData.dependsThat?.values[answerData.dependsThat?.values.length - 1]
         return Number(lastValue?.value) <= 3
       }
 
-      if (isDependentThat.type === 'road_block') {
-        const lastValue = isDependentThat.values[isDependentThat.values.length - 2]
+      if (answerData.dependsThat?.type === 'road_block') {
+        const lastValue = answerData.dependsThat?.values[answerData.dependsThat?.values.length - 2]
         return lastValue?.value === 'y'
       }
     }
-  }, [isDependentThat])
+  }, [answerData.dependsThat])
 
   const justifyContent = useMemo(() => {
     if (answerValueThatDepends === false) return 'flex-start'
-    if (answerValueThatDepends === true || isDependentThat?.type === 'emoji_scale')
+    if (answerValueThatDepends === true || answerData.dependsThat?.type === 'emoji_scale')
       return 'flex-end'
-    if (isDependentThat?.type === 'emoji_scale' && width > 780) return 'flex-end'
-  }, [answerValueThatDepends, isDependentThat?.type, width])
+    if (answerData.dependsThat?.type === 'emoji_scale' && width > 780) return 'flex-end'
+  }, [answerValueThatDepends, answerData.dependsThat?.type, width])
 
   const paddingRight = useMemo(() => {
-    if (isDependentThat?.type === 'emoji_scale' && width > 756) return 0
+    if (answerData.dependsThat?.type === 'emoji_scale' && width > 756) return 0
     return 0
-  }, [isDependentThat?.type, width])
+  }, [answerData.dependsThat?.type, width])
 
   const icons: Record<string, JSX.Element> = {
     '95b84e67-d5b6-4fcf-938a-b4c9897596cb': (
@@ -75,7 +70,7 @@ const LongTextAnswerCard = ({ answerData, isLoaded }: LongTextAnswerCardProperti
     ),
   }
 
-  const theme = themeColor(isDependentThat?.type ?? '')
+  const theme = themeColor(answerData.dependsThat?.type ?? '')
 
   return answerData.value ? (
     <Box ref={reference}>

src/components/Routine/RetrospectiveTab/Answers/AnswerContent/AnswerCards/UserAnswer/user-answer.tsx

@@ -20,9 +20,10 @@ import messages from './messages'
 
 interface UserAnswerProperties {
   user: Partial<User>
+  isLoaded: boolean
 }
 
-export const UserAnswer = ({ user }: UserAnswerProperties) => {
+export const UserAnswer = ({ user, isLoaded }: UserAnswerProperties) => {
   const [newGray600] = useToken('colors', ['new-gray.600'])
   const router = useRouter()
   const intl = useIntl()
@@ -73,13 +74,13 @@ export const UserAnswer = ({ user }: UserAnswerProperties) => {
       </Box>
 
       <Flex ml={6}>
-        <SkeletonCircle isLoaded={Boolean(user?.firstName)} w={50} h={50}>
+        <SkeletonCircle isLoaded={isLoaded} w={50} h={50}>
           <Avatar name={userFullName} src={user?.picture} w={50} h={50} />
         </SkeletonCircle>
 
         <Flex ml={4} flexDirection="column">
           <Skeleton
-            isLoaded={Boolean(user.firstName)}
+            isLoaded={isLoaded}
             display="inline-block"
             minWidth="400px"
             height="24px"
@@ -90,7 +91,7 @@ export const UserAnswer = ({ user }: UserAnswerProperties) => {
             </Heading>
           </Skeleton>
           <Skeleton
-            isLoaded={Boolean(user.role)}
+            isLoaded={isLoaded}
             display="inline-block"
             minWidth="100px"
             maxWidth={`${user.role ? user.role.length * 10 : 300}px`}

src/components/Routine/RetrospectiveTab/Answers/AnswerContent/index.tsx

@@ -1,54 +1,92 @@
 import { Box, Divider, VStack } from '@chakra-ui/react'
-import React, { useEffect } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'next/router'
+import React, { useEffect, useState } from 'react'
 import { useIntl } from 'react-intl'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 
 import CustomMenuOptions, { Option } from 'src/components/Base/MenuOptions'
-import { useDeleteRoutineAnswer } from 'src/components/Routine/hooks/deleteAnswer/delete-routine-answer'
+import { useDeleteAnswerMutation } from 'src/components/Routine/hooks/new/use-delete-answer'
 import { commentsAtom } from 'src/state/recoil/comments/comments'
-import { answerDetailedAtom } from 'src/state/recoil/routine/answer'
 import meAtom from 'src/state/recoil/user/me'
 
-import { AnswerType } from '../../retrospective-tab-content'
+import { AnswerDetails, AnswerType } from '../../types'
 import messages from '../messages'
 
 import RoutineAnswerCard from './AnswerCards'
 import HistoryAnswers from './AnswerCards/HistoryAnswersCard/history-answers'
 
 type AnswerContent = {
+  teamId: string
   answerId: AnswerType['id']
+  answerDetailed: AnswerDetails
   isLoaded?: boolean
 }
 
-const AnswerContent = ({ answerId, isLoaded }: AnswerContent) => {
-  const answerDetailed = useRecoilValue(answerDetailedAtom)
-  const setComments = useSetRecoilState(commentsAtom)
-
+const AnswerContent = ({ teamId, answerId, answerDetailed, isLoaded }: AnswerContent) => {
   const intl = useIntl()
+  const router = useRouter()
+  const queryClient = useQueryClient()
+
+  const [answerDetailedFormatted, setAnswerDetailedFormatted] = useState<
+    AnswerDetails | undefined
+  >()
+
+  useEffect(() => {
+    setAnswerDetailedFormatted({
+      ...answerDetailed,
+      answers: answerDetailed.answers.map((answer) => {
+        const dependsThat = answerDetailed.answers.find(
+          (answerDepend) => answerDepend.id === answer.conditional?.dependsOn,
+        )
+
+        return {
+          ...answer,
+          dependsThat,
+        }
+      }),
+    })
+  }, [answerDetailed])
 
   const userID = useRecoilValue(meAtom)
+  const setComments = useSetRecoilState(commentsAtom)
 
-  const { deleteRoutineAnswer } = useDeleteRoutineAnswer()
+  const { mutate: deleteAnswer } = useDeleteAnswerMutation()
 
   const hasPermission = userID === answerDetailed.user.id
 
   useEffect(() => {
     setComments([])
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [answerId])
 
   const menuOptions: Option[] = [
     {
       value: intl.formatMessage(messages.firstMenuOption),
-      onSelect: async () => deleteRoutineAnswer(answerId),
+      onSelect: async () => {
+        deleteAnswer(answerId)
+        setTimeout(
+          async () => queryClient.invalidateQueries({ queryKey: [`routines:getAnswer:${teamId}`] }),
+          5000,
+        )
+        router.push(
+          {
+            query: {
+              ...router.query,
+              answerId: undefined,
+            },
+          },
+          undefined,
+          { shallow: true },
+        )
+      },
     },
   ]
 
   return (
     <>
       <VStack align="flex-start" px={4} py={10}>
-        {answerDetailed.history.length > 0 && (
+        {answerDetailedFormatted && answerDetailedFormatted.history.length > 0 && (
           <Box position="relative">
             {hasPermission && (
               <CustomMenuOptions
@@ -59,13 +97,13 @@ const AnswerContent = ({ answerId, isLoaded }: AnswerContent) => {
                 gap={1}
               />
             )}
-            <HistoryAnswers isLoaded={isLoaded} answers={answerDetailed.history} />
-            {answerDetailed.answers.map((answer) => {
+            <HistoryAnswers isLoaded={isLoaded} answers={answerDetailedFormatted.history} />
+            {answerDetailedFormatted.answers.map((answer) => {
               return (
                 <RoutineAnswerCard
                   key={answer.id}
                   answerData={answer}
-                  userThatAnswered={answerDetailed.user}
+                  userThatAnswered={answerDetailedFormatted.user}
                   isLoaded={isLoaded}
                 />
               )

src/components/Routine/RetrospectiveTab/Answers/answer-row.tsx → src/components/Routine/RetrospectiveTab/Answers/AnswerRow/index.tsx

@@ -11,18 +11,19 @@ import { EventType } from 'src/state/hooks/useEvent/event-type'
 import { useEvent } from 'src/state/hooks/useEvent/hook'
 import useRelativeDate from 'src/state/hooks/useRelativeDate'
 
-import { AnswerSummary } from '../retrospective-tab-content'
-
-import messages from './messages'
+import { AnswerSummary } from '../../types'
+import messages from '../messages'
 
 interface AnswerRowComponentProperties {
   answer: AnswerSummary
 }
 
 const AnswerRowComponent = ({ answer }: AnswerRowComponentProperties) => {
   const intl = useIntl()
-  const { dispatch } = useEvent(EventType.ROUTINE_ANSWER_ROW_CLICK)
   const router = useRouter()
+
+  const { dispatch } = useEvent(EventType.ROUTINE_ANSWER_ROW_CLICK)
+
   const [formattedRelativeDate] = useRelativeDate(new Date(answer.timestamp ?? ''))
 
   const isTheDateToday = answer.timestamp ? isToday(new Date(answer.timestamp)) : undefined