Merge pull request #14 from Team488/update-babel

Fix build issues and refactor event button components

README.md

@@ -1,6 +1,14 @@
 # Getting started
 
-Follow the instructions [here]() to install Android Studio and React Native.
+## Prerequisites
+* [Install Android Studio](https://developer.android.com/studio/)
+* [Set up React Native CLI](https://reactnative.dev/docs/environment-setup)
+* Install Android SDK Command Line Tools
+    * In Android Studio: Tools > SDK Manager > Appearance and Behavior > System Setttings > Android SDK
+    * In the SDK Tools tab, check the box for Android SDK Command Line Tools and click OK to install
+    * Add an alias for `adp` to your path
+
+## Starting the app
 
 Start the app with 
 

ios/Podfile

@@ -34,6 +34,7 @@ target 'ScoutingApp' do
   pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
   pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
 
+
   pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
 
   target 'ScoutingAppTests' do

package.json

@@ -8,6 +8,8 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-decorators": "^7.3.0",
+    "@react-native-community/async-storage": "^1.12.1",
+    "@react-native-picker/picker": "^2.2.1",
     "@types/react": "^16.8.6",
     "@types/react-native": "^0.57.38",
     "@types/react-navigation": "^3.0.4",
@@ -27,8 +29,8 @@
     "v8-android-nointl": "^8.80.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/runtime": "^7.3.4",
+    "@babel/core": "^7.16.0",
+    "@babel/runtime": "^7.16.3",
     "babel-jest": "^24.1.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "jest": "^24.1.0",

src/common/EventButton.tsx

@@ -0,0 +1,33 @@
+import {StyleSheet} from 'react-native';
+import {
+  Button,
+  Text,
+} from 'native-base';
+import React from 'react';
+import { useOnEvent } from './OnEventContext';
+import { EventCode } from 'src/record/Events';
+
+const styles = StyleSheet.create({
+  eventButton: {
+    margin: 5,
+    alignSelf: 'center',
+  },
+});
+
+export const EventButton = ({
+  eventCode,
+  label,
+}: {
+  eventCode: EventCode;
+  label: string;
+}) => {
+  const onEvent = useOnEvent();
+  return (
+    <Button
+      large
+      style={styles.eventButton}
+      onPress={() => onEvent({code: eventCode, timestamp: Date.now()})}>
+      <Text>{label}</Text>
+    </Button>
+  );
+};

src/common/ModalEventButton.tsx

@@ -0,0 +1,61 @@
+import {StyleSheet} from 'react-native';
+import {
+    ActionSheet,
+  Button,
+  Text,
+} from 'native-base';
+import React from 'react';
+
+import { EventCode } from 'src/record/Events';
+import { OnEventHandler, useOnEvent } from './OnEventContext';
+
+type EventOptions = Record<string, EventCode>;
+
+const styles = StyleSheet.create({
+  eventButton: {
+    margin: 5,
+    alignSelf: 'center',
+  },
+});
+
+const showDialog = (title: string, options: EventOptions, emitEvent: OnEventHandler) => {
+  const cancelIdx = Object.keys(options).length;
+  const timestamp = Date.now();
+
+  ActionSheet.show(
+    {
+      options: [...Object.keys(options), "Cancel"],
+      cancelButtonIndex: cancelIdx,
+      title,
+    },
+    buttonIndex => {
+      if (buttonIndex === cancelIdx) {
+        return;
+      }
+      const label = Object.keys(options)[buttonIndex];
+      const code = options[label];
+
+      emitEvent({ timestamp, code });
+    }
+  )
+}
+
+export const ModalEventButton = ({
+  dialogMessage,
+  eventOptions,
+  label,
+}: {
+  dialogMessage: string,
+  eventOptions: EventOptions;
+  label: string;
+}) => {
+  const emitEvent = useOnEvent();
+  return (
+    <Button
+      large
+      style={styles.eventButton}
+      onPress={() => showDialog(dialogMessage, eventOptions, emitEvent)}>
+      <Text>{label}</Text>
+    </Button>
+  );
+};

src/common/OnEventContext.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { EventCode } from 'src/record/Events';
+
+export interface TimedEvent {
+    timestamp: number,
+    code: EventCode
+  }
+
+export type OnEventHandler = (event: TimedEvent) => void;
+
+export const OnEventContext = React.createContext((event: TimedEvent) => {});
+
+export const useOnEvent: () => OnEventHandler = () => {
+    const context = React.useContext(OnEventContext);
+    return context;
+};

src/home/HomeScreen.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import RN, { StyleProp, StyleSheet, View, AsyncStorage, ViewStyle } from 'react-native';
+import RN, { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import AsyncStorage from '@react-native-community/async-storage';
 import { Button, Body, Content, Grid, Icon, H2,  Header, Left, Right, Row, Col, Text, Title } from 'native-base';
 import { NavigationActions, NavigationScreenProps, createStackNavigator, createAppContainer } from 'react-navigation';
 import { inject, observer } from 'mobx-react';

src/record/RecordScreen.tsx

@@ -7,6 +7,7 @@ import { EventList, MatchEvent } from './EventList';
 import { SandstormPanel } from './SandstormPanel';
 import { ScoutingAppHeader } from '../ScoutingAppHeader';
 import { ReadyModal } from './ReadyModal';
+import { EventTypes } from './Events';
 
 type State = {
   events: MatchEvent[],