From 7b57fab37f41a23346c26249a1467cd9a5527f0e Mon Sep 17 00:00:00 2001 From: Github Actions Date: Sun, 8 Oct 2023 17:57:25 -0500 Subject: [PATCH] feat: got instagraph working properly --- src/components/App/Helper/TeachMe/index.tsx | 170 ++++++------------ src/components/App/SecondarySidebar/index.tsx | 2 +- .../App/SideBar/SidebarSubView/index.tsx | 4 +- src/components/App/SideBar/index.tsx | 10 +- src/constants/index.ts | 1 + src/network/fetchGraphData/index.ts | 12 ++ src/stores/useTeachStore/index.ts | 32 ++++ src/utils/getLSat/index.ts | 5 +- 8 files changed, 111 insertions(+), 125 deletions(-) diff --git a/src/components/App/Helper/TeachMe/index.tsx b/src/components/App/Helper/TeachMe/index.tsx index 144ce4af7..9cc210672 100644 --- a/src/components/App/Helper/TeachMe/index.tsx +++ b/src/components/App/Helper/TeachMe/index.tsx @@ -8,7 +8,7 @@ import { Flex } from '~/components/common/Flex' import { Text } from '~/components/common/Text' import { ToastMessage } from '~/components/common/Toast/toastMessage' import useSocket from '~/hooks/useSockets' -import { postTeachMe } from '~/network/fetchGraphData' +import { postTeachMe, postInstagraph } from '~/network/fetchGraphData' import { useAppStore } from '~/stores/useAppStore' import { useDataStore } from '~/stores/useDataStore' import { useTeachStore } from '~/stores/useTeachStore' @@ -29,10 +29,9 @@ export const TeachMe = () => { const isSocketSet: { current: boolean } = useRef(false) const socket: Socket | null = useSocket() - const [setTeachMeAnswer, setHasTeachingInProgress] = useTeachStore((s) => [ - s.setTeachMeAnswer, - s.setHasTeachingInProgress, - ]) + const [setTeachMeAnswer, setHasTeachingInProgress, setInstagraphAnswer, setHasInstagraphInProgress] = useTeachStore( + (s) => [s.setTeachMeAnswer, s.setHasTeachingInProgress, s.setInstagraphAnswer, s.setHasInstagraphInProgress], + ) const handleTeachMe = useCallback( (response: ResponseType) => { @@ -46,6 +45,21 @@ export const TeachMe = () => { [setTeachMeAnswer], ) + const handleInstagraph = useCallback( + (response: ResponseType) => { + console.info('instgraph response', response.edges) + console.info('instgraph response', response.nodes) + + setInstagraphAnswer(response) + + toast(, { + position: toast.POSITION.BOTTOM_CENTER, + type: 'success', + }) + }, + [setInstagraphAnswer], + ) + useEffect(() => { if (isSocketSet.current) { return @@ -58,11 +72,20 @@ export const TeachMe = () => { isSocketSet.current = true } } - }, [socket, handleTeachMe]) + + if (handleInstagraph) { + if (socket) { + socket.on('instagraphhook', handleInstagraph) + + isSocketSet.current = true + } + } + }, [socket, handleTeachMe, handleInstagraph]) const handleTutorialStart = async () => { if (searchTerm) { setHasTeachingInProgress(true) + setHasInstagraphInProgress(true) setSideBarOpen(true) setTeachMe(true) @@ -86,8 +109,18 @@ export const TeachMe = () => { toast(, { type: 'success', }) + + await postInstagraph({ + term: searchTerm, + transcripts, + }) + + toast(, { + type: 'success', + }) } catch (error: unknown) { setHasTeachingInProgress(false) + setHasInstagraphInProgress(false) } } } @@ -100,117 +133,32 @@ export const TeachMe = () => { } export const TeachMeText = () => { - const initialNodes = [ - { - color: '#FF8C00', - data: { - label: 'Sphinx Relay', - }, - id: 'sphinx_relay', - position: { - x: 0, - y: 0, - }, - properties: {}, - type: 'technology', - }, - { - color: '#FFD700', - data: { - label: 'Layer 2 Scaling Solution', - }, - id: 'layer_2_scaling_solution', - position: { - x: 0, - y: 100, - }, - properties: {}, - type: 'concept', - }, - { - color: '#FFD700', - data: { - label: 'Payment Channels', - }, - id: 'payment_channels', - position: { - x: -200, - y: 200, - }, - properties: {}, - type: 'concept', - }, - { - color: '#FF8C00', - data: { - label: 'Lightning Network', - }, - id: 'lightning_network', - position: { - x: -200, - y: 300, - }, - properties: {}, - type: 'technology', - }, - { - color: '#FF8C00', - data: { - label: 'Bitcoin', - }, - id: 'bitcoin', - position: { - x: -400, - y: 400, - }, - properties: {}, - type: 'technology', - }, - ] - - const initialEdges = [ - { - color: '#008000', - direction: 'forward', - label: 'is a', - properties: {}, - source: 'sphinx_relay', - target: 'layer_2_scaling_solution', - }, - { - color: '#008000', - direction: 'forward', - label: 'uses', - properties: {}, - source: 'layer_2_scaling_solution', - target: 'payment_channels', - }, - { - color: '#008000', - direction: 'forward', - label: 'utilizes', - properties: {}, - source: 'payment_channels', - target: 'lightning_network', - }, - { - color: '#008000', - direction: 'forward', - label: 'built on', - properties: {}, - source: 'lightning_network', - target: 'bitcoin', - }, - ] + const [teachMeAnswer, hasTeachingInProgress, instgraphAnswser, hasInstagraphInProgress] = useTeachStore((s) => [ + s.teachMeAnswer, + s.hasTeachingInProgress, + s.instgraphAnswser, + s.hasInstagraphInProgress, + ]) - const [teachMeAnswer, hasTeachingInProgress] = useTeachStore((s) => [s.teachMeAnswer, s.hasTeachingInProgress]) + console.info('instagraph anwser', instgraphAnswser) return ( <> + {!hasInstagraphInProgress ? ( + + ) : ( + + + + + + Generating instagraph + + + )} {!hasTeachingInProgress ? ( <> - - + {teachMeAnswer} diff --git a/src/components/App/SecondarySidebar/index.tsx b/src/components/App/SecondarySidebar/index.tsx index 8a38dbbe7..3361f498f 100644 --- a/src/components/App/SecondarySidebar/index.tsx +++ b/src/components/App/SecondarySidebar/index.tsx @@ -39,7 +39,7 @@ const Wrapper = styled(Flex)(({ theme }) => ({ background: colors.BG1, height: '100vh', padding: '16px 20px', - width: '100%', + width: '110%', zIndex: 30, display: 'flex', [theme.breakpoints.up('sm')]: { diff --git a/src/components/App/SideBar/SidebarSubView/index.tsx b/src/components/App/SideBar/SidebarSubView/index.tsx index 39897c28e..7ed709d8e 100644 --- a/src/components/App/SideBar/SidebarSubView/index.tsx +++ b/src/components/App/SideBar/SidebarSubView/index.tsx @@ -10,12 +10,12 @@ import { SelectedNodeView } from '../SelectedNodeView' type Props = { open: boolean } export const SideBarSubView = ({ open }: Props) => { - const [setSelectedNode, setTeachMe] = useDataStore((s) => [s.setSelectedNode, s.setTeachMe]) + const [setSelectedNode, setTeachMe, showTeachMe] = useDataStore((s) => [s.setSelectedNode, s.setTeachMe, s.showTeachMe]) console.log('IS OPEN', open) return ( - + diff --git a/src/components/App/SideBar/index.tsx b/src/components/App/SideBar/index.tsx index ff829ffa0..c50929d22 100644 --- a/src/components/App/SideBar/index.tsx +++ b/src/components/App/SideBar/index.tsx @@ -1,4 +1,4 @@ -import { Button, Slide } from '@mui/material' +import { Slide } from '@mui/material' import { forwardRef, useEffect, useRef, useState } from 'react' import { useFormContext } from 'react-hook-form' import styled from 'styled-components' @@ -96,14 +96,6 @@ const Content = forwardRef(({ onSubmit, subViewOpen
-
)} diff --git a/src/constants/index.ts b/src/constants/index.ts index 16efe205a..ab1845d07 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -4,6 +4,7 @@ const { origin, host } = window.location export const isDevelopment = !!( origin === 'http://localhost:3000' || origin === 'http://localhost:3001' || + origin === 'http://localhost:3004' || origin === 'https://sphinx-jarvis-david.sphinx1.repl.co' ) diff --git a/src/network/fetchGraphData/index.ts b/src/network/fetchGraphData/index.ts index 522528844..a43bbbada 100644 --- a/src/network/fetchGraphData/index.ts +++ b/src/network/fetchGraphData/index.ts @@ -149,6 +149,18 @@ export const postTeachMe = async (data: TeachData) => { return api.post(`/teachme`, JSON.stringify(data), { Authorization: lsatToken }) } +export const postInstagraph = async (data: TeachData) => { + console.log(data) + + const lsatToken = await getLSat('instagraph') + + if (!lsatToken) { + throw new Error('An error occured calling getLSat') + } + + return api.post(`/instagraph`, JSON.stringify(data), { Authorization: lsatToken }) +} + export const postAskQuestion = async (data: QuestionData) => { const lsatToken = await getLSat('ask_question') diff --git a/src/stores/useTeachStore/index.ts b/src/stores/useTeachStore/index.ts index 3bccb7bda..3bee7e3bc 100644 --- a/src/stores/useTeachStore/index.ts +++ b/src/stores/useTeachStore/index.ts @@ -1,31 +1,51 @@ import create from 'zustand' +type InstagraphResponse = { + edges: Array[{ direction: string; label: string; properties: object; source: string; target: string; color: string }] + nodes: Array[{ + color: string + id: string + data: { label: string } + position: { x: number; y: number } + properties: object + type: string + }] +} + type TeachStore = { askedQuestions: string[] | null askedQuestionsAnswers: string[] | null teachMeAnswer: string | null + instgraphAnswser: InstagraphResponse hasQuestionInProgress: boolean hasTeachingInProgress: boolean + hasInstagraphInProgress: boolean setAskedQuestion: (question: string) => void setAskedQuestionAnswer: (answer: string) => void setHasQuestionInProgress: (hasQuestionInProgress: boolean) => void setHasTeachingInProgress: (hasTeachingInProgress: boolean) => void + setHasInstagraphInProgress: (hasInstagraphInProgress: boolean) => void setTeachMeAnswer: (answer: string) => void + setInstagraphAnswer: (answer: InstagraphResponse) => void } const defaultData: Omit< TeachStore, | 'setTeachMeAnswer' + | 'setInstagraphAnswer' | 'setAskedQuestionAnswer' | 'setAskedQuestion' | 'setHasQuestionInProgress' + | 'setHasInstagraphInProgress' | 'setHasTeachingInProgress' > = { askedQuestions: null, askedQuestionsAnswers: null, hasQuestionInProgress: false, hasTeachingInProgress: false, + hasInstagraphInProgress: false, teachMeAnswer: null, + instgraphAnswser: null, } export const useTeachStore = create((set) => ({ @@ -48,5 +68,17 @@ export const useTeachStore = create((set) => ({ set({ hasTeachingInProgress, }), + setHasInstagraphInProgress: (hasInstagraphInProgress: boolean) => + set({ + hasInstagraphInProgress, + }), 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 }, + }) + }, })) diff --git a/src/utils/getLSat/index.ts b/src/utils/getLSat/index.ts index c2ee162b8..a27a83f6e 100644 --- a/src/utils/getLSat/index.ts +++ b/src/utils/getLSat/index.ts @@ -3,12 +3,13 @@ import * as sphinx from 'sphinx-bridge-kevkevinpal' import { API_URL } from '~/constants' import { requestProvider } from 'webln' -type Action = 'searching' | 'adding_node' | 'teachme' | 'ask_question' | 'sentiments' +type Action = 'searching' | 'adding_node' | 'teachme' | 'instagraph' | 'ask_question' | 'sentiments' const ActionsMapper: Record = { searching: 'GET', adding_node: 'POST', teachme: 'POST', + instagraph: 'POST', ask_question: 'POST', sentiments: 'GET', } @@ -84,7 +85,7 @@ export const getUnpaidLsat = async (action: Action, search?: string) => { const data = await resp.json() - const lsat = ['teachme', 'ask_question', 'sentiments'].includes(action) + const lsat = ['instagraph', 'teachme', 'ask_question', 'sentiments'].includes(action) ? Lsat.fromHeader(resp.headers.get('www-authenticate') || '') : Lsat.fromHeader(data.headers)