Merge base-page and youtube-api branches

.expo/README.md

@@ -0,0 +1,17 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What does the "packager-info.json" file contain?
+
+The "packager-info.json" file contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+
+> What does the "settings.json" file contain?
+
+The "settings.json" file contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/packager-info.json

@@ -0,0 +1,10 @@
+{
+  "devToolsPort": 19002,
+  "expoServerPort": 19000,
+  "packagerPort": 19000,
+  "expoServerNgrokUrl": null,
+  "packagerNgrokUrl": null,
+  "ngrokPid": null,
+  "packagerPid": null,
+  "webpackServerPort": null
+}

.expo/settings.json

@@ -0,0 +1,10 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false,
+  "scheme": null,
+  "devClient": false
+}

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+.idea/*

App.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import HomeScreen from "./screens/HomeScreen.js";
+import ChildScreen from "./screens/ChildScreen.js";
+import AdultScreen from "./screens/AdultScreen.js";
+import { theme, styles } from './scripts/constants.js'
+
+const Stack = createStackNavigator();
+
+function App() {
+  return (
+    <NavigationContainer theme={theme}>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={HomeScreen}
+          options={{ title:'Project Rainbow', headerStyle: styles.searchColor}}
+        />
+        <Stack.Screen name="Child Page" component={ChildScreen} options={{headerStyle: styles.searchColor}} />
+        <Stack.Screen name="Adult Page" component={AdultScreen} options={{headerStyle: styles.searchColor}}/>
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default App;

README.md

@@ -1,16 +1,78 @@
 # Cook County Mobile App - Project Rainbow
 
-A mobile app allowing parents and children affeced by COVID-19 to access educational videos and materials created by the Cook County Board.
+A mobile app allowing parents and children affected by COVID-19 to access educational videos and materials created by the Cook County Board.
 
+We are using expo at snack.expo.io for development and to emulate on Android.
 
-## Prerequisites
+## Youtube API
 
-Built from [TechTeam React Native Docker template project](https://github.com/uchicagotechteam/Docker-React).
+### Status
+1. When user opens the app, a hardcoded youtube video appears along with a play/pause button.
+1. When the screen loads, we make an http request to Youtube Data API that dumps the response onto the page
 
-For prerequisites, see the [wiki page](https://github.com/uchicagotechteam/Cook-County-Mobile-App/wiki/Prerequisites).
+Note that the Youtube Data API call won't work if you run it before inserting a real API key on line 33 of `App.js`
 
+Reach out to Dallon on slack/email ([email protected])/FB for any questions or to get the api key
 
-## Building and Running
-Run `make start` to build and run the Docker container. 
+### Next steps
+`TODOs` with more details are in `App.js` file
 
-The project will run locally in `http://localhost:3000` and will compile automatically upon changes to the src code.
+High Priority:
+1. Modify query string of http request to Youtube Data API to pull down list of playlists for that channel as well as videoIds for videos in each playlist
+1. Modify styling to match wireframe that Abbey posted in `youtube-api` slack channel
+1. Extract spaghetti code into components/variables
+1. Figure out to handle API key. Current questions are 1) how to embed API key in env variable, 2) is it even safe to put the API key in an .env file if that is exposed to client after build process and 3) should we make an org gmail acct/API key so that we stop using Rithvik's personal key?
+
+Lower Priority:
+1. Integrate expo build process with Docker
+1. Add a unit test suite
+
+### How to setup for local development
+
+We use expo for development and testing in both iOS and Android
+
+1. Clone down this repo
+1. Put in a real API key on line 33 of `App.js`
+1. Run `yarn install` to install all the required modules
+1. run `yarn ios` to run on iPhone emulator (requires Mac and iPhone emulator setup) or run `yarn android` to run on Android Emulator (requires AndroidStudio and AndroidEmulator setup)
+
+Some things to note:
+1. Whenever you want to install a new package, you have to do `expo install <package-name>` instead of `yarn add ...` or `npm install ...` so that expo can manage the cross-device deps
+1. Features such as webview (required for youtube iframe) do not work in web client, but they do work in iOS and Android
+1. If you haven't developed in XCode with an iOS simulator before, you'll need to set up a simulator
+1. Likewise you'll need to make sure you have AndroidStudio installed and set up an Android Emulator
+
+
+#### Misc documentation
+
+Docs for youtube iframe: https://lonelycpp.github.io/react-native-youtube-iframe/component-props
+
+Setup is based on these instructions:
+
+https://reactnative.dev/docs/environment-setup
+
+https://docs.expo.io/versions/latest/sdk/webview/
+
+https://lonelycpp.github.io/react-native-youtube-iframe/
+
+
+## We have shifted development workflow to snack.expo.io. See instructions below on how to open the project as an Expo snack. youtube-api and base-page branches have been merged.
+
+## Alternatively,
+you can run the project as a snack on snack.expo.io by (1) importing the git repository, (2) installing the 
+necessary dependencies, and (3) running it on the provided Android emulator on snack.expo.io.
+
+### (1) Importing the git repository
+Go to snack.expo.io and click the 3 vertical dots directly to the right of "Project" on the left side 
+of the page. Then click "Import git repository". In the given field, type in the URL of the git repository 
+that you want to import as a snack (in this case, use "https://github.com/uchicagotechteam/Cook-County-Mobile-App/tree/base-page").
+
+### (2) Installing the necessary dependencies
+Once the git repository has been imported as a snack, at the bottom of the development environment there will be 
+text in red recommended dependencies that are needed to run the project. Click on the text in red to install 
+all the necessary dependencies until they are all installed.
+
+### (3) Run the project on an Android emulator
+On the right hand side of the page, click the "Android" button, followed by "Tap to play". Soon, the project 
+should open on the Android emulator (you may have to wait in a queue for a bit).
+If you want to see the uploaded sample video, click "STUDENT" and play the video at the top of the page.

app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "project-rainbow-base-page",
+    "slug": "snack-a1d95dad-f134-4b62-add7-026db2ee28b0",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

components/AdjustableText.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+// Simple wrapper class for React Native's Text component which will take a default font size and a maximum height, and will keep reducing the font size by 1 from the default until the wrapped Text component has <= to the max height.
+// Props include:
+//   style : Style Object - style for the text, excluding font size
+//   maxHeight : Int      - upperbound on the height that the text can take up
+//   text : JSX           - whatever components (probably should only be used with just text) you want to fit within props.maxHeight by shrinking the font  
+//   fontSize : Int       - initial font size that the component will try to use. Will shrink if text is taller than props.maxHeight
+class AdjustableText extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      currentFont : this.props.fontSize
+    };
+  }
+
+
+  render() {
+    return (
+      <Text
+        adjustsFontSizeToFit
+        style={ [this.props.style, { fontSize: this.state.currentFont }] }
+        onTextLayout={ (e) => {
+          let { lines } = e.nativeEvent;
+          if (lines.map(line => {lines.height}).reduce((a, b) => a + b, 0) > this.props.maxHeight) {
+            this.setState({currentFont: this.state.currentFont - 1});
+          }
+        } }
+      >
+        { this.props.text }
+      </Text>
+    );
+  }
+}
+
+export default AdjustableText;