Skip to content

Commit

Permalink
feat: display quest list if already subscribed
Browse files Browse the repository at this point in the history
  • Loading branch information
@oreHGA
oreHGA committed May 17, 2024
1 parent 8dd9ef5 commit 8955e1d
Show file tree
Hide file tree
Showing 5 changed files with 273 additions and 97 deletions.
1 change: 1 addition & 0 deletions mobile/src/@types/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,4 +92,5 @@ export interface Quest {
endDate?: number;
prompts?: Prompt[];
additionalMeta?: object;
config?: string;
}
158 changes: 80 additions & 78 deletions mobile/src/pages/quest-detail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import axios from "axios";
import dayjs from "dayjs";
import Constants from "expo-constants";
import React from "react";
import { View, Text } from "react-native";
import { View, Text, ScrollView } from "react-native";
import Toast from "react-native-toast-message";
import { black } from "tailwindcss/colors";

Expand Down Expand Up @@ -72,9 +72,9 @@ export function QuestDetailScreen() {
* 5. Show success toast
*/
// TODO: display consent dialog
// consent - I agree to participate in this quest
// I agree to share data I collect with the quest organizer
// I want to share my data anoymously with the research community
// consent - ['I agree to participate in this quest',
// 'I agree to share data I collect with the quest organizer',
// 'I want to share my data anoymously with the research community']
try {
const requestUrl = `${Constants.expoConfig?.extra?.fusionBackendUrl}/api/quest/join`;
console.log("requestUrl", requestUrl);
Expand Down Expand Up @@ -161,94 +161,96 @@ export function QuestDetailScreen() {
};

const secondsToHms = (d: number) => {
if (!d) return "--hrs --mins";
if (!d) return "-- hrs -- mins";
const hours = Math.floor(d / 3600);
const minutes = Math.floor((d % 3600) / 60);
return `${hours} hrs ${minutes} mins`;
};

return (
<Screen>
<View className="flex flex-1 px-4 justify-between">
<View>
<Text className="text-white font-sans text-lg">
{route.params.quest.title}
</Text>
<Text className="text-white opacity-60 text-base font-sans my-2">
{route.params.quest.description}
</Text>

<Text className="text-white opacity-60 text-base font-sans my-2">
Organized by Edge City
</Text>

<View className="mt-5">
{/* TODO: display the list of prompts that are required for the quest */}
<Text className="text-white font-sans text-lg">Prompts</Text>
{route.params.quest.prompts?.map((prompt) => (
<View key={Math.random()} className="my-2">
<PromptDetails prompt={prompt} />
</View>
))}
</View>
{isSubscribed === true && (
<ScrollView>
<View className="flex flex-1 px-4 justify-between">
<View>
<Text className="text-white font-sans text-lg">
{route.params.quest.title}
</Text>
<Text className="text-white opacity-60 text-base font-sans my-2">
{route.params.quest.description}
</Text>

<Text className="text-white opacity-60 text-base font-sans my-2">
Organized by Edge City
</Text>

<View className="mt-5">
<Text className="text-white font-sans text-lg">Health</Text>

{/* display the steps data */}
<View className="flex flex-row w-full items-center justify-between rounded-md mt-2 py-5 px-4 bg-secondary-900 active:opacity-90">
<Text className="font-sans flex flex-wrap text-white text-base mr-2">
Steps
</Text>
<Text className="font-sans text-base text-white opacity-60">
{healthDataset.find(
(data) => data.date === dayjs().format("YYYY-MM-DD")
)?.stepSummary.totalSteps ?? "----"}{" "}
steps
</Text>
</View>
{/* TODO: display the list of prompts that are required for the quest */}
<Text className="text-white font-sans text-lg">Prompts</Text>
{route.params.quest.prompts?.map((prompt) => (
<View key={Math.random()} className="my-2">
<PromptDetails prompt={prompt} />
</View>
))}
</View>
{isSubscribed === true && (
<View className="mt-5">
<Text className="text-white font-sans text-lg">Health</Text>

{/* display the sleep data */}
<View className="flex flex-row w-full items-center justify-between rounded-md mt-2 py-5 px-4 bg-secondary-900 active:opacity-90">
<Text className="font-sans flex flex-wrap text-white text-base mr-2">
Sleep
</Text>
<Text className="font-sans text-base text-white opacity-60">
{secondsToHms(
healthDataset.find(
{/* display the steps data */}
<View className="flex flex-row w-full items-center justify-between rounded-md mt-2 py-5 px-4 bg-secondary-900 active:opacity-90">
<Text className="font-sans flex flex-wrap text-white text-base mr-2">
Steps
</Text>
<Text className="font-sans text-base text-white opacity-60">
{healthDataset.find(
(data) => data.date === dayjs().format("YYYY-MM-DD")
)?.sleepSummary.duration!
) ?? "--hrs --mins"}
</Text>
)?.stepSummary.totalSteps ?? "----"}{" "}
steps
</Text>
</View>

{/* display the sleep data */}
<View className="flex flex-row w-full items-center justify-between rounded-md mt-2 py-5 px-4 bg-secondary-900 active:opacity-90">
<Text className="font-sans flex flex-wrap text-white text-base mr-2">
Sleep
</Text>
<Text className="font-sans text-base text-white opacity-60">
{secondsToHms(
healthDataset.find(
(data) => data.date === dayjs().format("YYYY-MM-DD")
)?.sleepSummary.duration!
) ?? "-- hrs -- mins"}
</Text>
</View>

{/* sync or display health data */}
<Button
title="Sync your sleep, activity & heart rate"
fullWidth
onPress={syncHealthData}
className="flex justify-between mt-2"
rightIcon={<ChevronRight color={black} />}
/>
</View>
)}
</View>

{/* sync or display health data */}
<Button
title="Sync your sleep, activity & heart rate"
fullWidth
onPress={syncHealthData}
className="flex justify-between mt-2"
rightIcon={<ChevronRight color={black} />}
/>
</View>
{/* if the user is subscribed, show 'View Quest' */}
{/* display the procedural steps that happen after they join */}
{/* sync data, leave quest etc.. */}
{/* */}

{/* if the user is not subscribed, show 'Get Started' */}
{isSubscribed === false && (
<Button
title="Get Started"
fullWidth
className="mb-5"
onPress={addUserToQuest}
/>
)}
</View>

{/* if the user is subscribed, show 'View Quest' */}
{/* display the procedural steps that happen after they join */}
{/* sync data, leave quest etc.. */}
{/* */}

{/* if the user is not subscribed, show 'Get Started' */}
{isSubscribed === false && (
<Button
title="Get Started"
fullWidth
className="mb-5"
onPress={addUserToQuest}
/>
)}
</View>
</ScrollView>
</Screen>
);
}
133 changes: 114 additions & 19 deletions mobile/src/pages/quests.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,19 @@
import RNBottomSheet from "@gorhom/bottom-sheet";
import React from "react";
import { Text, View, Image } from "react-native";
import { useNavigation } from "@react-navigation/native";
import axios from "axios";
import Constants from "expo-constants";
import React, { useContext, useEffect, useState } from "react";
import { Text, View, Image, Pressable } from "react-native";

import { Button, Plus, Screen, JoinQuestSheet } from "~/components";
import { Prompt, Quest } from "~/@types";
import {
Button,
Plus,
Screen,
JoinQuestSheet,
VerticalMenu,
} from "~/components";
import { AccountContext } from "~/contexts";
import { colors } from "~/theme";

export function QuestsScreen() {
Expand All @@ -11,27 +22,111 @@ export function QuestsScreen() {
() => bottomSheetRef.current?.expand(),
[]
);
const accountContext = useContext(AccountContext);

const navigation = useNavigation();

const [activeQuests, setActiveQuests] = useState<Quest[]>([]);

const fetchActiveQuests = async () => {
try {
console.log(accountContext?.userApiToken);
const res = await axios.get(
`${Constants.expoConfig?.extra?.fusionBackendUrl}/api/quest/getAllActiveQuestsForUser`,
{
headers: {
Authorization: `Bearer ${accountContext?.userApiToken}`,
},
}
);

if (res.status === 200) {
console.log(res.data.quests);

res.data.quests.map((quest: Quest) => {
quest.prompts = (JSON.parse(quest.config!) as Prompt[]) || [];
});

setActiveQuests(res.data.quests);
}
} catch (error) {
console.error(error);
}
};

useEffect(() => {
// if (accountContext?.userLoading) {
// console.log("user details ready");
(async () => {
await fetchActiveQuests();
})();
// } else {
// console.error("user details still loading can't proceed");
// }
}, [accountContext?.userLoading]);

return (
<Screen>
<View className="flex flex-1 flex-col gap-7 items-center justify-center">
<Image
source={require("../../assets/group-investigation.png")}
className="w-32 h-32"
/>
<Text className="font-sans-light max-w-xs text-center text-white text-base">
Perform activites in groups and validate their impact on your
wellness!
</Text>
<Button
title="Join a Quest"
leftIcon={<Plus color={colors.dark} width={16} height={16} />}
onPress={handleExpandSheet}
className="self-center"
/>
</View>
{activeQuests.length === 0 && (
<View className="flex flex-1 flex-col gap-7 items-center justify-center">
<Image
source={require("../../assets/group-investigation.png")}
className="w-32 h-32"
/>
<Text className="font-sans-light max-w-xs text-center text-white text-base">
Perform activites in groups and validate their impact on your
wellness!
</Text>
<Button
title="Join a Quest"
leftIcon={<Plus color={colors.dark} width={16} height={16} />}
onPress={handleExpandSheet}
className="self-center"
/>
</View>
)}

{/* TODO: Display a list of quests the user is subscribed to */}
{activeQuests.length > 0 && (
<Text className="mt-5 mb-3 pl-3 font-sans-bold text-white">
My quests
</Text>
)}

{activeQuests.map((quest) => (
<Pressable
className="flex flex-row w-full items-center justify-between rounded-md py-5 px-4 bg-secondary-900 active:opacity-90 my-1"
onPress={() => {
navigation.navigate("QuestNavigator", {
screen: "QuestDetailScreen",
params: {
quest: {
title: quest.title,
description: quest.description,
guid: quest.guid,
prompts: quest.prompts,
},
},
});
}}
>
<View className="flex-1 flex-col items-start gap-y-3">
<Text
numberOfLines={2}
ellipsizeMode="tail"
className="font-sans flex flex-wrap text-white text-base mr-2"
>
{quest.title}
</Text>
</View>
<Button
variant="ghost"
className="m-0 p-0 self-center"
leftIcon={<VerticalMenu />}
onPress={() => {}}
/>
</Pressable>
))}

<JoinQuestSheet bottomSheetRef={bottomSheetRef} />
</Screen>
Expand Down
Loading

0 comments on commit 8955e1d

Please sign in to comment.