From cd16456c05ccc17d77d491690a39f3999c0a9f2d Mon Sep 17 00:00:00 2001
From: Github Actions <github-actions@github.com>
Date: Mon, 9 Oct 2023 12:19:12 -0500
Subject: [PATCH] fix: build issues and lint issues

---
 src/components/App/Helper/TeachMe/index.tsx | 23 ++++++-------
 src/stores/useTeachStore/index.ts           | 36 ++++++++++++++-------
 2 files changed, 36 insertions(+), 23 deletions(-)

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(<ToastMessage message="Instagraph is ready" />, {
@@ -126,9 +124,9 @@ export const TeachMe = () => {
   }
 
   return (
-    <Button kind="big" onClick={() => handleTutorialStart()}>
+    <ButtonStyled onClick={() => handleTutorialStart()}>
       Teach me
-    </Button>
+    </ButtonStyled>
   )
 }
 
@@ -140,12 +138,10 @@ export const TeachMeText = () => {
     s.hasInstagraphInProgress,
   ])
 
-  console.info('instagraph anwser', instgraphAnswser)
-
   return (
     <>
-      {!hasInstagraphInProgress ? (
-        <ReactFlow edges={instgraphAnswser.edges} nodes={instgraphAnswser.nodes} />
+      {!hasInstagraphInProgress && !!instgraphAnswser?.edges && !!instgraphAnswser?.nodes ? (
+        <ReactFlow edges={instgraphAnswser?.edges} nodes={instgraphAnswser?.nodes} />
       ) : (
         <Flex align="center" justify="center" py={12}>
           <Flex align="center" py={12}>
@@ -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<TeachStore>((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 },
+      })
+    }
   },
 }))