Skip to content

Commit

Permalink
fix: changed placeholders and handled music error (#300)
Browse files Browse the repository at this point in the history
  • Loading branch information
@EdmelKun
EdmelKun authored Dec 17, 2023
1 parent 5133388 commit 7719e86
Show file tree
Hide file tree
Showing 12 changed files with 128 additions and 94 deletions.
Binary file added apps/expo/assets/images/no-image-cropped-placeholder.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/expo/assets/images/no-image-placeholder.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion apps/expo/src/components/cards/QuestionCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ interface QuestionCardProps {
questionIndex: number,
) => () => void;
borderType?: "success" | "error";
disabled?: boolean;
}

const QuestionCard: FC<QuestionCardProps> = ({
Expand All @@ -39,6 +40,7 @@ const QuestionCard: FC<QuestionCardProps> = ({
goToEditQuestion,
goToQuestionHistory,
borderType,
disabled = false,
}) => {
const borderStyle = match(borderType)
.with("success", () => "border-green-500")
Expand All @@ -49,6 +51,7 @@ const QuestionCard: FC<QuestionCardProps> = ({
return (
<TouchableOpacity
className="my-2 flex h-[105px] items-center justify-start"
disabled={disabled}
key={index}
onPress={match(type)
.with("create", () => goToEditQuestion?.(index))
Expand All @@ -67,7 +70,7 @@ const QuestionCard: FC<QuestionCardProps> = ({
? {
uri: question.image,
}
: require("../../../assets/images/choice-placeholder.png")
: require("../../../assets/images/no-image-cropped-placeholder.png")
}
imageStyle={{
borderTopLeftRadius: 12,
Expand Down
8 changes: 7 additions & 1 deletion apps/expo/src/components/test-details/TestDetailsContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,13 @@ const TestDetailsContent: FC<Props> = ({ testDetails }) => {
data={firstTenQuestions}
showsVerticalScrollIndicator={true}
renderItem={({ item: question, index }) => {
return <QuestionCard question={question} index={index} />;
return (
<QuestionCard
disabled={true}
question={question}
index={index}
/>
);
}}
/>
</SafeAreaView>
Expand Down
3 changes: 1 addition & 2 deletions apps/expo/src/components/view-all-display/tests/ViewAllTestDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,6 @@ export const ViewAllTestDisplay: FC<Props> = (props) => {

if (testsFor === "questions" && props.type === "questions") {
const questionsData = fetchedData as PartialQuestion[];
console.log(questionsData);
return (
<>
<QuestionsList questions={questionsData} />
Expand Down Expand Up @@ -224,7 +223,7 @@ const QuestionsList: FC<QuestionsListProps> = ({ questions }) => {
? {
uri: question.image,
}
: require("../../../../assets/images/choice-placeholder.png")
: require("../../../../assets/images/no-image-cropped-placeholder.png")
}
imageStyle={{
borderTopLeftRadius: 12,
Expand Down
130 changes: 65 additions & 65 deletions apps/expo/src/forms/CreateTestForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -628,75 +628,75 @@ const CreateTestForm: FC<Props> = ({

<View className="mb-10 h-full flex-1 flex-col">
{questions.length > 0 ? (
<View className="my-auto flex flex-row items-center justify-between">
<Text className="text-xl font-bold leading-loose text-neutral-800">
Question ({questions.length})
</Text>
<TouchableOpacity
className="flex flex-row items-center gap-1"
onPress={goToViewAllQuestions}
>
<Text className="font-nunito-bold w-70 text-right text-lg font-semibold leading-6 text-[#6949FF]">
View All
</Text>
<RightArrowIcon />
</TouchableOpacity>
</View>
) : (
<View className="h-full w-full items-center justify-evenly self-center rounded-2xl border border-zinc-100 bg-white">
<View className="mt-2">
<Foundation name="lightbulb" size={30} color="#7c3aed" />
</View>
<View className="my-2">
<Text className="font-nunito-bold self-center text-center text-lg">
Just a tip!
</Text>
<Text className="font-nunito-semibold self-center px-8 text-center text-sm">
Please create at least one (1) question to save the test!
<>
<View className="my-auto flex flex-row items-center justify-between">
<Text className="text-xl font-bold leading-loose text-neutral-800">
Question ({questions.length})
</Text>
<TouchableOpacity
className="flex flex-row items-center gap-1"
onPress={goToViewAllQuestions}
>
<Text className="font-nunito-bold w-70 text-right text-lg font-semibold leading-6 text-[#6949FF]">
View All
</Text>
<RightArrowIcon />
</TouchableOpacity>
</View>
</View>
)}

<SafeAreaView className="min-h-full flex-1">
{isLoading ? (
<View className="h-[50%] w-full flex-col justify-between self-center">
<View className="my-7">
<SkeletonLoader
isCircular={true}
width={"100%"}
height={75}
/>
<SafeAreaView className="min-h-full flex-1">
<FlashList
estimatedItemSize={10}
data={readyQuestions}
showsVerticalScrollIndicator={true}
renderItem={({ item: question, index }) => {
return (
<QuestionCard
question={question}
index={index}
goToEditQuestion={goToEditQuestion}
/>
);
}}
/>
</SafeAreaView>
</>
) : (
<>
{isLoading ? (
<View className="h-[50%] w-full flex-col justify-between self-center">
<View className="my-7">
<SkeletonLoader
isCircular={true}
width={"100%"}
height={75}
/>
</View>
<View className="my-7">
<SkeletonLoader
isCircular={true}
width={"100%"}
height={75}
/>
</View>
</View>
<View className="my-7">
<SkeletonLoader
isCircular={true}
width={"100%"}
height={75}
/>
) : (
<View className="h-full w-full items-center justify-evenly self-center rounded-2xl border border-zinc-100 bg-white">
<View className="mt-2">
<Foundation name="lightbulb" size={30} color="#7c3aed" />
</View>
<View className="my-2">
<Text className="font-nunito-bold self-center text-center text-lg">
Just a tip!
</Text>
<Text className="font-nunito-semibold self-center px-8 text-center text-sm">
Please create at least one (1) question to save the
test!
</Text>
</View>
</View>
</View>
) : (
<>
{questions.length > 0 && (
<FlashList
estimatedItemSize={10}
data={readyQuestions}
showsVerticalScrollIndicator={true}
renderItem={({ item: question, index }) => {
return (
<QuestionCard
question={question}
index={index}
goToEditQuestion={goToEditQuestion}
/>
);
}}
/>
)}
</>
)}
</SafeAreaView>
)}
</>
)}
</View>

<View className="mb-24 flex flex-row items-center justify-between">
Expand Down
21 changes: 12 additions & 9 deletions apps/expo/src/screens/create-question/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ import {
Modal,
TouchableWithoutFeedback,
Switch,
Image,
StyleSheet,
Dimensions,
ImageBackground,
} from "react-native";
import useGoBack from "../../hooks/useGoBack";
import TestImagePicker from "../../components/ImagePicker";
Expand Down Expand Up @@ -975,22 +975,25 @@ export const CreateQuestionScreen: FC = () => {
onPress={handleClickQuestion(idx)}
>
{question.image ? (
<Image
<ImageBackground
source={{ uri: question.image }}
className={`absolute left-0 top-0 h-[58px] w-24 rounded-lg ${
resizeMode="cover"
className={`absolute left-0 top-0 h-[58px] w-24 overflow-hidden rounded-lg ${
idx === selectedIndex
? "border-4 border-violet-600"
: "border border-violet-600"
: "border border-zinc-400"
}`}
/>
) : (
<View
className={`absolute left-0 top-0 h-[58px] w-24 rounded-lg ${
<ImageBackground
source={require("../../../assets/images/no-image-placeholder.png")}
resizeMode="contain"
className={`absolute h-[58px] w-24 overflow-hidden rounded-lg ${
idx === selectedIndex
? "border-4 border-violet-600"
: "border border-violet-600"
} bg-neutral-100`}
></View>
: "border border-zinc-400"
} `}
/>
)}
<View className="absolute left-0 top-0 inline-flex h-8 w-8 flex-col items-center justify-center rounded-br-lg border border-violet-600 bg-violet-600 p-1">
<Text className="text-center text-[10px] font-bold text-white">
Expand Down
12 changes: 10 additions & 2 deletions apps/expo/src/screens/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ export const HomeScreen = () => {
const isMusicPlaying = useMusicStore((state) => state.isMusicPlaying);
const isPlayTestScreen = useMusicStore((state) => state.isPlayTestScreen);
const isScoreboardScreen = useMusicStore((state) => state.isScoreboardScreen);
const isTestHistoryScreen = useMusicStore(
(state) => state.isTestHistoryScreen,
);

const generalMusicInstance = new Audio.Sound();

Expand All @@ -34,15 +37,20 @@ export const HomeScreen = () => {

useEffect(() => {
if (isMusicPlaying) {
if (!isPlayTestScreen && !isScoreboardScreen) {
if (!isPlayTestScreen && !isScoreboardScreen && !isTestHistoryScreen) {
playSound({ music: bgMusic, sound: generalMusicInstance });
}
}

return () => {
unloadAudio({ sound: generalMusicInstance });
};
}, [isMusicPlaying, isPlayTestScreen, isScoreboardScreen]);
}, [
isMusicPlaying,
isPlayTestScreen,
isScoreboardScreen,
isTestHistoryScreen,
]);

return (
<SafeAreaView style={{ flex: 1, height: height, width: width }}>
Expand Down
8 changes: 5 additions & 3 deletions apps/expo/src/screens/play-test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export const PlayTestScreen: FC<RootStackScreenProps<"PlayTest">> = ({
const setIsPlayTestScreen = useMusicStore(
(state) => state.setIsPlayTestScreen,
);
const setIsTestHistoryScreen = useMusicStore((state) => state.setIsTestHistoryScreen);

const correctSoundInstance = new Audio.Sound();
const wrongSoundInstance = new Audio.Sound();
Expand Down Expand Up @@ -107,10 +108,11 @@ export const PlayTestScreen: FC<RootStackScreenProps<"PlayTest">> = ({
const [shouldMultiplyScore, setShouldMultiplyScore] = useState(false);
const [scoreMultiplier, setScoreMultiplier] = useState(1);

const { data: testDetails } = trpc.play.getTest.useQuery({ testId });
const { data: testDetails, isLoading: isFetching } = trpc.play.getTest.useQuery({ testId });
const { mutate: saveTestHistory, isLoading: isSavingTestHistory } =
trpc.testHistory.createTestHistory.useMutation({
onSuccess: (testHistoryId) => {
setIsTestHistoryScreen(true)
navigation.navigate("TestHistory", {
playId,
historyId: testHistoryId,
Expand All @@ -131,7 +133,7 @@ export const PlayTestScreen: FC<RootStackScreenProps<"PlayTest">> = ({
useEffect(() => {
if (isFocused) {
setIsPlayTestScreen(true);
if (isMusicPlaying && testDetails) {
if (isMusicPlaying && testDetails && !isFetching) {
playSound({ sound: gameMusicInstance, music: gameMusic });
}
} else {
Expand All @@ -141,7 +143,7 @@ export const PlayTestScreen: FC<RootStackScreenProps<"PlayTest">> = ({
return () => {
unloadAudio({ sound: gameMusicInstance });
};
}, [isMusicPlaying, testDetails, isFocused]);
}, [isMusicPlaying, testDetails, isFocused, isFetching]);

useEffect(() => {
const questions = testDetails?.test.questions;
Expand Down
23 changes: 12 additions & 11 deletions apps/expo/src/screens/scoreboard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,21 @@ export const ScoreboardScreen: FC<RootStackScreenProps<"Scoreboard">> = ({
};

const goToLibrary = () => {
setIsScoreboardScreen(false);
navigation.navigate("MyLibrary");
};

useEffect(() => {
if (isFocused) {
setIsScoreboardScreen(true);
if (isEffectsPlaying && _topTrekersList) {
playEffects({ sound: congratsInstance, music: congrats });
}
} else {
setIsScoreboardScreen(false);
}
}, [isEffectsPlaying, isFocused, _topTrekersList]);

useEffect(() => {
setIsShowingConfetti(true);
setTimeout(() => {
Expand All @@ -74,17 +86,6 @@ export const ScoreboardScreen: FC<RootStackScreenProps<"Scoreboard">> = ({
return () => backHandler.remove();
}, []);

useEffect(() => {
if (isFocused) {
setIsScoreboardScreen(true);
if (isEffectsPlaying && _topTrekersList) {
playEffects({ sound: congratsInstance, music: congrats });
}
} else {
setIsScoreboardScreen(false);
}
}, [isEffectsPlaying, isFocused]);

if (!playTest || !_topTrekersList) {
return <></>;
}
Expand Down
8 changes: 8 additions & 0 deletions apps/expo/src/screens/test-history/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { SkeletonLoader } from "../../components/loaders/SkeletonLoader";
import { AlertModal } from "../../components/modals/AlertModal";
import BadgeOverlay from "../../components/AcquiredBadgeOverlay";
import { IMAGE_PLACEHOLDER } from "../../constants";
import { useMusicStore } from "../../stores/useMusicStore";

const screenWidth = Dimensions.get("window").width;
const screenHeight = Dimensions.get("window").height;
Expand All @@ -34,6 +35,10 @@ export const TestHistoryScreen: FC<TestHistoryProps> = ({
});

const { data: newBadge } = trpc.user.getNewBadges.useQuery();
const setIsTestHistoryScreen = useMusicStore(
(state) => state.setIsTestHistoryScreen,
);
const setIsScoreboardScreen = useMusicStore((state) => state.setIsScoreboardScreen);

const [openHomeAlert, setOpenHomeAlert] = useState(false);
const [showBadgeOverlay, setShowBadgeOverlay] = useState(false);
Expand Down Expand Up @@ -82,6 +87,8 @@ export const TestHistoryScreen: FC<TestHistoryProps> = ({

const goToScoreBoard = () => {
if (!testId) return;
setIsTestHistoryScreen(false);
setIsScoreboardScreen(true);
navigation.navigate("Scoreboard", {
playId,
testId,
Expand Down Expand Up @@ -264,6 +271,7 @@ export const TestHistoryScreen: FC<TestHistoryProps> = ({
setOpenHomeAlert(false);
}}
onConfirm={() => {
setIsTestHistoryScreen(false);
navigation.navigate("Home");
}}
/>
Expand Down
Loading

1 comment on commit 7719e86

@vercel
Copy link

@vercel vercel bot commented on 7719e86 Dec 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

test-trek-test – ./apps/nextjs

test-trek-test-git-main-dadili.vercel.app
test-trek-test-dadili.vercel.app
test-trek-test.vercel.app

Please sign in to comment.