add activity indicator to period details modal and adjust styling to make it visible

README.md

@@ -34,31 +34,13 @@ or clone it with HTTPS
 
     git clone https://gitlab.com/bloodyhealth/drip.git
 
-### 2. Node version
+### 2. Node & yarn version
 
 Make sure you are running Node 14 and classic yarn (v.1). It's easiest to switch Node versions using `nvm`, here's how to install NVM: https://github.com/nvm-sh/nvm#installing-and-updating. After installing nvm close the terminal and open it again to be able to use nvm.
 Once you have nvm running you can install node 14:
 
     nvm install v14.19.3
 
-#### On Apple Silicon M1
-
-NodeJS 14 does not compile on the M1 architecture, so it has to be installed through Rosetta: https://devzilla.io/using-nodejs-14-with-mac-silicon-m1 . 
-To activate Rosetta and switch to intel emulation run: 
-
-    arch -x86_64 zsh
-
-Run 
-
-    arch 
-
-again to verify that it returns "i386".
-Now install node 14:
-
-    nvm install v14.19.3
-
-### 3. Yarn version
-
 use npm to install yarn:
 
     npm install --global yarn
@@ -145,18 +127,6 @@ iii. If you are building the app with XCode make sure you are running this as we
 
 ### Troubleshooting
 
-#### [MacOS M1] Flipper problems
-
-If a bug in the currently used Flipper version prevents building the project, comment out the respective line in the podfile, like so:
-
-    #use_flipper!()
-
-Run 
-
-    pod install 
-
-from the ios directory again to reload the dependencies.
-
 #### [MacOS] Java problems
 
 Make sure that you have Java 1.8 by running `java -version`.

components/chart/loading-more.js

@@ -18,7 +18,7 @@ LoadingMoreView.propTypes = {
 
 const styles = StyleSheet.create({
   loadingContainer: {
-    height: '100%',
+    height: 80,
     backgroundColor: Colors.turquoiseLight,
     justifyContent: 'center',
   },

components/cycle-day/symptom-box.js

@@ -64,7 +64,7 @@ const SymptomBox = ({
         <View style={styles.textContainer}>
           <AppText style={symptomNameStyle}>{t(symptom)}</AppText>
           {symptomDataToDisplay && (
-            <AppText style={textStyle} numberOfLines={3}>
+            <AppText style={textStyle} numberOfLines={4}>
               {symptomDataToDisplay}
             </AppText>
           )}

components/cycle-day/symptom-edit-view.js

@@ -1,12 +1,6 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import {
-  Dimensions,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  View,
-} from 'react-native'
+import { ScrollView, StyleSheet, View } from 'react-native'
 
 import AppModal from '../common/app-modal'
 import AppSwitch from '../common/app-switch'
@@ -117,12 +111,9 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
   const noteText = symptom === 'note' ? data.value : data.note
   const inputProps = {
     multiline: true,
-    numberOfLines: Platform.OS === 'ios' ? null : 4, // only Android
-    minHeight: Platform.OS === 'ios' ? styles.input.height : null,
-    maxHeight:
-      Platform.OS === 'ios' ? Dimensions.get('window').height * 0.4 : null,
-    style: symptom === 'note' ? null : styles.input, // overwrites previous 2 lines to fix note space in symptoms
-    scrollEnabled: true,
+    numberOfLines: 3,
+    scrollEnabled: false,
+    style: styles.input,
     textAlignVertical: 'top',
   }
 

components/stats/PeriodDetailsModal.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { FlatList, StyleSheet, View } from 'react-native'
 import PropTypes from 'prop-types'
 import { useTranslation } from 'react-i18next'
@@ -9,6 +9,7 @@ import AppText from '../common/app-text'
 import cycleModule from '../../lib/cycle'
 import { Spacing, Typography, Colors } from '../../styles'
 import { humanizeDate } from '../helpers/format-date'
+import LoadingMoreView from '../chart/loading-more'
 
 const Item = ({ data }) => {
   const { t } = useTranslation(null, { keyPrefix: 'plurals' })
@@ -39,21 +40,36 @@ Item.propTypes = {
 const PeriodDetailsModal = ({ onClose }) => {
   const renderItem = ({ item }) => <Item data={item} />
   const data = cycleModule().getStats()
+  const [endReached, setEndReached] = useState(false)
 
   if (!data || data.length === 0) return false
 
+  // const ITEM_HEIGHT = 50;
+  
+  // const getItemLayout = (data, index) => ({
+  //   length: ITEM_HEIGHT,
+  //   offset: ITEM_HEIGHT * index,
+  //   index
+  // });
+
   return (
     <AppModal onClose={onClose}>
       <View>
         <FlatList
           data={data}
           renderItem={renderItem}
+          // getItemLayout={getItemLayout} 
           keyExtractor={(item) => item.date}
           ItemSeparatorComponent={ItemDivider}
           ListHeaderComponent={FlatListHeader}
           ListHeaderComponentStyle={styles.headerDivider}
           stickyHeaderIndices={[0]}
+          windowSize={4}
           contentContainerStyle={styles.container}
+          onEndReached={() => setEndReached(true)}
+          onEndReachedThreshold={0.1}
+          ListFooterComponent={<LoadingMoreView end={endReached} />}
+          updateCellsBatchingPeriod={100}
         />
       </View>
     </AppModal>