Youtube api

.gitignore

@@ -1 +1,15 @@
-node_modules/
+node_modules/**/*
+.env
+.expo*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

App.js

@@ -0,0 +1,76 @@
+import React, { useEffect, useState, useCallback, useRef } from "react";
+import { Button, View, Alert, Text } from "react-native";
+import YoutubePlayer from "react-native-youtube-iframe";
+import axios from 'axios';
+
+
+export default function App() {
+
+  // logic to maintain state of video play status
+  const [playing, setPlaying] = useState(false);
+
+  // logic to send alert when video ends
+  const onStateChange = useCallback((state) => {
+    if (state === "ended") {
+      setPlaying(false);
+      Alert.alert("video has finished playing!");
+    }
+  }, []);
+
+  // logic for play/pause button
+  const togglePlaying = useCallback(() => {
+    setPlaying((prev) => !prev);
+  }, []);
+
+  // logic to maintain state of request to youtube API
+  let [responseData, setResponseData] = useState('');
+
+  // TODO: set up env vars with expo so that we can store API KEY in .env file
+ // but we do need to see if there's a safer way to store the API key
+ // since env variables are bundled into the app's build and thus can be exposed to clients after the app is shipped
+ // more info here: https://docs.expo.io/guides/environment-variables/
+ // const API_KEY = process.env.EXPO_CCMA_YT_API_KEY;
+ const API_KEY = "hello world"; // dummy value to build
+
+ // TODO: right now the url passed into axios just gets basic stats of the channel by username
+ // read Youtube Data API docs to find what methods we need to list the channel's playlists and list videos for a playlist
+ // we need a video ID to be able to render that video in the IFrame
+ // docs here: https://developers.google.com/youtube/v3/docs/channels/list
+
+  // logic to fetch data from youtube api
+  const fetchData = useCallback(() => {
+    axios({
+      "method": "GET",
+      "url": `https://youtube.googleapis.com/youtube/v3/channels?part=snippet%2CcontentDetails%2Cstatistics&forUsername=GoogleDevelopers&key=${API_KEY}`
+
+    })
+    .then((response) => {
+      setResponseData(response.data)
+      console.log(response.data)
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+  }, [])
+
+  // useEffect function runs when function initially loads
+  // and runs again whenever there is a change to data in second argument array (fetchData)
+  // beware of infinite loops
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+
+  return (
+    <View>
+      <YoutubePlayer
+        height={300}
+        play={playing}
+        videoId={"iee2TATGMyI"}
+        onChangeState={onStateChange}
+      />
+      <Button title={playing ? "pause" : "play"} onPress={togglePlaying} />
+      <Text>{JSON.stringify(responseData)}</Text>
+    </View>
+  );
+}

README.md

@@ -1,16 +1,51 @@
-# Cook County Mobile App - Project Rainbow
+## Youtube API
 
-A mobile app allowing parents and children affeced by COVID-19 to access educational videos and materials created by the Cook County Board.
+### 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
 
+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`
 
-## Prerequisites
+Reach out to Dallon on slack/email ([email protected])/FB for any questions or to get the api key
 
-Built from [TechTeam React Native Docker template project](https://github.com/uchicagotechteam/Docker-React).
+### Next steps
+`TODOs` with more details are in `App.js` file
 
-For prerequisites, see the [wiki page](https://github.com/uchicagotechteam/Cook-County-Mobile-App/wiki/Prerequisites).
+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
 
-## Building and Running
-Run `make start` to build and run the Docker container. 
+### 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/
 
-The project will run locally in `http://localhost:3000` and will compile automatically upon changes to the src code.

app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "yt-demo",
+    "slug": "yt-demo",
+    "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'],
+  };
+};