Skip to content

Commit

Permalink
Cleaned up example project a bit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pkmmte
Pkmmte committed Sep 25, 2022
1 parent 9c9d7ad commit 0c03bf2
Show file tree
Hide file tree
Showing 4 changed files with 165 additions and 125 deletions.
4 changes: 3 additions & 1 deletion examples/basic-example/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import React from 'react';
import { PilotArea, PilotRoute } from '@waveplay/pilot';
import * as HomePage from './pages';
import * as SavePage from './pages';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export default function App() {
return (
<SafeAreaProvider>
<PilotArea>
<PilotArea config={{ logLevel: 'trace' }}>
<PilotRoute path={'/'} component={HomePage.default} default={true}/>
<PilotRoute path={'/save'} component={SavePage.default} getProps={SavePage.getServerSideProps}/>
</PilotArea>
</SafeAreaProvider>
);
Expand Down
2 changes: 2 additions & 0 deletions examples/basic-example/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,5 @@ yarn start:expo
```

You can run both `start:next` and `start:expo` at the same time.

Main usage is in `pages/index.tsx`. You can see how to use Stashy in the browser, React Native, and NextJS server side.
149 changes: 149 additions & 0 deletions examples/basic-example/components/inputs.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
import { COLOR, COLOR_BACKGROUND } from '../core/constants';
import { useSafeAreaInsets } from '../core/use-safe-area';
import React, { FunctionComponent } from 'react';
import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
import NumberButton from './number-button';

const NUMBERS = [ 1, 2, 3 ];

interface InputsProps {
inputString: string
isChecked: boolean
onChangeTextInput: (text: string) => void
onPressCheckbox: () => void
onPressNumber: (number: number) => void
onPressReload: () => void
onPressSaveSsr: () => void
selectedNumber?: number
}
const Inputs: FunctionComponent<InputsProps> = (props: InputsProps) => {
const { inputString, isChecked, onChangeTextInput, onPressCheckbox, onPressNumber, onPressReload, onPressSaveSsr, selectedNumber } = props;
const insets = useSafeAreaInsets();

return (
<ScrollView style={styles.contentScroll} contentContainerStyle={[styles.contentContainer, { paddingBottom: insets.bottom }]}>
<View style={styles.numbersContainer}>
{ NUMBERS.map((number, index) => (
<NumberButton key={number} index={index} number={number} onPress={onPressNumber} selected={selectedNumber === number}/>
)) }
</View>
<View style={styles.inputContainer}>
<TextInput style={styles.input} onChangeText={onChangeTextInput} value={inputString}/>
</View>
<View style={styles.checkboxContainer}>
<TouchableOpacity style={[styles.checkbox, {
backgroundColor: isChecked ? COLOR : undefined
}]} onPress={onPressCheckbox}/>
<Text style={styles.checkboxLabel}>Boolean example</Text>
</View>
<TouchableOpacity style={styles.reloadContainer} onPress={onPressReload}>
<Text style={styles.reload}>Reload</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.saveSsrContainer} onPress={onPressSaveSsr}>
<Text style={styles.saveSsr}>Save in SSR</Text>
</TouchableOpacity>
</ScrollView>
)
};
export default Inputs;

const styles = StyleSheet.create({
contentScroll: {
width: '100%',
flex: 1
},
contentContainer: {
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
},
numbersContainer: {
width: '100%',
display: 'flex',
flexDirection: 'row',
paddingLeft: 24,
paddingRight: 24,
marginTop: 16
},
numberButton: {
flex: 1,
height: 48,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
backgroundColor: 'teal',
borderRadius: 24,
paddingLeft: 16,
paddingRight: 16,
marginTop: 16
},
numberButtonText: {
color: 'white',
fontSize: 16,
fontWeight: '400'
},
inputContainer: {
width: '100%',
height: 48,
marginTop: 24
},
input: {
height: 48,
borderColor: COLOR_BACKGROUND,
borderRadius: 24,
borderWidth: 2,
paddingLeft: 16,
paddingRight: 16,
position: 'absolute',
left: 16,
right: 16
},
checkboxContainer: {
width: '100%',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
marginTop: 24
},
checkbox: {
width: 24,
height: 24,
borderRadius: 12,
borderWidth: 2,
borderColor: COLOR_BACKGROUND,
marginLeft: 16,
marginRight: 16
},
checkboxLabel: {
fontSize: 16,
fontWeight: '400'
},
reloadContainer: {
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginTop: 24
},
reload: {
fontSize: 16,
fontWeight: '400',
color: COLOR
},
saveSsrContainer: {
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginTop: 24
},
saveSsr: {
fontSize: 16,
fontWeight: '400',
color: COLOR
}
});
135 changes: 11 additions & 124 deletions examples/basic-example/pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import React, { useEffect, useState } from 'react';
import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { StyleSheet, Text, View } from 'react-native';
import { usePilot } from '@waveplay/pilot';
import Head from 'next/head';
import { useSafeAreaInsets } from '../core/use-safe-area';
import NumberButton from '../components/number-button';
import stashy from '@waveplay/stashy';
import { COLOR, COLOR_BACKGROUND } from '../core/constants';
import { GetServerSideProps, GetServerSidePropsContext, GetServerSidePropsResult, NextPage } from 'next';
import Inputs from '../components/inputs';

const NUMBERS = [ 1, 2, 3 ];
const KEY_BOOLEAN = 'boolean-example';
const KEY_NUMBER = 'selectedNum';
const KEY_STRING = 'input-string';
Expand Down Expand Up @@ -79,28 +77,15 @@ const Home: NextPage<HomeProps> = (props: HomeProps) => {
<Text style={styles.title}>Stashy: Basic Example</Text>
<Text style={styles.description}>Change the values below and they will be saved for the next time you open this app</Text>
</View>
<ScrollView style={styles.contentScroll} contentContainerStyle={[styles.contentContainer, { paddingBottom: insets.bottom }]}>
<View style={styles.numbersContainer}>
{ NUMBERS.map((number, index) => (
<NumberButton key={number} index={index} number={number} onPress={onPressNumber} selected={selectedNumber === number}/>
)) }
</View>
<View style={styles.inputContainer}>
<TextInput style={styles.input} onChangeText={onChangeTextInput} value={inputString}/>
</View>
<View style={styles.checkboxContainer}>
<TouchableOpacity style={[styles.checkbox, {
backgroundColor: isChecked ? COLOR : undefined
}]} onPress={onPressCheckbox}/>
<Text style={styles.checkboxLabel}>Boolean example</Text>
</View>
<TouchableOpacity style={styles.reloadContainer} onPress={onPressReload}>
<Text style={styles.reload}>Reload</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.saveSsrContainer} onPress={onPressSaveSsr}>
<Text style={styles.saveSsr}>Save in SSR</Text>
</TouchableOpacity>
</ScrollView>
<Inputs
isChecked={isChecked}
inputString={inputString}
onChangeTextInput={onChangeTextInput}
onPressCheckbox={onPressCheckbox}
onPressNumber={onPressNumber}
onPressReload={onPressReload}
onPressSaveSsr={onPressSaveSsr}
selectedNumber={selectedNumber}/>
</View>
)
};
Expand Down Expand Up @@ -145,103 +130,5 @@ const styles = StyleSheet.create({
textAlign: 'center',
paddingLeft: 24,
paddingRight: 24
},
contentScroll: {
width: '100%',
flex: 1
},
contentContainer: {
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
},
numbersContainer: {
width: '100%',
display: 'flex',
flexDirection: 'row',
paddingLeft: 24,
paddingRight: 24,
marginTop: 16
},
numberButton: {
flex: 1,
height: 48,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
backgroundColor: 'teal',
borderRadius: 24,
paddingLeft: 16,
paddingRight: 16,
marginTop: 16
},
numberButtonText: {
color: 'white',
fontSize: 16,
fontWeight: '400'
},
inputContainer: {
width: '100%',
height: 48,
marginTop: 24
},
input: {
height: 48,
borderColor: COLOR_BACKGROUND,
borderRadius: 24,
borderWidth: 2,
paddingLeft: 16,
paddingRight: 16,
position: 'absolute',
left: 16,
right: 16
},
checkboxContainer: {
width: '100%',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
marginTop: 24
},
checkbox: {
width: 24,
height: 24,
borderRadius: 12,
borderWidth: 2,
borderColor: COLOR_BACKGROUND,
marginLeft: 16,
marginRight: 16
},
checkboxLabel: {
fontSize: 16,
fontWeight: '400'
},
reloadContainer: {
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginTop: 24
},
reload: {
fontSize: 16,
fontWeight: '400',
color: COLOR
},
saveSsrContainer: {
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginTop: 24
},
saveSsr: {
fontSize: 16,
fontWeight: '400',
color: COLOR
}
});

0 comments on commit 0c03bf2

Please sign in to comment.