fix: fix conflicts

stakwork · Oct 19, 2023 · 1e8534d · 1e8534d
2 parents d0b04be + a0360ba
commit 1e8534d
Show file tree

Hide file tree

Showing 30 changed files with 541 additions and 171 deletions.
diff --git a/build/assets/index-e8118d7f.js → build/assets/index-337682da.js b/build/assets/index-e8118d7f.js → build/assets/index-337682da.js
diff --git a/build/index.html b/build/index.html
@@ -22,7 +22,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Second Brain</title>
-    <script type="module" crossorigin src="/assets/index-e8118d7f.js"></script>
+    <script type="module" crossorigin src="/assets/index-337682da.js"></script>
     <link rel="stylesheet" href="/assets/index-381991a0.css">
   </head>
   <body style="background: #000">

diff --git a/build/svg-icons/BudgetIcon.svg b/build/svg-icons/BudgetIcon.svg
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sphinx-nav",
-  "version": "0.1.84",
+  "version": "0.1.86",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.1",
@@ -49,7 +49,7 @@
     "reactflow": "^11.9.2",
     "recharts": "^2.4.3",
     "socket.io-client": "^4.6.1",
-    "sphinx-bridge-kevkevinpal": "0.2.58",
+    "sphinx-bridge-kevkevinpal": "0.2.60",
     "stream-browserify": "^3.0.0",
     "string_decoder": "^1.3.0",
     "styled-components": "^5.3.9",

diff --git a/public/svg-icons/BudgetIcon.svg b/public/svg-icons/BudgetIcon.svg
diff --git a/src/components/AddNodeModal/index.tsx b/src/components/AddNodeModal/index.tsx
@@ -28,10 +28,12 @@ import {
 import { api } from '~/network/api'
 import { getRadarData } from '~/network/fetchSourcesData'
 import { useModal } from '~/stores/useModalStore'
+import { useUserStore } from '~/stores/useUserStore'
 import { FetchRadarResponse, SubmitErrRes } from '~/types'
 import { colors } from '~/utils/colors'
 import { getLSat } from '~/utils/getLSat'
 import { payLsat } from '~/utils/payLsat'
+import { updateBudget } from '~/utils/setBudget'
 import { executeIfProd } from '~/utils/tests'
 import { timeToMilliseconds } from '~/utils/timeToMilliseconds'
 import { useDataStore } from '../../stores/useDataStore/index'
@@ -83,6 +85,7 @@ const handleSubmit = async (
   close: () => void,
   sourceType: string,
   successCallback: () => void,
+  setBudget: (value: number | null) => void,
 ): Promise<void> => {
   const body: { [index: string]: unknown } = {}
 
@@ -192,7 +195,9 @@ const handleSubmit = async (
 
       await payLsat(lsat)
 
-      await handleSubmit(data, close, sourceType, successCallback)
+      await updateBudget(setBudget)
+
+      await handleSubmit(data, close, sourceType, successCallback, setBudget)
     }
 
     if (err instanceof Error) {
@@ -261,6 +266,7 @@ export const AddNodeModal = () => {
   const { close, addNodeModalData } = useModal('addNode')
   const [activeType, setActiveType] = useState('')
   const setSources = useDataStore((s) => s.setSources)
+  const [setBudget] = useUserStore((s) => [s.setBudget])
 
   const resolvedContentOptions = addNodeModalData ? CONTENT_TYPE_OPTIONS[addNodeModalData] : null
 
@@ -291,7 +297,7 @@ export const AddNodeModal = () => {
   }
 
   const onSubmit = form.handleSubmit(async (data) => {
-    await handleSubmit(data, handleClose, activeType, onSuccessCallback)
+    await handleSubmit(data, handleClose, activeType, onSuccessCallback, setBudget)
   })
 
   const options = resolvedContentOptions

diff --git a/src/components/App/AppBar/index.tsx b/src/components/App/AppBar/index.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
-import { Stats } from '~/components/Stats'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
-import { TAboutParams, getAboutData } from '~/network/fetchSourcesData'
+import { Stats } from '~/components/Stats'
+import { getAboutData, TAboutParams } from '~/network/fetchSourcesData'
 import { colors } from '~/utils/colors'
 import { media } from '~/utils/media'
 
@@ -58,7 +58,7 @@ const Header = styled(Flex).attrs({
   position: absolute;
   top: 0px;
   left: 64px;
-  right: 64px;
+  right: 32px;
   transition: opacity 1s;
   z-index: 99;
   padding: 20px 23px;

diff --git a/src/components/App/Helper/AskQuestion/index.tsx b/src/components/App/Helper/AskQuestion/index.tsx
@@ -15,7 +15,9 @@ import { postAskQuestion } from '~/network/fetchGraphData'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
 import { useTeachStore } from '~/stores/useTeachStore'
+import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils/colors'
+import { updateBudget } from '~/utils/setBudget'
 
 type ResponseType = {
   answer: string
@@ -42,6 +44,7 @@ export const AskQuestion = () => {
   const searchTerm = useAppStore((s) => s.currentSearch)
   const isSocketSet: { current: boolean } = useRef<boolean>(false)
   const socket: Socket | null = useSocket()
+  const [setBudget] = useUserStore((s) => [s.setBudget])
 
   const [askedQuestions, askedQuestionsAnswers, setAskedQuestion, setAskedQuestionAnswer, hasQuestionInProgress] =
     useTeachStore((s) => [
@@ -104,6 +107,8 @@ export const AskQuestion = () => {
           transcripts,
         })
 
+        await updateBudget(setBudget)
+
         toast(<ToastMessage message="We started preparing response for you" />, {
           type: 'success',
         })

diff --git a/src/components/App/Helper/SentimentAnalysis/index.tsx b/src/components/App/Helper/SentimentAnalysis/index.tsx
@@ -10,7 +10,9 @@ import { Button } from '~/components/Button'
 import { Text } from '~/components/common/Text'
 import { getSentimentData } from '~/network/fetchGraphData'
 import { useAppStore } from '~/stores/useAppStore'
+import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils/colors'
+import { updateBudget } from '~/utils/setBudget'
 import { executeIfProd } from '~/utils/tests'
 import { SentimentChart } from '../../SecondarySidebar/Sentiment/SentimentChart'
 
@@ -26,6 +28,7 @@ export const SentimentAnalysis = memo(() => {
   const now = moment().startOf('day')
   const min = moment().subtract(1, 'year')
   const step = 3600 * 24 // day
+  const [setBudget] = useUserStore((s) => [s.setBudget])
 
   const [value, setValue] = useState(moment().startOf('day').subtract(20, 'day'))
 
@@ -48,7 +51,7 @@ export const SentimentAnalysis = memo(() => {
     )
 
     getSentimentData({ topic: search, cutoff_date: String(value.unix()) })
-      .then((r) => {
+      .then(async (r) => {
         // eslint-disable-next-line no-console
         console.log(r?.data)
 
@@ -60,6 +63,8 @@ export const SentimentAnalysis = memo(() => {
               score: i.sentiment_score,
             })),
         )
+
+        await updateBudget(setBudget)
       })
       .catch(console.error)
       .finally(() => {

diff --git a/src/components/App/Helper/TeachMe/index.tsx b/src/components/App/Helper/TeachMe/index.tsx
@@ -1,21 +1,23 @@
+import { Button } from '@mui/material'
 import { useCallback, useEffect, useRef } from 'react'
-import styled from 'styled-components'
 import { PropagateLoader } from 'react-spinners'
 import { toast } from 'react-toastify'
+import ReactFlow from 'reactflow'
 import { Socket } from 'socket.io-client'
 import * as sphinx from 'sphinx-bridge-kevkevinpal'
-import { Button } from '@mui/material'
+import styled from 'styled-components'
 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, postInstagraph } from '~/network/fetchGraphData'
+import { postInstagraph, postTeachMe } from '~/network/fetchGraphData'
 import { useAppStore } from '~/stores/useAppStore'
 import { useDataStore } from '~/stores/useDataStore'
-import { useTeachStore, InstagraphResponse } from '~/stores/useTeachStore'
+import { InstagraphResponse, useTeachStore } from '~/stores/useTeachStore'
+import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils/colors'
+import { updateBudget } from '~/utils/setBudget'
 import { AskQuestion } from '../AskQuestion'
-import ReactFlow from 'reactflow'
 
 import 'reactflow/dist/style.css'
 
@@ -26,6 +28,7 @@ type ResponseType = {
 export const TeachMe = () => {
   const [data, setTeachMe] = useDataStore((s) => [s.data, s.setTeachMe])
   const [searchTerm, setSideBarOpen] = useAppStore((s) => [s.currentSearch, s.setSidebarOpen])
+  const [setBudget] = useUserStore((s) => [s.setBudget])
 
   const isSocketSet: { current: boolean } = useRef<boolean>(false)
   const socket: Socket | null = useSocket()
@@ -104,6 +107,8 @@ export const TeachMe = () => {
           transcripts,
         })
 
+        await updateBudget(setBudget)
+
         toast(<ToastMessage message="We started preparing tutorial for you" />, {
           type: 'success',
         })
@@ -113,6 +118,8 @@ export const TeachMe = () => {
           transcripts,
         })
 
+        await updateBudget(setBudget)
+
         toast(<ToastMessage message="We started preparing an instagraph for you" />, {
           type: 'success',
         })

diff --git a/src/components/App/SecondarySidebar/About/index.tsx b/src/components/App/SecondarySidebar/About/index.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components'
 import { Button } from '~/components/Button'
 import { Flex } from '~/components/common/Flex'
 import { Text } from '~/components/common/Text'
-import { TAboutParams, getAboutData } from '~/network/fetchSourcesData'
+import { getAboutData, TAboutParams } from '~/network/fetchSourcesData'
 import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils/colors'
 import { executeIfProd } from '~/utils/tests'

diff --git a/src/components/App/SecondarySidebar/Sentiment/index.tsx b/src/components/App/SecondarySidebar/Sentiment/index.tsx
@@ -9,7 +9,9 @@ import { getSentimentData } from '~/network/fetchGraphData'
 import { Stack } from '@mui/material'
 import { PropagateLoader } from 'react-spinners'
 import { Button } from '~/components/Button'
+import { useUserStore } from '~/stores/useUserStore'
 import { colors } from '~/utils/colors'
+import { updateBudget } from '~/utils/setBudget'
 import { executeIfProd } from '~/utils/tests'
 import { SentimentChart } from './SentimentChart'
 
@@ -20,6 +22,7 @@ type SentimentData = {
 
 export const Sentiment = () => {
   const [sentimentData, setSentimentData] = useState<SentimentData[] | undefined>(undefined)
+  const [setBudget] = useUserStore((s) => [s.setBudget])
 
   const [isLoading, setIsLoading] = useState(false)
 
@@ -34,7 +37,7 @@ export const Sentiment = () => {
     )
 
     getSentimentData()
-      .then((r) => {
+      .then(async (r) => {
         setSentimentData(
           r?.data
             .filter((i) => i.date)
@@ -43,6 +46,8 @@ export const Sentiment = () => {
               score: i.sentiment_score,
             })),
         )
+
+        await updateBudget(setBudget)
       })
       .catch(console.error)
       .finally(() => {

diff --git a/src/components/App/SideBar/AudioClip/index.tsx b/src/components/App/SideBar/AudioClip/index.tsx
@@ -1,12 +1,16 @@
-import { memo, useCallback, useEffect } from 'react'
+import { Divider } from '@mui/material'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 import { AudioPlayer } from '~/components/AudioPlayer'
+import { Booster } from '~/components/Booster'
 import { Avatar } from '~/components/common/Avatar'
 import { Flex } from '~/components/common/Flex'
 import { setIsTimestampLoaded, useSelectedNode } from '~/stores/useDataStore'
 import { usePlayerStore } from '~/stores/usePlayerStore'
 import { formatDescription } from '~/utils/formatDescription'
 import { useIsMatchBreakpoint } from '~/utils/useIsMatchBreakpoint'
+import { BoostAmt } from '../../Helper/BoostAmt'
+import { Description } from '../Description'
 import { Episode } from '../Relevance/Episode'
 import { Transcript } from '../Transcript'
 
@@ -23,8 +27,9 @@ const PlayerWrapper = styled(Flex)`
   padding: 30px 18px 0;
 `
 
-const TranscriptWrapper = styled(Flex)`
-  padding: 0 18px 18px;
+const StyledDivider = styled(Divider)`
+  margin: auto 0px 2px 0px;
+  opacity: 75%;
 `
 
 const StyledEpisode = styled(Episode)`
@@ -41,12 +46,28 @@ const _AudioClip = () => {
   const isMobile = useIsMatchBreakpoint('sm', 'down')
   const isPlay = usePlayerStore((s) => s.isPlaying)
   const setIsPlaying = usePlayerStore((s) => s.setIsPlaying)
+  const scrollTargetRef = useRef<HTMLDivElement | null>(null)
 
-  const { image_url: imageUrl, description, date, boost, type, id, episode_title: episodeTitle } = selectedNode || {}
+  const {
+    image_url: imageUrl,
+    show_title: showTitle,
+    date,
+    boost,
+    type,
+    id,
+    ref_id: refId,
+    episode_title: episodeTitle,
+  } = selectedNode || {}
+
+  const [boostAmount, setBoostAmount] = useState<number>(boost || 0)
 
   useEffect(
     () => () => {
       setIsPlaying(false)
+
+      if (scrollTargetRef.current) {
+        scrollTargetRef.current.scrollTo({ top: 0, behavior: 'auto' })
+      }
     },
     [setIsPlaying],
   )
@@ -87,20 +108,42 @@ const _AudioClip = () => {
       <StyledEpisode
         boostCount={boost || 0}
         date={date || 0}
-        description={formatDescription(description)}
+        episodeTitle={formatDescription(episodeTitle)}
         id={id}
         imageUrl={imageUrl || 'audio_default.svg'}
         isSelectedView
         onClick={() => null}
-        title={episodeTitle}
+        showTitle={formatDescription(showTitle)}
         type={type}
       />
       {/* </Flex> */}
-      <TranscriptWrapper grow={1} shrink={1}>
-        <Transcript node={selectedNode} stateless />
-      </TranscriptWrapper>
+      <StyledDivider />
+      <div ref={scrollTargetRef} style={{ overflow: 'auto', flex: 1, width: '100%' }}>
+        <BoostWrapper>
+          <BoostAmt amt={boostAmount} />
+          <Booster content={selectedNode} count={boostAmount} refId={refId} updateCount={setBoostAmount} />
+        </BoostWrapper>
+        <StyledDivider />
+        <TextWrapper>
+          <Description node={selectedNode} stateless />
+        </TextWrapper>
+        <StyledDivider />
+        <TextWrapper>
+          <Transcript node={selectedNode} stateless />
+        </TextWrapper>
+      </div>
     </Wrapper>
   )
 }
 
 export const AudioClip = memo(_AudioClip)
+
+const BoostWrapper = styled(Flex)`
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 18px 18px 18px;
+`
+
+const TextWrapper = styled(Flex)`
+  padding: 18px 18px 18px;
+`