diff --git a/src/components/App/Helper/TeachMe/index.tsx b/src/components/App/Helper/TeachMe/index.tsx index 9cc210672..da91feb0a 100644 --- a/src/components/App/Helper/TeachMe/index.tsx +++ b/src/components/App/Helper/TeachMe/index.tsx @@ -1,4 +1,5 @@ import { useCallback, useEffect, useRef } from 'react' +import styled from 'styled-components' import { PropagateLoader } from 'react-spinners' import { toast } from 'react-toastify' import { Socket } from 'socket.io-client' @@ -11,7 +12,7 @@ import useSocket from '~/hooks/useSockets' import { postTeachMe, postInstagraph } from '~/network/fetchGraphData' import { useAppStore } from '~/stores/useAppStore' import { useDataStore } from '~/stores/useDataStore' -import { useTeachStore } from '~/stores/useTeachStore' +import { useTeachStore, InstagraphResponse } from '~/stores/useTeachStore' import { colors } from '~/utils/colors' import { AskQuestion } from '../AskQuestion' import ReactFlow from 'reactflow' @@ -46,10 +47,7 @@ export const TeachMe = () => { ) const handleInstagraph = useCallback( - (response: ResponseType) => { - console.info('instgraph response', response.edges) - console.info('instgraph response', response.nodes) - + (response: InstagraphResponse) => { setInstagraphAnswer(response) toast(, { @@ -126,9 +124,9 @@ export const TeachMe = () => { } return ( - + ) } @@ -140,12 +138,10 @@ export const TeachMeText = () => { s.hasInstagraphInProgress, ]) - console.info('instagraph anwser', instgraphAnswser) - return ( <> - {!hasInstagraphInProgress ? ( - + {!hasInstagraphInProgress && !!instgraphAnswser?.edges && !!instgraphAnswser?.nodes ? ( + ) : ( @@ -176,3 +172,8 @@ export const TeachMeText = () => { ) } + + +const ButtonStyled = styled(Button)` +` + diff --git a/src/stores/useTeachStore/index.ts b/src/stores/useTeachStore/index.ts index 3bee7e3bc..1d5887fdd 100644 --- a/src/stores/useTeachStore/index.ts +++ b/src/stores/useTeachStore/index.ts @@ -1,22 +1,34 @@ import create from 'zustand' -type InstagraphResponse = { - edges: Array[{ direction: string; label: string; properties: object; source: string; target: string; color: string }] - nodes: Array[{ +export type InstagraphResponse = { + instagraph: Instagraph +} | null + +type Instagraph = { + edges: Array<{ + direction: string + label: string + properties: object + source: string + target: string + color: string + id: string + }> + nodes: Array<{ color: string id: string data: { label: string } position: { x: number; y: number } properties: object type: string - }] -} + }> +} | null type TeachStore = { askedQuestions: string[] | null askedQuestionsAnswers: string[] | null teachMeAnswer: string | null - instgraphAnswser: InstagraphResponse + instgraphAnswser: Instagraph hasQuestionInProgress: boolean hasTeachingInProgress: boolean hasInstagraphInProgress: boolean @@ -74,11 +86,11 @@ export const useTeachStore = create((set) => ({ }), setTeachMeAnswer: (answer: string) => set({ hasTeachingInProgress: false, teachMeAnswer: answer }), setInstagraphAnswer: (answer: InstagraphResponse) => { - console.info(answer.instagraph) - - set({ - hasInstagraphInProgress: false, - instgraphAnswser: { edges: answer.instagraph.edges, nodes: answer.instagraph.nodes }, - }) + if (!!answer?.instagraph?.edges && !!answer?.instagraph?.nodes) { + set({ + hasInstagraphInProgress: false, + instgraphAnswser: { edges: answer?.instagraph?.edges, nodes: answer?.instagraph?.nodes }, + }) + } }, }))