Skip to content

Commit

Permalink
mobile: update charting on the insights page
Browse files Browse the repository at this point in the history
  • Loading branch information
@oreHGA
oreHGA committed Jan 22, 2024
1 parent c4ce47d commit 3017b11
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 81 deletions.
4 changes: 2 additions & 2 deletions mobile/src/components/charts/chart-container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ export const ChartContainer: React.FC<ChartContainerProps> = ({
}, [prompt, startDate, timePeriod]);

return (
<View className="flex-1">
<View>
{chartData.length === 0 && (
<View className="flex flex-col items-center justify-center h-52">
<Text className="font-sans text-white text-base align-middle">
Expand Down Expand Up @@ -264,7 +264,7 @@ export const ChartContainer: React.FC<ChartContainerProps> = ({
)}

{prompt.responseType === "text" && chartData.length > 0 && (
<View className="flex flex-col w-full p-5">
<View className="flex flex-grow flex-col w-full p-5">
{chartData.map((entry) => {
return (
<ResponseTextItem
Expand Down
7 changes: 3 additions & 4 deletions mobile/src/pages/chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const ChatScreen = () => {
};

return (
<Screen>
<View className="flex flex-grow flex-col h-full w-full items-stretch justify-center bg-dark px-5">
{/* Chat Messages */}
<ScrollView
className="flex-1 bg-black"
Expand Down Expand Up @@ -93,8 +93,7 @@ export const ChatScreen = () => {
behavior="position"
className="
flex-1 flex-row items-center bg-secondary-900 rounded-md
my-2 max-h-[10%] pl-4 pr-4"
// {...(Platform.OS === "ios" ? { keyboardVerticalOffset: 100 } : {})
my-2 max-h-[10%] p-4 "
>
<TextInput
placeholder="Message..."
Expand All @@ -108,6 +107,6 @@ export const ChatScreen = () => {
<Text className="text-lime font-sans">Send</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
</Screen>
</View>
);
};
124 changes: 49 additions & 75 deletions mobile/src/pages/insights.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
Button,
Plus,
CategoryTag,
Pencil,
} from "~/components";
import { AccountContext, InsightContext } from "~/contexts";
import { usePromptsQuery } from "~/hooks";
Expand Down Expand Up @@ -52,23 +53,10 @@ export function InsightsScreen() {

const { data: savedPrompts, isLoading } = usePromptsQuery();

const [activeChartPrompt, setActiveChartPrompt] = React.useState<
Prompt | undefined
>();

const [chartStartDate, setChartStartDate] = React.useState<dayjs.Dayjs>(
dayjs().startOf(insightContext!.insightPeriod)
);

const [selectedPromptUuid, setSelectedPromptUuid] = React.useState<
string | undefined
>(routePromptUuid ? routePromptUuid : savedPrompts?.[0]?.uuid);

const handleActivePromptSelect = (promptUuid: string) => {
const prompt = savedPrompts?.find((p) => p.uuid === promptUuid);
setActiveChartPrompt(prompt);
};

const [selectedCategory, setSelectedCategory] = useState<
string | undefined
>();
Expand Down Expand Up @@ -101,20 +89,6 @@ export function InsightsScreen() {
setChartStartDate(dayjs().startOf(insightContext!.insightPeriod));
}, [insightContext!.insightPeriod]);

useEffect(() => {
// we set this once and destroy afterwards
if (routePromptUuid) {
setSelectedPromptUuid(routePromptUuid);
routePromptUuid = null;
}
}, [routePromptUuid]);

useEffect(() => {
if (selectedPromptUuid) {
handleActivePromptSelect(selectedPromptUuid);
}
}, [selectedPromptUuid]);

const onHandlerStateChange = (event: {
nativeEvent: { state: number; translationX: number };
}) => {
Expand Down Expand Up @@ -178,67 +152,67 @@ export function InsightsScreen() {
</View>
)}

<ScrollView
horizontal
className="flex gap-x-3 gap-y-3 pl-2"
showsHorizontalScrollIndicator={false}
>
{categoryPillsToDisplay.map((category) => {
const name = category.name;
return (
<CategoryTag
key={name}
title={name}
isActive={selectedCategory === name}
icon={category.icon}
handleValueChange={(checked) =>
handleCategorySelection(checked ? name : "")
}
/>
);
})}
</ScrollView>
{savedPrompts && savedPrompts.length > 0 && (
<PanGestureHandler onHandlerStateChange={onHandlerStateChange}>
<ScrollView nestedScrollEnabled>
<ScrollView
horizontal
className="flex gap-x-3 gap-y-3 pl-2"
showsHorizontalScrollIndicator={false}
>
{categoryPillsToDisplay.map((category) => {
const name = category.name;
return (
<CategoryTag
key={name}
title={name}
isActive={selectedCategory === name}
icon={category.icon}
handleValueChange={(checked) =>
handleCategorySelection(checked ? name : "")
}
/>
);
})}
</ScrollView>

{/* now add the date selectors */}
<ScrollView className="flex flex-row border-b-[1px] mt-5 mb-5 m-2 border-tint">
<View className="flex flex-1 flex-row border-b-[1px] mt-5 mb-5 m-2 border-tint">
{insightContext!.insightPeriod === "month" && (
// list all the months in the year
<Text className="text-base text-white p-2">
{chartStartDate.format("MMM YYYY")}
</Text>
)}
</ScrollView>
</View>

{/* select the first available prompt */}
<View className="flex flex-col w-full">
<View className="flex flex-col w-full h-auto justify-between rounded-lg bg-secondary-900">
{filteredPrompts?.map((prompt) => (
<View key={prompt.uuid}>
<View className="border-b-[1px] border-tint p-5">
<Text
className="text-base font-sans text-white"
onPress={() => setSelectedPromptUuid(prompt.uuid)}
>
{prompt.promptText}
</Text>
</View>

<View>
{/* this is where the chart is */}
{activeChartPrompt && (
<ChartContainer
prompt={activeChartPrompt}
startDate={chartStartDate}
timePeriod={insightContext!.insightPeriod}
/>
)}
</View>
<View className="flex flex-1 flex-col w-full h-auto justify-between">
{filteredPrompts?.map((prompt) => (
<View
key={prompt.uuid}
className="rounded-lg bg-secondary-900 mb-10"
>
<View className="flex flex-row border-b-[1px] border-tint p-5 justify-between">
<Text className="text-base font-sans text-white leading-10 max-w-[90%]">
{prompt.promptText}
</Text>
<Button
variant="ghost"
size="icon"
leftIcon={<Pencil width={20} height={20} />}
onPress={() => {}}
/>
</View>

<View>
<ChartContainer
prompt={prompt}
startDate={chartStartDate}
timePeriod={insightContext!.insightPeriod}
/>
</View>
))}
</View>
</View>
))}
</View>
</ScrollView>
</PanGestureHandler>
Expand Down

0 comments on commit 3017b11

Please sign in to comment.