Code Formatting

screens/SidebarPage.js

@@ -5,52 +5,51 @@ import {
   Text,
   UIManager,
   View,
-  ScrollView
+  ScrollView,
 } from 'react-native';
-import React, { useState } from 'react';
+import React, {useState} from 'react';
 import NewscoutLogo from '../components/molecules/NewscoutLogo';
 import fonts from '../theme/fonts';
 import CircularPrimaryBackButton from '../components/organisms/Buttons/CircularPrimaryBackButton';
-import { List } from 'react-native-paper';
+import {List} from 'react-native-paper';
 import colors from '../theme/colors';
-import EntypoIcon from 'react-native-vector-icons/Entypo'
+import EntypoIcon from 'react-native-vector-icons/Entypo';
 import metrics from '../theme/metrics';
 
-
 const data = [
   {
     title: 'Sector Update',
-    icon: "area-graph",
+    icon: 'area-graph',
     subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
   },
   {
     title: 'Regional Update',
-    icon: "network",
+    icon: 'network',
     subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
   },
   {
     title: 'Finance',
-    icon: "database",
+    icon: 'database',
     subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
   },
   {
     title: 'Economic',
-    icon: "line-graph",
+    icon: 'line-graph',
     subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
   },
   {
     title: 'Miscellaneous',
-    icon: "documents",
+    icon: 'documents',
     subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
   },
   {
     title: 'RSS',
-    icon: "rss",
+    icon: 'rss',
     subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
   },
 ];
 
-const SidebarPage = ({ navigation }) => {
+const SidebarPage = ({navigation}) => {
   if (
     Platform.OS === 'android' &&
     UIManager.setLayoutAnimationEnabledExperimental
@@ -58,8 +57,6 @@ const SidebarPage = ({ navigation }) => {
     UIManager.setLayoutAnimationEnabledExperimental(true);
   }
 
-
-
   // const [isExpanded, setExpanded] = useState(
   //   data.map((item) => {
   //     return {
@@ -74,7 +71,7 @@ const SidebarPage = ({ navigation }) => {
 
   const [expandedId, setExpandedId] = React.useState('');
 
-  const handleAccordionPress = (accordionId) => {
+  const handleAccordionPress = accordionId => {
     setExpandedId(accordionId === expandedId ? '' : accordionId);
   };
 
@@ -91,16 +88,28 @@ const SidebarPage = ({ navigation }) => {
         <View style={styles.accordionContainer}>
           <List.AccordionGroup
             expandedId={expandedId}
-            onAccordionPress={handleAccordionPress}
-          >
+            onAccordionPress={handleAccordionPress}>
             {data.map(item => {
-              let acc_check = item.title.toLowerCase()
+              let acc_check = item.title.toLowerCase();
               return (
                 <List.Accordion
                   key={acc_check}
                   id={acc_check}
-                  style={[styles.accordionStyle, acc_check === expandedId && { backgroundColor: colors.tertiaryColor, borderColor: colors.tertiaryColor }]}
-                  titleStyle={[, styles.accordionTextStyle, acc_check === expandedId && { color: colors.white, fontFamily: fonts.type.semibold, }]}
+                  style={[
+                    styles.accordionStyle,
+                    acc_check === expandedId && {
+                      backgroundColor: colors.tertiaryColor,
+                      borderColor: colors.tertiaryColor,
+                    },
+                  ]}
+                  titleStyle={[
+                    ,
+                    styles.accordionTextStyle,
+                    acc_check === expandedId && {
+                      color: colors.white,
+                      fontFamily: fonts.type.semibold,
+                    },
+                  ]}
                   onPress={() => {
                     // setExpandedsetIsShowingText(!isShowingText);
                     // LayoutAnimation.configureNext(
@@ -109,12 +118,31 @@ const SidebarPage = ({ navigation }) => {
                     // const nextState = { ...isExpanded };
                     // nextState[item.title] = !nextState[item.title];
                     //console.log("set state changes");
-
                   }}
-                  left={() => <View style={{ paddingLeft: 16, }}><EntypoIcon name={item.icon} size={24} color={acc_check === expandedId ? colors.white : colors.black} /></View>}
-                  right={() => <EntypoIcon name={acc_check === expandedId ? "chevron-up" : "chevron-down"} size={12} color={acc_check === expandedId ? colors.white : colors.black} />}
+                  left={() => (
+                    <View style={{paddingLeft: 16}}>
+                      <EntypoIcon
+                        name={item.icon}
+                        size={24}
+                        color={
+                          acc_check === expandedId ? colors.white : colors.black
+                        }
+                      />
+                    </View>
+                  )}
+                  right={() => (
+                    <EntypoIcon
+                      name={
+                        acc_check === expandedId ? 'chevron-up' : 'chevron-down'
+                      }
+                      size={12}
+                      color={
+                        acc_check === expandedId ? colors.white : colors.black
+                      }
+                    />
+                  )}
                   title={item.title}>
-                  {item.subTitles.map((subTitle) => (
+                  {item.subTitles.map(subTitle => (
                     <List.Item
                       key={`${item.title}_${subTitle}`}
                       // key={`${item.title}_${item.subTitles.indexOf(subTitle)}`}
@@ -125,12 +153,11 @@ const SidebarPage = ({ navigation }) => {
                     />
                   ))}
                 </List.Accordion>
-              )
+              );
             })}
           </List.AccordionGroup>
         </View>
       </ScrollView>
-
     </View>
   );
 };
@@ -153,7 +180,7 @@ const styles = StyleSheet.create({
   accordionContainer: {
     paddingVertical: fonts.getSize(16),
     gap: fonts.getSize(8),
-    height:"100%"
+    height: '100%',
   },
   accordionStyle: {
     backgroundColor: colors.white,
@@ -162,5 +189,5 @@ const styles = StyleSheet.create({
     borderColor: colors.lightGray,
     maxHeight: fonts.getSize(56),
   },
-  accordionTextStyle: { fontFamily: fonts.type.medium },
+  accordionTextStyle: {fontFamily: fonts.type.medium},
 });