Merge pull request #38 from victorbalssa/version/0.2.4

Version/0.2.4
victorbalssa · Aug 31, 2022 · 8f94448 · 8f94448
2 parents c2b01d6 + 8c87b63
commit 8f94448
Show file tree

Hide file tree

Showing 17 changed files with 702 additions and 388 deletions.
diff --git a/app.json b/app.json
@@ -7,7 +7,7 @@
     "platforms": [
       "ios"
     ],
-    "version": "0.2.3",
+    "version": "0.2.4",
     "orientation": "portrait",
     "icon": "./src/images/icon-abacus.png",
     "splash": {
@@ -20,7 +20,7 @@
       "url": "https://u.expo.dev/292ed6dc-804c-4444-95f5-fa5d76d9913b"
     },
     "ios": {
-      "buildNumber": "0.2.3",
+      "buildNumber": "0.2.4",
       "bundleIdentifier": "abacus.ios.app",
       "infoPlist": {
         "NSFaceIDUsageDescription": "Abacus use Authentication with TouchId or FaceID"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "abacus",
   "homepage": "https://github.com/victorbalssa/abacus",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": true,
   "jest": {
     "preset": "jest-expo",
@@ -40,7 +40,7 @@
     "expo-secure-store": "~11.3.0",
     "expo-splash-screen": "~0.16.1",
     "expo-status-bar": "~1.4.0",
-    "expo-updates": "~0.14.4",
+    "expo-updates": "~0.14.5",
     "expo-web-browser": "~11.0.0",
     "globally": "^0.0.0",
     "lodash": "^4.17.21",
@@ -50,7 +50,7 @@
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-helmet": "^5.2.1",
-    "react-native": "0.69.4",
+    "react-native": "0.69.5",
     "react-native-animated-splash-screen": "^2.0.5",
     "react-native-gesture-handler": "~2.5.0",
     "react-native-modal": "^11.5.6",

diff --git a/src/components/Chart.tsx b/src/components/Chart.tsx
@@ -3,6 +3,7 @@ import {
   ScrollView,
 } from 'native-base';
 import { View } from 'react-native';
+import Animated, { Layout } from 'react-native-reanimated';
 import AssetsHistoryChart from './Charts/AssetsHistoryChart';
 import RangeTitle from './UI/RangeTitle';
 
@@ -17,21 +18,23 @@ const Chart = ({
 }) => (
   <>
     <RangeTitle />
-    <ScrollView
-      p={2}
-      bounces={false}
-    >
-      <AssetsHistoryChart
-        loading={loading}
-        fetchData={fetchData}
-        start={start}
-        end={end}
-        accounts={accounts}
-        filterData={filterData}
-        backendURL={backendURL}
-      />
-      <View style={{ height: 100 }} />
-    </ScrollView>
+    <Animated.View style={{ flex: 1 }} layout={Layout}>
+      <ScrollView
+        p={2}
+        bounces={false}
+      >
+        <AssetsHistoryChart
+          loading={loading}
+          fetchData={fetchData}
+          start={start}
+          end={end}
+          accounts={accounts}
+          filterData={filterData}
+          backendURL={backendURL}
+        />
+        <View style={{ height: 100 }} />
+      </ScrollView>
+    </Animated.View>
   </>
 );
 

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
@@ -7,197 +7,97 @@ import {
   HStack,
   Text,
   VStack,
-  ScrollView,
+  ScrollView, Heading, Box, Switch, AlertDialog, Button,
 } from 'native-base';
+import Animated, { Layout, SlideInUp, SlideOutUp } from 'react-native-reanimated';
+
+import * as Linking from 'expo-linking';
+import { AntDesign } from '@expo/vector-icons';
+import * as Application from 'expo-application';
 import colors from '../constants/colors';
 import RangeTitle from './UI/RangeTitle';
+import CurrencySwitcher from './UI/CurrencySwitcher';
 
 const Home = ({
-  loading,
+  accounts,
   netWorth,
-  spent,
-  earned,
   balance,
   fetchData,
 }) => (
   <>
     <RangeTitle />
-    <ScrollView
-      p={3}
-      shadow={3}
-      _contentContainerStyle={{
-        alignItems: 'center',
-      }}
-      refreshControl={(
-        <RefreshControl
-          refreshing={loading}
-          onRefresh={fetchData}
-          tintColor={colors.brandStyle}
-        />
+    <Animated.View layout={Layout}>
+      {netWorth && netWorth[0] && (
+      <VStack pt={4} alignItems="center">
+        <Text style={{
+          fontSize: 27,
+          lineHeight: 30,
+          fontFamily: 'Montserrat_Bold',
+        }}
+        >
+          {netWorth[0].value_parsed}
+        </Text>
+        <Text style={{
+          fontSize: 12,
+          fontFamily: 'Montserrat_Light',
+          color: 'gray',
+        }}
+        >
+          {netWorth[0].title}
+        </Text>
+      </VStack>
       )}
-    >
-      <HStack flexWrap="wrap" justifyContent="center" alignItems="center">
-        {netWorth.map((nw) => (
-          <VStack
-            minW={165}
-            key={nw.title}
-            height={65}
-            margin={1}
-            padding={3}
-            bg={{
-              linearGradient: {
-                colors: [colors.brandStyle, colors.brandStyleSecond],
-                start: [1, 0],
-                end: [0, 1],
-              },
-            }}
-            rounded="15"
-            justifyContent="flex-start"
-            alignItems="flex-start"
-          >
-            <Text style={{
-              fontSize: 20,
-              fontFamily: 'Montserrat_Bold',
-              color: 'white',
-              textAlign: 'center',
-            }}
-            >
-              {nw.value_parsed}
-            </Text>
-            <Text style={{
-              fontSize: 14,
-              fontFamily: 'Montserrat',
-              color: 'white',
-              textAlign: 'center',
-            }}
-            >
-              {nw.title}
-            </Text>
-          </VStack>
-        ))}
-      </HStack>
-      <HStack flexWrap="wrap" justifyContent="center" alignItems="center">
-        {spent.map((s) => (
-          <VStack
-            minW={165}
-            key={s.title}
-            height={65}
-            margin={1}
-            padding={3}
-            bg={{
-              linearGradient: {
-                colors: [colors.brandStyle1, colors.brandStyle1],
-                start: [1, 0],
-                end: [0, 1],
-              },
-            }}
-            rounded="15"
-            justifyContent="flex-start"
-            alignItems="flex-start"
-          >
-            <Text style={{
-              fontSize: 20,
-              fontFamily: 'Montserrat_Bold',
-              color: 'white',
-              textAlign: 'center',
-            }}
-            >
-              {s.value_parsed}
-            </Text>
-            <Text style={{
-              fontSize: 14,
-              fontFamily: 'Montserrat',
-              color: 'white',
-              textAlign: 'center',
-            }}
-            >
-              {s.title}
-            </Text>
-          </VStack>
-        ))}
-      </HStack>
-      <HStack flexWrap="wrap" justifyContent="center" alignItems="center">
-        {balance.map((s) => (
-          <VStack
-            minW={165}
-            key={s.title}
-            height={65}
-            margin={1}
-            padding={3}
-            bg={{
-              linearGradient: {
-                colors: [colors.brandStyle2, colors.brandStyle2],
-                start: [1, 0],
-                end: [0, 1],
-              },
-            }}
-            rounded="15"
-            justifyContent="flex-start"
-            alignItems="flex-start"
-          >
-            <Text style={{
-              fontSize: 20,
-              fontFamily: 'Montserrat_Bold',
-              color: 'white',
-              textAlign: 'center',
-            }}
-            >
-              {s.value_parsed}
-            </Text>
-            <Text style={{
-              fontSize: 14,
-              fontFamily: 'Montserrat',
-              color: 'white',
-              textAlign: 'center',
-            }}
-            >
-              {s.title}
-            </Text>
-          </VStack>
-        ))}
-      </HStack>
-      <HStack flexWrap="wrap" justifyContent="center" alignItems="center">
-        {earned.map((s) => (
-          <VStack
-            minW={165}
-            key={s.title}
-            height={65}
-            margin={1}
-            padding={3}
-            bg={{
-              linearGradient: {
-                colors: [colors.brandStyle3, colors.brandStyle3],
-                start: [1, 0],
-                end: [0, 1],
-              },
-            }}
-            rounded="15"
-            justifyContent="flex-start"
-            alignItems="flex-start"
+
+      {balance && balance[0] && (
+      <VStack p={1} justifyContent="center" alignItems="center">
+        <Box style={{
+          backgroundColor: balance[0].monetary_value < 0 ? colors.brandDangerLight : colors.brandSuccessLight,
+          borderColor: balance[0].monetary_value < 0 ? colors.brandDangerLight : colors.brandSuccessLight,
+          borderRadius: 15,
+          borderRightWidth: 6,
+          borderLeftWidth: 6,
+        }}
+        >
+          <Text style={{
+            fontSize: 13,
+            fontFamily: 'Montserrat_Bold',
+            textAlign: 'center',
+            color: balance[0].monetary_value < 0 ? colors.brandDanger : colors.brandStyle3,
+          }}
           >
-            <Text style={{
-              fontSize: 20,
-              fontFamily: 'Montserrat_Bold',
-              color: 'white',
-              textAlign: 'center',
-            }}
-            >
-              {s.value_parsed}
-            </Text>
-            <Text style={{
-              fontSize: 14,
-              fontFamily: 'Montserrat',
-              color: 'white',
-              textAlign: 'center',
-            }}
-            >
-              {s.title}
-            </Text>
-          </VStack>
-        ))}
-      </HStack>
-      <View style={{ height: 100 }} />
-    </ScrollView>
+            {`${balance[0].monetary_value > 0 ? '+' : ''}${balance[0].value_parsed}`}
+          </Text>
+        </Box>
+      </VStack>
+      )}
+
+      <ScrollView
+        pt={2}
+        refreshControl={(
+          <RefreshControl
+            refreshing={false}
+            onRefresh={fetchData}
+            tintColor={colors.brandStyle}
+          />
+      )}
+      >
+        <Heading mx={2} py={2} pt={5} size="sm">Asset accounts</Heading>
+        <Box borderTopWidth={1} borderBottomWidth={1} borderColor="gray.200">
+          {accounts && accounts?.map((account, index) => (
+            <HStack key={account.attributes.name} mx={3} py={2} minH={45} alignItems="center" justifyContent="space-between" borderBottomWidth={index + 1 === accounts.length ? 0 : 1} borderColor="gray.200">
+              <Text style={{ fontFamily: 'Montserrat' }}>
+                {account.attributes.name}
+                {' '}
+                <Text style={{ fontSize: 10, fontFamily: 'Montserrat', color: colors.brandDanger }}>{account.attributes.include_net_worth ? '' : '(*)'}</Text>
+              </Text>
+              <Text style={{ fontFamily: 'Montserrat_Bold', color: account.attributes.current_balance < 0 ? colors.brandDanger : colors.brandStyle3 }}>{account.attributes.current_balance_formatted}</Text>
+            </HStack>
+          ))}
+        </Box>
+        <View style={{ height: 140 }} />
+      </ScrollView>
+
+    </Animated.View>
   </>
 );