From f8184ea181efe688dba216847eb92a788a9183ca Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Thu, 18 Jul 2024 19:16:12 +0500 Subject: [PATCH 1/2] fix(seed-questions): render seed questions and shuffle --- src/components/App/UniverseQuestion/index.tsx | 30 +++++-------------- src/components/Universe/index.tsx | 22 ++++++++++++-- 2 files changed, 27 insertions(+), 25 deletions(-) diff --git a/src/components/App/UniverseQuestion/index.tsx b/src/components/App/UniverseQuestion/index.tsx index 914248549..080e66656 100644 --- a/src/components/App/UniverseQuestion/index.tsx +++ b/src/components/App/UniverseQuestion/index.tsx @@ -3,43 +3,27 @@ import { Flex } from '~/components/common/Flex' import { TextareaAutosize } from '@mui/base' import { Button } from '@mui/material' -import { useEffect, useState } from 'react' +import { useState } from 'react' import ArrowForwardIcon from '~/components/Icons/ArrowForwardIcon' import ExploreIcon from '~/components/Icons/ExploreIcon' import HelpIcon from '~/components/Icons/HelpIcon' -import { getAboutData } from '~/network/fetchSourcesData' import { useAiSummaryStore } from '~/stores/useAiSummaryStore' import { useAppStore } from '~/stores/useAppStore' import { useDataStore } from '~/stores/useDataStore' import { useUserStore } from '~/stores/useUserStore' import { colors } from '~/utils/colors' -export const UniverseQuestion = () => { +interface UniverseQuestionProps { + seedQuestions: string[] +} + +export const UniverseQuestion = ({ seedQuestions }: UniverseQuestionProps) => { const [question, setQuestion] = useState('') - const [seedQuestions, setSeedQuestions] = useState([]) const { fetchData, setAbortRequests } = useDataStore((s) => s) const [setBudget] = useUserStore((s) => [s.setBudget]) const setUniverseQuestionIsOpen = useAppStore((s) => s.setUniverseQuestionIsOpen) const resetAiSummaryAnswer = useAiSummaryStore((s) => s.resetAiSummaryAnswer) - useEffect(() => { - const fetchSeedQuestions = async () => { - try { - const response = await getAboutData() - - if (response.seed_questions) { - const shuffledQuestions = shuffleArray(response.seed_questions) - - setSeedQuestions(shuffledQuestions) - } - } catch (error) { - console.error('Error fetching seed questions:', error) - } - } - - fetchSeedQuestions() - }, []) - const handleSubmitQuestion = async (questionToSubmit: string) => { if (questionToSubmit) { resetAiSummaryAnswer() @@ -77,7 +61,7 @@ export const UniverseQuestion = () => { return array } - const displayedSeedQuestions = seedQuestions.slice(0, 4) + const displayedSeedQuestions = shuffleArray(seedQuestions).slice(0, 4) const isValidText = !!question && question.trim().length > 0 diff --git a/src/components/Universe/index.tsx b/src/components/Universe/index.tsx index 0936ff25f..dcd26b88a 100644 --- a/src/components/Universe/index.tsx +++ b/src/components/Universe/index.tsx @@ -6,10 +6,11 @@ import { Bloom, EffectComposer, Outline, Selection, Vignette } from '@react-thre import { useControls } from 'leva' import { BlendFunction, Resolution } from 'postprocessing' import { Perf } from 'r3f-perf' -import { Suspense, memo, useCallback, useMemo } from 'react' +import { Suspense, memo, useCallback, useEffect, useMemo, useState } from 'react' import styled from 'styled-components' import { getNodeColorByType } from '~/components/Universe/Graph/constant' import { isDevelopment } from '~/constants' +import { getAboutData } from '~/network/fetchSourcesData' import { useAppStore } from '~/stores/useAppStore' import { useControlStore } from '~/stores/useControlStore' import { useDataStore } from '~/stores/useDataStore' @@ -97,6 +98,23 @@ const _Universe = () => { const isLoading = useDataStore((s) => s.isFetching) const universeQuestionIsOpen = useAppStore((s) => s.universeQuestionIsOpen) + const [seedQuestions, setSeedQuestions] = useState([]) + + useEffect(() => { + const fetchSeedQuestions = async () => { + try { + const response = await getAboutData() + + if (response.seed_questions) { + setSeedQuestions(response.seed_questions) + } + } catch (error) { + console.error('Error fetching seed questions:', error) + } + } + + fetchSeedQuestions() + }, []) const onWheelHandler = useCallback( (e: React.WheelEvent) => { @@ -143,7 +161,7 @@ const _Universe = () => { - {universeQuestionIsOpen && } + {universeQuestionIsOpen && } {isLoading && } From d8a2a271aeb4172b0fc59688a788be453286ed5c Mon Sep 17 00:00:00 2001 From: MahtabBukhari Date: Fri, 19 Jul 2024 05:55:50 +0500 Subject: [PATCH 2/2] fix(update-seed): fixed seed questions --- src/components/App/Splash/index.tsx | 8 +++++-- src/components/App/UniverseQuestion/index.tsx | 10 +++------ src/components/Universe/index.tsx | 22 ++----------------- src/stores/useDataStore/index.ts | 5 +++++ 4 files changed, 16 insertions(+), 29 deletions(-) diff --git a/src/components/App/Splash/index.tsx b/src/components/App/Splash/index.tsx index f1ac7c911..b6366a681 100644 --- a/src/components/App/Splash/index.tsx +++ b/src/components/App/Splash/index.tsx @@ -17,7 +17,7 @@ export const Splash = memo(({ children }: PropsWithChildren) => { const [progress, setProgress] = useState(0) const [isLoading, setIsLoading] = useState(true) const { appMetaData, setAppMetaData } = useAppStore((s) => s) - const { stats, setStats, isFetching } = useDataStore((s) => s) + const { stats, setStats, isFetching, setSeedQuestions } = useDataStore((s) => s) const fetchData = useCallback(async () => { try { @@ -25,6 +25,10 @@ export const Splash = memo(({ children }: PropsWithChildren) => { const aboutResponse = await getAboutData() setAppMetaData(aboutResponse) + + if (aboutResponse.seed_questions) { + setSeedQuestions(aboutResponse.seed_questions) + } } if (!stats) { @@ -43,7 +47,7 @@ export const Splash = memo(({ children }: PropsWithChildren) => { setProgress(100) } - }, [appMetaData, setAppMetaData, setStats, stats]) + }, [appMetaData, setAppMetaData, setStats, stats, setSeedQuestions]) useEffect(() => { fetchData() diff --git a/src/components/App/UniverseQuestion/index.tsx b/src/components/App/UniverseQuestion/index.tsx index 080e66656..6edff6cb5 100644 --- a/src/components/App/UniverseQuestion/index.tsx +++ b/src/components/App/UniverseQuestion/index.tsx @@ -13,13 +13,9 @@ import { useDataStore } from '~/stores/useDataStore' import { useUserStore } from '~/stores/useUserStore' import { colors } from '~/utils/colors' -interface UniverseQuestionProps { - seedQuestions: string[] -} - -export const UniverseQuestion = ({ seedQuestions }: UniverseQuestionProps) => { +export const UniverseQuestion = () => { const [question, setQuestion] = useState('') - const { fetchData, setAbortRequests } = useDataStore((s) => s) + const { fetchData, setAbortRequests, seedQuestions } = useDataStore((s) => s) const [setBudget] = useUserStore((s) => [s.setBudget]) const setUniverseQuestionIsOpen = useAppStore((s) => s.setUniverseQuestionIsOpen) const resetAiSummaryAnswer = useAiSummaryStore((s) => s.resetAiSummaryAnswer) @@ -61,7 +57,7 @@ export const UniverseQuestion = ({ seedQuestions }: UniverseQuestionProps) => { return array } - const displayedSeedQuestions = shuffleArray(seedQuestions).slice(0, 4) + const displayedSeedQuestions = seedQuestions ? shuffleArray(seedQuestions).slice(0, 4) : [] const isValidText = !!question && question.trim().length > 0 diff --git a/src/components/Universe/index.tsx b/src/components/Universe/index.tsx index dcd26b88a..0936ff25f 100644 --- a/src/components/Universe/index.tsx +++ b/src/components/Universe/index.tsx @@ -6,11 +6,10 @@ import { Bloom, EffectComposer, Outline, Selection, Vignette } from '@react-thre import { useControls } from 'leva' import { BlendFunction, Resolution } from 'postprocessing' import { Perf } from 'r3f-perf' -import { Suspense, memo, useCallback, useEffect, useMemo, useState } from 'react' +import { Suspense, memo, useCallback, useMemo } from 'react' import styled from 'styled-components' import { getNodeColorByType } from '~/components/Universe/Graph/constant' import { isDevelopment } from '~/constants' -import { getAboutData } from '~/network/fetchSourcesData' import { useAppStore } from '~/stores/useAppStore' import { useControlStore } from '~/stores/useControlStore' import { useDataStore } from '~/stores/useDataStore' @@ -98,23 +97,6 @@ const _Universe = () => { const isLoading = useDataStore((s) => s.isFetching) const universeQuestionIsOpen = useAppStore((s) => s.universeQuestionIsOpen) - const [seedQuestions, setSeedQuestions] = useState([]) - - useEffect(() => { - const fetchSeedQuestions = async () => { - try { - const response = await getAboutData() - - if (response.seed_questions) { - setSeedQuestions(response.seed_questions) - } - } catch (error) { - console.error('Error fetching seed questions:', error) - } - } - - fetchSeedQuestions() - }, []) const onWheelHandler = useCallback( (e: React.WheelEvent) => { @@ -161,7 +143,7 @@ const _Universe = () => { - {universeQuestionIsOpen && } + {universeQuestionIsOpen && } {isLoading && } diff --git a/src/stores/useDataStore/index.ts b/src/stores/useDataStore/index.ts index 087d5ca2c..fe5a9cb45 100644 --- a/src/stores/useDataStore/index.ts +++ b/src/stores/useDataStore/index.ts @@ -46,6 +46,7 @@ export type DataStore = { trendingTopics: Trending[] stats: TStats | null nodeTypes: string[] + seedQuestions: string[] | null setTrendingTopics: (trendingTopics: Trending[]) => void setDataNew: (data: GraphData) => void @@ -72,6 +73,7 @@ export type DataStore = { setAbortRequests: (abortRequest: boolean) => void nextPage: () => void setFilters: (filters: Partial) => void + setSeedQuestions: (questions: string[]) => void } const defaultData: Omit< @@ -98,6 +100,7 @@ const defaultData: Omit< | 'nextPage' | 'setDataNew' | 'resetDataNew' + | 'setSeedQuestions' > = { categoryFilter: null, dataInitial: null, @@ -127,6 +130,7 @@ const defaultData: Omit< splashDataLoading: true, abortRequest: false, dataNew: null, + seedQuestions: null, } let abortController: AbortController | null = null @@ -258,6 +262,7 @@ export const useDataStore = create()( setSources: (sources) => set({ sources }), setHideNodeDetails: (hideNodeDetails) => set({ hideNodeDetails }), setTeachMe: (showTeachMe) => set({ showTeachMe }), + setSeedQuestions: (questions) => set({ seedQuestions: questions }), updateNode: (updatedNode) => { console.log(updatedNode) },