Skip to content
Permalink
Browse files

Refactor Overview into components

  • Loading branch information...
assertchris committed Jan 28, 2019
1 parent 6138c41 commit 6759fc17ca8e5fe2fdad1b139d4ef538201a6b99
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -5,7 +5,6 @@
};
objectVersion = 46;
objects = {

/* Begin PBXBuildFile section */
00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@@ -24,6 +23,9 @@
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
ED297163215061F000B7C4FE /* JavaScriptCore.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = ED297162215061F000B7C4FE /* JavaScriptCore.framework */; };
726A6D476A5A4303A3018D09 /* fa_brands_400.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 892EAA2F5F2E44B295E650E8 /* fa_brands_400.ttf */; };
2624C6A47FF04A31BBBDBF8A /* fa_regular_400.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 9D6B86403BB9474CA0EA0EF9 /* fa_regular_400.ttf */; };
6265510D824D44E98040A7F4 /* fa_solid_900.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0E1244C5AF2F4A18AE1CB441 /* fa_solid_900.ttf */; };
/* End PBXBuildFile section */

/* Begin PBXContainerItemProxy section */
@@ -312,6 +314,9 @@
ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
892EAA2F5F2E44B295E650E8 /* fa_brands_400.ttf */ = {isa = PBXFileReference; name = "fa_brands_400.ttf"; path = "../assets/fonts/fa_brands_400.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
9D6B86403BB9474CA0EA0EF9 /* fa_regular_400.ttf */ = {isa = PBXFileReference; name = "fa_regular_400.ttf"; path = "../assets/fonts/fa_regular_400.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
0E1244C5AF2F4A18AE1CB441 /* fa_solid_900.ttf */ = {isa = PBXFileReference; name = "fa_solid_900.ttf"; path = "../assets/fonts/fa_solid_900.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */

/* Begin PBXFrameworksBuildPhase section */
@@ -447,6 +452,16 @@
name = Frameworks;
sourceTree = "<group>";
};
3E9DA067E29744DFB2606312 /* Resources */ = {
isa = PBXGroup;
children = (
892EAA2F5F2E44B295E650E8 /* fa_brands_400.ttf */,
9D6B86403BB9474CA0EA0EF9 /* fa_regular_400.ttf */,
0E1244C5AF2F4A18AE1CB441 /* fa_solid_900.ttf */,
);
name = Resources;
sourceTree = "<group>";
};
5E91572E1DD0AC6500FF2AA8 /* Products */ = {
isa = PBXGroup;
children = (
@@ -500,6 +515,7 @@
832341AE1AAA6A7D00B99B32 /* Libraries */,
83CBBA001A601CBA00E9B192 /* Products */,
2D16E6871FA4F8E400B85C8A /* Frameworks */,
3E9DA067E29744DFB2606312 /* Resources */,
);
indentWidth = 2;
sourceTree = "<group>";
@@ -550,7 +566,7 @@
83CBB9F71A601CBA00E9B192 /* Project object */ = {
isa = PBXProject;
attributes = {
LastUpgradeCheck = 0940;
LastUpgradeCheck = 940;
ORGANIZATIONNAME = Facebook;
TargetAttributes = {
13B07F861A680F5B00A75B9A = {
@@ -895,6 +911,9 @@
files = (
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
726A6D476A5A4303A3018D09 /* fa_brands_400.ttf in Resources */,
2624C6A47FF04A31BBBDBF8A /* fa_regular_400.ttf in Resources */,
6265510D824D44E98040A7F4 /* fa_solid_900.ttf in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@@ -51,7 +51,7 @@
</dict>
</dict>
<key>NSLocationWhenInUseUsageDescription</key>
<string></string>
<string/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiredDeviceCapabilities</key>
@@ -74,5 +74,11 @@
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
<key>UIAppFonts</key>
<array>
<string>fa_brands_400.ttf</string>
<string>fa_regular_400.ttf</string>
<string>fa_solid_900.ttf</string>
</array>
</dict>
</plist>
@@ -7,8 +7,10 @@
"test": "jest"
},
"dependencies": {
"prop-types": "^15.6.2",
"react": "16.6.3",
"react-native": "0.58.1"
"react-native": "0.58.1",
"react-native-fontawesome": "^6.0.1"
},
"devDependencies": {
"babel-core": "^7.0.0-bridge.0",
@@ -19,5 +21,10 @@
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
}
}
@@ -46,9 +46,13 @@ const request = async (token, method, url, data = {}) => {
class App extends Component {
state = {
screen: "Connect",
setScreen: screen => this.setState({ screen }),
setScreen: screen => {
this.setState({ screen })
},
token: undefined,
setToken: token => this.setState({ token }),
setToken: token => {
this.setState({ token })
},
droplets: [],
isLoadingDroplets: false,
getDroplets: async () => {
@@ -69,6 +73,34 @@ class App extends Component {
isLoadingDroplets: false,
})
},
selectedDroplet: undefined,
setSelectedDroplet: selectedDroplet => {
this.setState({ selectedDroplet })
},
snapshots: [],
isLoadingSnapshots: false,
getSnapshots: async () => {
const { token } = this.state

this.setState({ isLoadingSnapshots: true })

const response = await request(
token,
"GET",
"https://api.digitalocean.com/v2/snapshots",
)

const result = await response.json()

this.setState({
snapshots: result.snapshots,
isLoadingSnapshots: false,
})
},
selectedSnapshot: undefined,
setSelectedSnapshot: selectedSnapshot => {
this.setState({ selectedSnapshot })
},
}

async componentDidMount() {
@@ -0,0 +1,15 @@
import React from "react"
import { View } from "react-native"

const styles = {
actions: {
flexShrink: 1,
flexDirection: "row",
},
}

const Actions = ({ children }) => (
<View style={styles.actions}>{children}</View>
)

export { Actions }
@@ -0,0 +1,60 @@
import React from "react"
import PropTypes from "prop-types"

import {
Text,
TouchableWithoutFeedback,
View,
} from "react-native"

const styles = {
block: {
width: 200,
height: 200,
flexShrink: 1,
alignItems: "center",
justifyContent: "space-between",
padding: 20,
margin: 5,
borderWidth: 1,
borderColor: "#e0e0e0",
borderRadius: 4,
backgroundColor: "#f0f0f0",
},
blockLabel: {
width: "100%",
flexShrink: 1,
alignItems: "center",
justifyContent: "center",
},
blockLabelText: {
textAlign: "center",
lineHeight: 30,
fontSize: 20,
},
}

const Block = ({ children, label, onPress }) => (
<TouchableWithoutFeedback onPress={onPress}>
<View style={styles.block}>
{label ? (
<View style={styles.blockLabelText}>
<Text style={styles.blockLabelText}>{label}</Text>
</View>
) : null}
{children}
</View>
</TouchableWithoutFeedback>
)

Block.propTypes = {
label: PropTypes.string,
onPress: PropTypes.func,
}

Block.defaultProps = {
label: undefined,
onPress: undefined,
}

export { Block }
@@ -0,0 +1,16 @@
import React from "react"
import { View } from "react-native"

const styles = {
blocks: {
flexShrink: 1,
flexDirection: "row",
flexWrap: 1,
},
}

const Blocks = ({ children }) => (
<View style={styles.blocks}>{children}</View>
)

export { Blocks }
@@ -0,0 +1,47 @@
import React from "react"
import PropTypes from "prop-types"
import { Icons } from "react-native-fontawesome"

import { Actions } from "./actions"
import { IconButton } from "./icon-button"

const DropletActions = ({
droplet,
selectedDroplet,
onPressDeleteDroplet,
onPressSnapshotDroplet,
}) => {
if (selectedDroplet != droplet) {
return null
}

return (
<Actions>
<IconButton
onPress={() => onPressDeleteDroplet(droplet)}
>
{Icons.trash}
</IconButton>
<IconButton
onPress={() => onPressSnapshotDroplet(droplet)}
>
{Icons.camera}
</IconButton>
</Actions>
)
}

DropletActions.propTypes = {
droplet: PropTypes.object.isRequired,
selectedDroplet: PropTypes.object,
onPressDeleteDroplet: PropTypes.func,
onPressSnapshotDroplet: PropTypes.func,
}

DropletActions.defaultProps = {
selectedDroplet: undefined,
onPressDeleteDroplet: () => null,
onPressSnapshotDroplet: () => null,
}

export { DropletActions }
@@ -0,0 +1,49 @@
import React from "react"
import PropTypes from "prop-types"

import { Block } from "./block"
import { DropletActions } from "./droplet-actions"

const Droplet = ({
droplet,
selectedDroplet,
onPressDroplet,
onPressDeleteDroplet,
onPressSnapshotDroplet,
}) => {
return (
<Block
key={droplet.id}
onPress={() =>
selectedDroplet != droplet
? onPressDroplet(droplet)
: onPressDroplet(undefined)
}
label={droplet.name}
>
<DropletActions
droplet={droplet}
selectedDroplet={selectedDroplet}
onPressDeleteDroplet={onPressDeleteDroplet}
onPressSnapshotDroplet={onPressSnapshotDroplet}
/>
</Block>
)
}

Droplet.propTypes = {
droplet: PropTypes.object.isRequired,
selectedDroplet: PropTypes.object,
onPressDroplet: PropTypes.func,
onPressDeleteDroplet: PropTypes.func,
onPressSnapshotDroplet: PropTypes.func,
}

Droplet.defaultProps = {
selectedDroplet: undefined,
onPressDroplet: () => null,
onPressDeleteDroplet: () => null,
onPressSnapshotDroplet: () => null,
}

export { Droplet }
@@ -0,0 +1,25 @@
import React from "react"
import { Text, View } from "react-native"

const styles = {
header: {
width: "100%",
marginHorizontal: 5,
marginVertical: 15,
flexShrink: 1,
alignItems: "flex-start",
justifyContent: "center",
},
headerText: {
lineHeight: 30,
fontSize: 20,
},
}

const Header = ({ children }) => (
<View style={styles.header}>
<Text style={styles.headerText}>{children}</Text>
</View>
)

export { Header }
Oops, something went wrong.

0 comments on commit 6759fc1

Please sign in to comment.
You can’t perform that action at this time.