Skip to content

Commit

Permalink
Reworking Drill Screens to be Componentized (#140)
Browse files Browse the repository at this point in the history 
* DrillList has been componentized for main drill list and profile view to be sectioned off

* Moved glyphs to be in section header instead of drill card

* Drlll Description componentized for description screen and description modal and deleted image carousel

* ran yarn pretty

* slight optimization to getUnique

* Removed prettyDrillType and modified drillType

---------

Co-authored-by: Frankreed <baoanhtdn@gmail.com>
  • Loading branch information
@hannacol @FrankreedX
hannacol and FrankreedX authored Apr 11, 2024
1 parent f93ca2e commit fce84f7
Show file tree
Hide file tree
Showing 12 changed files with 335 additions and 376 deletions.
14 changes: 6 additions & 8 deletions Utility.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,13 @@ export function numTrunc(value, pad = false) {
}
}

export function getUnique(array, field) {
const uniqueMap = new Map();
array.forEach((element) => {
const keyValue = element[field];
if (!uniqueMap.has(keyValue)) {
uniqueMap.set(keyValue, element);
}
export function getUnique(array, field, drills) {
const unique = [];
drills.forEach((drillInfo) => {
const idx = array.findIndex((item) => item["did"] === drillInfo["did"]);
if (idx >= 0) unique.push(drills[idx]);
});
return Array.from(uniqueMap.values());
return unique;
}

export function calculateAverageProxToHole(drillSubmissions) {
Expand Down
128 changes: 3 additions & 125 deletions app/content/drill/[id]/description.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,7 @@
import { Link, useLocalSearchParams } from "expo-router";
import { useState } from "react";
import {
Dimensions,
Image,
Modal,
ScrollView,
TouchableOpacity,
View,
} from "react-native";
import { Button, Text } from "react-native-paper";
import Carousel from "react-native-reanimated-carousel";
import { Button } from "react-native-paper";

import DrillDescription from "~/components/drillDescription";
import ErrorComponent from "~/components/errorComponent";
import Loading from "~/components/loading";
import { useDrillInfo } from "~/hooks/useDrillInfo";
Expand All @@ -19,53 +10,6 @@ export default function Description() {
const drillId = useLocalSearchParams()["id"];
const assignedTime = useLocalSearchParams()["assignedTime"];

// console.log("WAS IT ASSIGNED2", assignedTime);

const [activeIndex, setActiveIndex] = useState(0);
const [modalVisible, setModalVisible] = useState(false);

const openModal = (index) => {
setActiveIndex(index);
setModalVisible(true);
};

const closeModal = () => {
setModalVisible(false);
};

const loadCarousel = () => {
return (
<Carousel
width={windowWidth}
height={windowHeight}
data={images}
defaultIndex={activeIndex}
scrollAnimationDuration={300}
renderItem={({ item }) => (
<View
style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
>
<Image
style={{
width: "100%",
height: "100%",
}}
resizeMode="contain"
source={item}
/>
</View>
)}
/>
);
};

const images = [];

const hasImages = !!images.length;

const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;

const {
data: drillInfo,
error: drillInfoError,
Expand All @@ -78,73 +22,7 @@ export default function Description() {

return (
<>
<View
style={{ margin: 10, position: "relative", height: windowHeight - 150 }}
>
<ScrollView>
<Text style={{ paddingBottom: 10 }} variant="headlineLarge">
Description
</Text>
<Text variant="bodySmall">{drillInfo["description"]}</Text>
{hasImages && (
<View style={{ marginTop: 10 }}>
<View
style={{
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "space-between",
}}
>
{images.map((image, index) => (
<TouchableOpacity
key={index}
onPress={() => openModal(index)}
>
<Image
style={{
width: windowWidth / 3 - 10,
height: windowWidth / 3 - 10,
marginBottom: 15,
}}
source={image}
/>
</TouchableOpacity>
))}
</View>
</View>
)}
</ScrollView>

<Modal
animationType="slide"
transparent={false}
visible={modalVisible}
onRequestClose={closeModal}
>
<View
style={{
flex: 1,
backgroundColor: "black",
alignItems: "center",
justifyContent: "center",
}}
>
<TouchableOpacity
style={{
padding: 20,
position: "absolute",
top: 20,
left: 20,
zIndex: 10,
}}
onPress={closeModal}
>
<Text style={{ color: "white", fontSize: 18 }}>Close</Text>
</TouchableOpacity>
{loadCarousel()}
</View>
</Modal>
</View>
<DrillDescription drillData={drillInfo} />
<Link
href={{
pathname: `/segments/drill/${drillId}/submission`,
Expand Down
53 changes: 8 additions & 45 deletions app/content/drill/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Link, useNavigation } from "expo-router";
import { ScrollView, StyleSheet } from "react-native";
import { Appbar, List, PaperProvider } from "react-native-paper";
import { useNavigation } from "expo-router";
import { StyleSheet } from "react-native";
import { Appbar, PaperProvider } from "react-native-paper";
import { SafeAreaView } from "react-native-safe-area-context";

import DrillList from "~/components/drillList";
import ErrorComponent from "~/components/errorComponent";
import Loading from "~/components/loading";
import { useDrillInfo } from "~/hooks/useDrillInfo";
import { getCombinedDrillTitle } from "~/Utility";

export default function Index() {
const navigation = useNavigation();
Expand All @@ -25,54 +25,17 @@ export default function Index() {
return <ErrorComponent message={drillInfoError} />;
}

const drills = Object.values(drillInfo);

drills.sort((a, b) => {
const titleA = getCombinedDrillTitle(a).toUpperCase();
const titleB = getCombinedDrillTitle(b).toUpperCase();
if (titleA < titleB) {
return -1;
}
if (titleA > titleB) {
return 1;
}
return 0;
});

return (
<PaperProvider>
<SafeAreaView>
<Appbar.Header statusBarHeight={0} style={{ backgroundColor: "FFF" }}>
<Appbar.Content title="Drills" />
</Appbar.Header>

<ScrollView contentContainerStyle={styles.scrollView}>
<List.Section>
{Object.values(drills).map((drill) => (
<Link
key={drill.did}
href={{
pathname: `/content/drill/${drill.did}`,
params: { id: drill.did },
}}
style={{ paddingVertical: 8 }}
>
<List.Item
title={getCombinedDrillTitle(drill)}
description={drill.description}
titleStyle={styles.title}
descriptionStyle={styles.description}
left={() => (
<List.Icon
icon="file-document-outline" /*TODO: pick a better icon*/
/>
)}
style={styles.item}
/>
</Link>
))}
</List.Section>
</ScrollView>
<DrillList
drillData={Object.values(drillInfo)}
href={"content/drill/"}
/>
</SafeAreaView>
</PaperProvider>
);
Expand Down
2 changes: 1 addition & 1 deletion app/content/plan/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ const DrillList = () => {
}}
>
<Text style={{ fontSize: 20 }}>
{drillInfo[assignment.drillId]["prettyDrillType"]}
{drillInfo[assignment.drillId]["drillType"]}
</Text>
<Text style={{ fontSize: 17, fontStyle: "italic" }}>
{drillInfo[assignment.drillId]["subType"]}
Expand Down
Loading

0 comments on commit fce84f7

Please sign in to comment.