Initial bugfixes and addition of number section MainPrinciples Numbers

TritonSE · Apr 29, 2024 · efba540 · efba540
1 parent c2bd514
commit efba540
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 42 deletions.
diff --git a/dfm-sideline-sidekick-app/components/NumbersSection.tsx b/dfm-sideline-sidekick-app/components/NumbersSection.tsx
@@ -0,0 +1,23 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { Text, View } from "react-native";
+
+import styles from "./NumbersSectionStyles";
+
+type Props = {
+  property1: number;
+};
+
+export const NumbersSection = ({ property1 }: Props): JSX.Element => {
+  return (
+    <View style={styles.numbersSection}>
+      <View style={styles.numbersSectionElement}>
+        <Text style={styles.numbersSectionText}> {<>{property1}</>} </Text>
+      </View>
+    </View>
+  );
+};
+
+NumbersSection.propTypes = {
+  property1: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),
+};
diff --git a/dfm-sideline-sidekick-app/components/NumbersSectionStyles.tsx b/dfm-sideline-sidekick-app/components/NumbersSectionStyles.tsx
@@ -0,0 +1,33 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingTop: 15,
+  },
+  numbersSection: {
+    height: 50,
+    position: "relative",
+    width: 50,
+  },
+  numbersSectionElement: {
+    color: "--dfm-navy",
+    fontSize: 32,
+    fontWeight: 400,
+    left: 0,
+    letterSpacing: 0.64,
+    lineHeight: 48,
+    position: "absolute",
+    top: -1,
+    whitespace: "nowrap",
+    width: 40,
+  },
+  numbersSectionText: {
+    fontSize: 32,
+    fontWeight: "400",
+    color: "rgba(24, 43, 73, 1)",
+  },
+});
+
+export default styles;
diff --git a/dfm-sideline-sidekick-app/components/StringRenderer.tsx b/dfm-sideline-sidekick-app/components/StringRenderer.tsx
@@ -21,10 +21,6 @@ const BulletList: React.FC<{ items: string[] }> = ({ items }) => (
 );
 
 const StringRenderer: React.FC<Props> = ({ data }) => {
-  console.log(data);
-  console.log(Array.isArray(data));
-  console.log(typeof data);
-  console.log("\n");
   if (typeof data === "string") {
     return <Text style={styles.descriptionInfo}>{data}</Text>;
   } else if (Array.isArray(data) && data.every((item) => typeof item === "string")) {

diff --git a/dfm-sideline-sidekick-app/pages/MainPrinciples.tsx b/dfm-sideline-sidekick-app/pages/MainPrinciples.tsx
@@ -14,6 +14,7 @@ import {
 } from "react-native";
 import Icon from "react-native-vector-icons/Feather";
 
+import { NumbersSection } from "../components/NumbersSection";
 import { Bookmark } from "../components/bookmark";
 
 import styles from "./MainPrinciplesStyles";
@@ -123,45 +124,44 @@ export default function MainPrinciples({ route, navigation }: Props) {
       <View style={styles.topRightContainer}>
         <Bookmark item={generalPrinciple} />
       </View>
-      <ScrollView alwaysBounceHorizontal={false} contentContainerStyle={{ flexGrow: 1 }}>
-        <TouchableOpacity
-          onPress={() => {
-            navigation.goBack();
-          }}
-        >
-          {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
-          <Image style={styles.image} source={require("../assets/ic_caretleft.png")} />
-        </TouchableOpacity>
-        <View style={styles.margin}>
-          {/* <Text style={styles.subtitle}>General Principle</Text> */}
-          {generalPrinciple && <Text style={styles.title}>{generalPrinciple.title}</Text>}
-        </View>
-        <View>
-          <View style={styles.resultList}>
-            <FlatList
-              data={overviewHeaders}
-              //   keyExtractor={(item) => item._id}
-              ItemSeparatorComponent={() => <View style={styles.divider} />}
-              renderItem={({ item }) => (
-                <TouchableOpacity
-                  style={styles.listItemContainer}
-                  onPress={() => {
-                    handlePress(item);
-                  }}
-                >
-                  <View style={styles.listItemTextContainer}>
-                    <Text style={styles.listItemTitle}>{item}</Text>
-                    <Text style={styles.listItemSubtitle}>
-                      {generalPrinciple?.overview[item].subheader}
-                    </Text>
-                  </View>
-                  <Icon name="chevron-right" size={20} color="#909090" />
-                </TouchableOpacity>
-              )}
-            />
-          </View>
+      <TouchableOpacity
+        onPress={() => {
+          navigation.goBack();
+        }}
+      >
+        {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
+        <Image style={styles.image} source={require("../assets/ic_caretleft.png")} />
+      </TouchableOpacity>
+      <View style={styles.margin}>
+        {/* <Text style={styles.subtitle}>General Principle</Text> */}
+        {generalPrinciple && <Text style={styles.title}>{generalPrinciple.title}</Text>}
+      </View>
+      <View>
+        <View style={styles.resultList}>
+          <FlatList
+            data={overviewHeaders}
+            //   keyExtractor={(item) => item._id}
+            ItemSeparatorComponent={() => <View style={styles.divider} />}
+            renderItem={({ item, index }) => (
+              <TouchableOpacity
+                style={styles.listItemContainer}
+                onPress={() => {
+                  handlePress(item);
+                }}
+              >
+                <NumbersSection property1={index + 1}></NumbersSection>
+                <View style={styles.listItemTextContainer}>
+                  <Text style={styles.listItemTitle}>{item}</Text>
+                  <Text style={styles.listItemSubtitle}>
+                    {generalPrinciple?.overview[item].subheader}
+                  </Text>
+                </View>
+                <Icon name="chevron-right" size={20} color="#909090" />
+              </TouchableOpacity>
+            )}
+          />
         </View>
-      </ScrollView>
+      </View>
     </SafeAreaView>
   );
 }