components/* : Modify Class Components to Functional components

Norfeldt · Sep 25, 2020 · 70e9935 · 70e9935
1 parent 2286d4c
commit 70e9935
Show file tree

Hide file tree

Showing 28 changed files with 572 additions and 458 deletions.
diff --git a/App.js b/App.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Platform, StatusBar, StyleSheet, View } from 'react-native'
 import { AppLoading } from 'expo'
 import { Asset } from 'expo-asset'
@@ -16,21 +16,18 @@ export default function App(props) {
     fonticons: require('./assets/fonts/fonticons.ttf'),
   })
 
-  console.log()
-
   if (!fontsLoaded) {
-    console.log('got here')
     return <AppLoading />
+  } else {
+    return (
+      <ContextProvider>
+        <View style={styles.container}>
+          {Platform.OS === 'ios' && <StatusBar barStyle="dark-content" />}
+          <AppNavigator />
+        </View>
+      </ContextProvider>
+    )
   }
-
-  return (
-    <ContextProvider>
-      <View style={styles.container}>
-        {Platform.OS === 'ios' && <StatusBar barStyle="dark-content" />}
-        <AppNavigator />
-      </View>
-    </ContextProvider>
-  )
 }
 
 const styles = StyleSheet.create({

diff --git a/components/BlockCard.js b/components/BlockCard.js
@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react'
+import React, { useState } from 'react'
 import { LayoutAnimation, View } from 'react-native'
 import Card from './basic/Card'
 import BlockButton from './BlockCardFractions/BlockButton'
@@ -14,22 +14,32 @@ import Warning from './BlockCardFractions/Warning'
 import Text from '../components/basic/Text'
 import FontIcon from './basic/FontIcon'
 
-export default class BlockCard extends PureComponent {
+export default function BlockCard(props){
+/***
   constructor(props) {
     super(props)
     this.state = {
       showBlockInfo: null,
     }
   }
+**/
+  const [ showBlockInfo, setBlockInfo ] = useState(null);
 
-  onButtonPress = buttonTitle => {
+  const onButtonPress = buttonTitle => {
+  /**
     this.setState({
       showBlockInfo:
         this.state.showBlockInfo == buttonTitle ? null : buttonTitle,
     })
+  **/
+    if(showBlockInfo == buttonTitle){
+      setBlockInfo(null);
+    } else {
+      setBlockInfo(buttonTitle);
+    }
   }
 
-  render() {
+  //render() {
     const {
       index,
       blockHash,
@@ -41,21 +51,21 @@ export default class BlockCard extends PureComponent {
       hashAlgorithmName,
       multipleCheckOUT,
       neverCheckedIN,
-    } = this.props
+    } = props
 
-    BlockInfo = () => {
+    const BlockInfo = () => {
       LayoutAnimation.configureNext(LayoutAnimation.Presets.spring)
 
-      const { showBlockInfo } = this.state
+//      const { showBlockInfo } = this.state
       switch (showBlockInfo) {
         case 'PREVIOUS HASH':
           return (
             <ChainingInfo
-              timestamp={this.props.previousBlockInfo.timestamp}
-              previousBlockHash={this.props.previousBlockInfo.previousBlockHash}
-              productDataHash={this.props.previousBlockInfo.productDataHash}
-              hash={this.props.previousBlockHash}
-              hashAlgorithmName={this.props.hashAlgorithmName}
+              timestamp={props.previousBlockInfo.timestamp}
+              previousBlockHash={props.previousBlockInfo.previousBlockHash}
+              productDataHash={props.previousBlockInfo.productDataHash}
+              hash={props.previousBlockHash}
+              hashAlgorithmName={props.hashAlgorithmName}
             />
           )
 
@@ -80,11 +90,11 @@ export default class BlockCard extends PureComponent {
         case 'BLOCK HASH':
           return (
             <ChainingInfo
-              timestamp={this.props.timestamp}
-              previousBlockHash={this.props.previousBlockHash}
-              productDataHash={this.props.productDataHash}
-              hash={this.props.blockHash}
-              hashAlgorithmName={this.props.hashAlgorithmName}
+              timestamp={props.timestamp}
+              previousBlockHash={props.previousBlockHash}
+              productDataHash={props.productDataHash}
+              hash={props.blockHash}
+              hashAlgorithmName={props.hashAlgorithmName}
             />
           )
 
@@ -127,23 +137,23 @@ export default class BlockCard extends PureComponent {
           >
             <View style={{ flex: 4, justifyContent: 'space-between' }}>
               <BlockButton
-                onPress={this.onButtonPress}
+                onPress={onButtonPress}
                 style={{ marginBottom: 5 }}
                 title="TIMESTAMP"
                 value={timestamp}
                 valueIsHash={false}
               />
 
               <BlockButton
-                onPress={this.onButtonPress}
+                onPress={onButtonPress}
                 style={{ marginBottom: 5 }}
                 title="PRODUCT DATA"
                 value={productDataHash}
                 colorize={index != 0}
               />
 
               <BlockButton
-                onPress={this.onButtonPress}
+                onPress={onButtonPress}
                 style={{ marginBottom: 5 }}
                 title="PREVIOUS HASH"
                 value={previousBlockHash}
@@ -160,7 +170,7 @@ export default class BlockCard extends PureComponent {
               }}
             >
               <BlockButton
-                onPress={this.onButtonPress}
+                onPress={onButtonPress}
                 title="BLOCK HASH"
                 value={blockHash}
                 colorize={false}
@@ -195,5 +205,5 @@ export default class BlockCard extends PureComponent {
         )}
       </View>
     )
-  }
+ // }
 }
diff --git a/components/DoseAdjuster.js b/components/DoseAdjuster.js
@@ -1,13 +1,12 @@
 import debounce from 'lodash/debounce'
-import React, { PureComponent } from 'react'
+import React from 'react'
 import { View } from 'react-native'
-import Slider from 'react-native-slider'
+import Slider from '@react-native-community/slider'
 import Colors from '../constants/Colors'
 import { ContextConsumer } from '../Context'
 import Text from './basic/Text'
 
-export default class DoseAdjuster extends PureComponent {
-  render() {
+export default function DoseAdjuster(props) {
     return (
       <ContextConsumer>
         {({ getDose, getDoseRange, setDose, prescriptionDose }) => {
@@ -64,5 +63,4 @@ export default class DoseAdjuster extends PureComponent {
         }}
       </ContextConsumer>
     )
-  }
 }
diff --git a/components/DosePrescription.js b/components/DosePrescription.js
@@ -1,13 +1,12 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import { View, LayoutAnimation, Platform } from 'react-native'
 import Colors from '../constants/Colors'
 import FontIcon from './basic/FontIcon'
 import Text from './basic/Text'
 import { ContextConsumer } from '../Context'
 
-export default class DosePrescription extends PureComponent {
-  render() {
-    const { style } = this.props
+export default function DosePrescription(props) {
+    const { style } = props
 
     return (
       <ContextConsumer>
@@ -104,5 +103,4 @@ export default class DosePrescription extends PureComponent {
         }}
       </ContextConsumer>
     )
-  }
 }
diff --git a/components/DrugHistory.js b/components/DrugHistory.js
@@ -1,6 +1,6 @@
 //import liraries
 import map from 'lodash/map'
-import React, { PureComponent } from 'react'
+import React from 'react'
 import { View } from 'react-native'
 import { ContextConsumer } from '../Context'
 import Card from './basic/Card'
@@ -12,8 +12,7 @@ import Colors from '../constants/Colors'
 import Warning from './BlockCardFractions/Warning'
 
 // create a component
-export default class DrugHistory extends PureComponent {
-  render() {
+export default function DrugHistory(props) {
     return (
       <ContextConsumer>
         {({ patientDrugHistory, blockchain: { falsifiedMedicine } }) => {
@@ -54,5 +53,4 @@ export default class DrugHistory extends PureComponent {
         }}
       </ContextConsumer>
     )
-  }
 }
diff --git a/components/FalsifiedDrugs.js b/components/FalsifiedDrugs.js
@@ -1,12 +1,11 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import { View, TouchableOpacity, Alert, Platform } from 'react-native'
 import Layout from '../constants/Layout'
 import { ContextConsumer } from '../Context'
 import FontIcon from './basic/FontIcon'
 import Text from './basic/Text'
 
-export default class FalsifiedDrugs extends PureComponent {
-  render() {
+export default function FalsifiedDrugs(props){
     const {
       window: { width },
     } = Layout
@@ -89,5 +88,4 @@ export default class FalsifiedDrugs extends PureComponent {
         }}
       </ContextConsumer>
     )
-  }
 }
diff --git a/components/GenuineDrugs.js b/components/GenuineDrugs.js
@@ -1,22 +1,21 @@
 import map from 'lodash/map'
-import React, { PureComponent } from 'react'
+import React from 'react'
 import { Alert, Platform, TouchableOpacity, View } from 'react-native'
 import { getHashOfproductData } from '../cloudComputing/Block'
 import { getHashColors } from '../constants/Colors'
 import Layout from '../constants/Layout'
 import { ContextConsumer } from '../Context'
 import FontIcon from './basic/FontIcon'
 
-export default class GenuineDrugs extends PureComponent {
-  render() {
+export default function GenuineDrugs(props) {
     const {
       window: { width },
     } = Layout
     return (
       <ContextConsumer>
         {({ genuineDrugs, checkOUT }) => {
           return (
-            <View style={this.props.style}>
+            <View style={props.style}>
               {map(genuineDrugs, (drug, index) => {
                 return (
                   <TouchableOpacity
@@ -79,5 +78,4 @@ export default class GenuineDrugs extends PureComponent {
         }}
       </ContextConsumer>
     )
-  }
 }
diff --git a/components/ListData.js b/components/ListData.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { useState } from 'react'
 import { View } from 'react-native'
 
 import reduce from 'lodash/reduce'
@@ -7,9 +7,9 @@ import capitalize from 'lodash/capitalize'
 
 import InfoRow from './basic/InfoRow'
 
-export default class ListData extends Component {
-  render() {
-    const { data } = this.props
+export default function ListData(props) {
+ // render() {
+    const { data } = props;
     return (
       <View>
         {reduce(
@@ -32,5 +32,5 @@ export default class ListData extends Component {
         )}
       </View>
     )
-  }
+//  }
 }
diff --git a/components/ManufactureHistory.js b/components/ManufactureHistory.js
@@ -1,5 +1,5 @@
 import map from 'lodash/map'
-import React, { PureComponent } from 'react'
+import React from 'react'
 import { Alert, Platform, TouchableOpacity, View } from 'react-native'
 import { QRCode } from 'react-native-custom-qr-codes-expo'
 import { getHashOfproductData } from '../cloudComputing/Block'
@@ -9,9 +9,8 @@ import { ContextConsumer } from '../Context'
 import FontIcon from './basic/FontIcon'
 import HashBlock from './basic/HashBlock'
 
-class DrugQR extends PureComponent {
-  render() {
-    const { value, borderColor } = this.props
+function DrugQR(props) {
+    const { value, borderColor } = props
     const {
       window: { width },
       isSmallDevice,
@@ -40,11 +39,9 @@ class DrugQR extends PureComponent {
         </View>
       </View>
     )
-  }
 }
 
-export default class ManufactureHistory extends PureComponent {
-  render() {
+export default function ManufactureHistory(props){
     const {
       window: { width },
       isSmallDevice,
@@ -110,5 +107,4 @@ export default class ManufactureHistory extends PureComponent {
         }
       </ContextConsumer>
     )
-  }
 }