fix: Small tweaks, including fix ErrorScreen (#142)

* fix: Fix error screen not being able to move to search

* Revert data sources changes

App/Screens/ErrorScreen/ErrorScreen.tsx

@@ -15,7 +15,7 @@
 // along with Sh**t! I Smoke. If not, see <http:https://www.gnu.org/licenses/>.
 
 import React, { useContext } from 'react';
-import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Image, StyleSheet, Text, View } from 'react-native';
 import { NavigationInjectedProps } from 'react-navigation';
 import { scale } from 'react-native-size-matters';
 
@@ -41,13 +41,13 @@ export function ErrorScreen (props: ErrorScreenProps) {
  {i18n.t('error_screen_error_cannot_load_cigarettes')}
  </Text>
  </View>
- <TouchableOpacity onPress={() => props.navigation.navigate('Search')}>
- <View style={styles.chooseOther}>
-  <Button style={styles.chooseOther} type="primary">
-  {i18n.t('error_screen_choose_other_location').toUpperCase()}
-  </Button>
- </View>
- </TouchableOpacity>
+ <Button
+ onPress={() => props.navigation.navigate('Search')}
+ style={styles.chooseOther}
+ type="primary"
+ >
+ {i18n.t('error_screen_choose_other_location').toUpperCase()}
+ </Button>
  <Text style={theme.text}>{i18n.t('error_screen_error_description')}</Text>
  <Text style={styles.errorMessage}>
  {i18n.t('error_screen_error_message', { errorText: error })}

App/Screens/Search/GpsItem/GpsItem.tsx

@@ -26,6 +26,10 @@ export function GpsItem () {
  const { setCurrentLocation } = useContext(CurrentLocationContext);
  const gps = useContext(GpsLocationContext);
 
+ if (!gps) {
+ return null;
+ }
+
  const handleClick = () => {
  setCurrentLocation(gps);
  };
@@ -35,7 +39,7 @@ export function GpsItem () {
  description={i18n.t('search_current_location')}
  icon="gps"
  onPress={handleClick}
- title={gps!.name || LOADING_TEXT}
+ title={gps.name || LOADING_TEXT}
  />
  );
 }

App/Screens/Search/Search.tsx

@@ -27,11 +27,7 @@ import { AlgoliaHit, fetchAlgolia } from './fetchAlgolia';
 import { AlgoliaItem } from './AlgoliaItem';
 import { GpsItem } from './GpsItem';
 import { SearchHeader } from './SearchHeader';
-import {
- CurrentLocationContext,
- ErrorContext,
- GpsLocationContext
-} from '../../stores';
+import { CurrentLocationContext, GpsLocationContext } from '../../stores';
 import { Location } from '../../stores/fetchGpsPosition';
 import { logFpError } from '../../util/fp';
 import * as theme from '../../util/theme';
@@ -43,7 +39,6 @@ interface SearchProps extends NavigationInjectedProps {}
 
 export function Search (props: SearchProps) {
  const { isGps, setCurrentLocation } = useContext(CurrentLocationContext);
- const { setError } = useContext(ErrorContext);
  const gps = useContext(GpsLocationContext);
 
  const [algoliaError, setAlgoliaError] = useState<Error | undefined>(
@@ -92,9 +87,7 @@ export function Search (props: SearchProps) {
  }
 
  function handleItemClick (item: Location) {
- // Reset everything when we choose a new location.
  setCurrentLocation(item);
- setError(undefined);
  }
 
  function renderItem ({ item }: { item: AlgoliaHit }) {

App/components/BoxButton/BoxButton.tsx

@@ -52,14 +52,15 @@ const styles = StyleSheet.create({
  opacity: 1
  },
  boxButton: {
+ ...theme.elevationShadowStyle(3),
  backgroundColor: 'white',
  borderColor: 'rgba(0, 0, 0, 0.1)',
  borderRadius: scale(12),
  borderWidth: 1,
  marginBottom: theme.spacing.tiny,
  paddingHorizontal: theme.spacing.small,
- paddingVertical: scale(4),
- ...theme.elevationShadowStyle(5)
+ paddingVertical: scale(4), // Padding for the shadow
+ shadowOpacity: 0.1
  },
  boxButtonText: {
  ...theme.shitText,

App/components/Button/Button.tsx

@@ -33,15 +33,15 @@ interface ButtonProps extends TouchableOpacityProps {
 }
 
 export function Button (props: ButtonProps) {
- const { children, icon, onPress, type, ...rest } = props;
+ const { children, icon, onPress, style, type, ...rest } = props;
 
  return (
  <TouchableOpacity
  onPress={onPress}
  style={[
  styles.bigButton,
  type && type === 'secondary' ? styles.secondary : styles.primary,
- props.style
+ style
  ]}
  {...rest}
  >

App/stores/api.tsx

@@ -45,6 +45,7 @@ export function ApiContextProvider ({ children }: ApiContextProviderProps) {
 
  useEffect(() => {
  setApi(undefined);
+ setError(undefined);
 
  if (!currentLocation) {
  return;

App/util/theme.ts

@@ -61,7 +61,7 @@ export function elevationShadowStyle (
  shadowColor: 'black',
  shadowOffset: {
  width: 0,
- height: scale((position === 'bottom' ? 1 : -1) * 0.5 * elevation)
+ height: scale((position === 'bottom' ? 1 : -1) * elevation)
  },
  shadowOpacity: 0.3,
  shadowRadius: scale(0.8 * elevation)