Skip to content

Commit

Permalink
Move most of App.tsx into Director.tsx (#411)
Browse files Browse the repository at this point in the history
  • Loading branch information
NigelBreslaw authored Feb 18, 2024
1 parent f8caa19 commit 1b2703a
Show file tree
Hide file tree
Showing 2 changed files with 115 additions and 109 deletions.
111 changes: 2 additions & 109 deletions native_gg/App.tsx
Original file line number Diff line number Diff line change
@@ -1,117 +1,10 @@
import { StatusBar } from "expo-status-bar";
import { Button, ScrollView, StyleSheet, Text, View } from "react-native";
import { SafeAreaProvider, SafeAreaView, initialWindowMetrics } from "react-native-safe-area-context";
import { Image } from "expo-image";
import { LinearGradient } from "expo-linear-gradient";
import { useEffect, useReducer, useRef } from "react";
import AuthUI from "./src/authentication/AuthUI.tsx";
import { clientID } from "./src/constants/env.ts";
import AuthService from "./src/authentication/AuthService.ts";
import { authReducer, initialAuthState } from "./src/state/Actions.ts";
import { getItemDefinition, getProfileTest, saveItemDefinition } from "./src/backend/api.ts";
import StorageGG from "./src/storage/StorageGG.ts";
import Director from "./src/views/Director.tsx";

export default function App() {
if (process.env.NODE_ENV === "development" && clientID === undefined) {
console.warn("No .ENV file found. Please create one.");
}
const storeRef = useRef(StorageGG.getInstance());
const authServiceRef = useRef<AuthService | null>(null);

const [state, dispatch] = useReducer(authReducer, initialAuthState);

const accountAvatar = state.initComplete
? state.currentAccount
? `https://www.bungie.net${state.currentAccount?.iconPath}`
: "https://d33wubrfki0l68.cloudfront.net/554c3b0e09cf167f0281fda839a5433f2040b349/ecfc9/img/header_logo.svg"
: "";

useEffect(() => {
authServiceRef.current = AuthService.getInstance();
authServiceRef.current.subscribe(dispatch);
// Unsubscribe when the component unmounts
return () => {
if (authServiceRef.current) {
authServiceRef.current.cleanup();
}
authServiceRef.current = null;
};
}, []);

return (
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
<SafeAreaView style={styles.topContainer}>
<StatusBar style="light" />
<LinearGradient
colors={["#232526", "#66686a"]}
style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }}
/>
<ScrollView contentContainerStyle={styles.scrollContainer}>
<View style={styles.container}>
<Text style={{ fontSize: 20, color: "#fff" }}>Guardian Ghost</Text>
<View style={styles.spacer} />
<View style={styles.imageContainer}>
<Image style={styles.image} contentFit="contain" transition={300} source={accountAvatar} />
</View>
<View style={styles.spacer} />
<AuthUI
disabled={state.authenticated}
startAuth={() => {
AuthService.startAuth();
}}
processURL={(url) => {
AuthService.processURL(url);
}}
/>

<Text style={{ fontSize: 22, marginTop: 15, color: "#150f63" }}>Membership ID:</Text>
<Text style={{ fontSize: 22, fontWeight: "bold" }}>{state.currentAccount?.supplementalDisplayName}</Text>

<Text style={{ fontSize: 22, marginTop: 15, color: "#150f63" }}>
Authenticated: <Text style={{ fontWeight: "bold" }}>{state.authenticated ? "True" : "False"}</Text>
</Text>
<View style={styles.spacer} />
<Button title="Logout" disabled={!state.authenticated} onPress={() => AuthService.logoutCurrentUser()} />
<View style={styles.spacer} />
<Button title="Download Item Definition" onPress={() => saveItemDefinition()} />
<View style={styles.spacer} />
<Button title="Get saved Item Definition" onPress={() => getItemDefinition()} />
<View style={styles.spacer} />
<Button disabled={!state.authenticated} title="getProfile()" onPress={() => getProfileTest()} />
</View>
</ScrollView>
</SafeAreaView>
</SafeAreaProvider>
);
return <Director />;
}

const styles = StyleSheet.create({
topContainer: {
flex: 1,
},
container: {
flex: 1,
alignItems: "center",
},
scrollContainer: {},
imageContainer: {
borderRadius: 16,
shadowColor: "#000",
shadowOffset: {
width: 5,
height: 5,
},
shadowOpacity: 0.5,
shadowRadius: 5,
elevation: 3,
},
image: {
width: 200,
height: 200,
borderRadius: 16,
overflow: "hidden",
},
spacer: {
marginTop: 10,
},
});
113 changes: 113 additions & 0 deletions native_gg/src/views/Director.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import { StatusBar } from "expo-status-bar";
import { Button, ScrollView, StyleSheet, Text, View } from "react-native";
import { SafeAreaProvider, SafeAreaView, initialWindowMetrics } from "react-native-safe-area-context";
import { Image } from "expo-image";
import { LinearGradient } from "expo-linear-gradient";
import { useEffect, useReducer, useRef } from "react";
import AuthUI from "../authentication/AuthUI.tsx";
import AuthService from "../authentication/AuthService.ts";
import { authReducer, initialAuthState } from "../state/Actions.ts";
import { getItemDefinition, getProfileTest, saveItemDefinition } from "../backend/api.ts";
import StorageGG from "../storage/StorageGG.ts";

export default function Director() {
const storeRef = useRef(StorageGG.getInstance());
const authServiceRef = useRef<AuthService | null>(null);

const [state, dispatch] = useReducer(authReducer, initialAuthState);

const accountAvatar = state.initComplete
? state.currentAccount
? `https://www.bungie.net${state.currentAccount?.iconPath}`
: "https://d33wubrfki0l68.cloudfront.net/554c3b0e09cf167f0281fda839a5433f2040b349/ecfc9/img/header_logo.svg"
: "";

useEffect(() => {
authServiceRef.current = AuthService.getInstance();
authServiceRef.current.subscribe(dispatch);
// Unsubscribe when the component unmounts
return () => {
if (authServiceRef.current) {
authServiceRef.current.cleanup();
}
authServiceRef.current = null;
};
}, []);

return (
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
<SafeAreaView style={styles.topContainer}>
<StatusBar style="light" />
<LinearGradient
colors={["#232526", "#66686a"]}
style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }}
/>
<ScrollView contentContainerStyle={styles.scrollContainer}>
<View style={styles.container}>
<Text style={{ fontSize: 20, color: "#fff" }}>Guardian Ghost</Text>
<View style={styles.spacer} />
<View style={styles.imageContainer}>
<Image style={styles.image} contentFit="contain" transition={300} source={accountAvatar} />
</View>
<View style={styles.spacer} />
<AuthUI
disabled={state.authenticated}
startAuth={() => {
AuthService.startAuth();
}}
processURL={(url) => {
AuthService.processURL(url);
}}
/>

<Text style={{ fontSize: 22, marginTop: 15, color: "#150f63" }}>Membership ID:</Text>
<Text style={{ fontSize: 22, fontWeight: "bold" }}>{state.currentAccount?.supplementalDisplayName}</Text>

<Text style={{ fontSize: 22, marginTop: 15, color: "#150f63" }}>
Authenticated: <Text style={{ fontWeight: "bold" }}>{state.authenticated ? "True" : "False"}</Text>
</Text>
<View style={styles.spacer} />
<Button title="Logout" disabled={!state.authenticated} onPress={() => AuthService.logoutCurrentUser()} />
<View style={styles.spacer} />
<Button title="Download Item Definition" onPress={() => saveItemDefinition()} />
<View style={styles.spacer} />
<Button title="Get saved Item Definition" onPress={() => getItemDefinition()} />
<View style={styles.spacer} />
<Button disabled={!state.authenticated} title="getProfile()" onPress={() => getProfileTest()} />
</View>
</ScrollView>
</SafeAreaView>
</SafeAreaProvider>
);
}

const styles = StyleSheet.create({
topContainer: {
flex: 1,
},
container: {
flex: 1,
alignItems: "center",
},
scrollContainer: {},
imageContainer: {
borderRadius: 16,
shadowColor: "#000",
shadowOffset: {
width: 5,
height: 5,
},
shadowOpacity: 0.5,
shadowRadius: 5,
elevation: 3,
},
image: {
width: 200,
height: 200,
borderRadius: 16,
overflow: "hidden",
},
spacer: {
marginTop: 10,
},
});

0 comments on commit 1b2703a

Please sign in to comment.