Merge pull request #343 from TheStanfordDaily/ui-kitten

UI Kitten
TheStanfordDaily · Jul 23, 2022 · 25bd760 · 25bd760
2 parents d1047aa + b369abb
commit 25bd760
Show file tree

Hide file tree

Showing 29 changed files with 1,099 additions and 864 deletions.
diff --git a/App.js b/App.js
@@ -1,18 +1,30 @@
 import React, { useState, useEffect, useRef } from "react";
-import { View, Text } from "react-native";
-import 'react-native-gesture-handler';
-import { StatusBar } from 'expo-status-bar';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { Image } from "react-native";
+import { StatusBar } from "expo-status-bar";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import Navigation, { navigate } from "./navigation";
-import * as Font from 'expo-font';
-import * as Device from 'expo-device'
-import * as Notifications from 'expo-notifications'
+import * as Font from "expo-font";
+import * as Device from "expo-device"
+import * as Notifications from "expo-notifications"
 import { initializeApp } from "firebase/app"; 
-import { getDatabase, ref, push, set } from 'firebase/database'
-import { getAuth, signInWithCustomToken, signInWithEmailAndPassword } from 'firebase/auth'
-import { APIKEY, MESSAGING_SENDER_ID, APP_ID, MEASUREMENT_ID, FIREBASE_PASSWORD, SERVICE_ACCOUNT_ID } from '@env'
-import { getPostAsync } from './helpers/wpapi'
-import { Strings } from './constants'
+import { getDatabase, ref, push, set } from "firebase/database"
+import { getAuth, signInWithEmailAndPassword } from "firebase/auth"
+import { APIKEY, MESSAGING_SENDER_ID, APP_ID, MEASUREMENT_ID, FIREBASE_PASSWORD, SERVICE_ACCOUNT_ID } from "@env"
+import { getPostAsync } from "./helpers/wpapi"
+import { Strings } from "./constants"
+import * as eva from "@eva-design/eva";
+import { ApplicationProvider, IconRegistry, useTheme } from "@ui-kitten/components";
+import { EvaIconsPack } from "@ui-kitten/eva-icons";
+import { DailyBread as bread } from "./theme"
+import { default as mapping } from "./mapping.json"
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+import ContentStack from "./navigation/ContentStack";
+import SearchStack from "./navigation/SearchStack";
+import Post from "./screens/Post";
+import Home from "./screens/Home";
+import Section from "./screens/Section";
+import { ThemeContext } from "./theme-context";
 
 Notifications.setNotificationHandler({
   handleNotification: async () => ({
@@ -23,8 +35,6 @@ Notifications.setNotificationHandler({
 });
 
 const firebaseConfig = {
-  // This needs to be updated/redacted for security reasons.
-  // Planning to use an environment variable.
   apiKey: APIKEY,
   authDomain: "daily-mobile-app-notifications.firebaseapp.com",
   databaseURL: "https://daily-mobile-app-notifications-default-rtdb.firebaseio.com",
@@ -36,32 +46,68 @@ const firebaseConfig = {
   serviceAccountId: SERVICE_ACCOUNT_ID
 };
 
+const cardinalLogo = require("./assets/media/DailyLogoCardinal.png")
+const whiteLogo = require("./assets/media/DailyLogoWhite.png")
+const Stack = createStackNavigator()
 
 export default function App() {
-  // const isLoadingComplete = useLoadedAssets();
-  // const colorScheme = useColorScheme();
-
   const [fontsLoaded, setFontsLoaded] = useState(false)
-  const [expoPushToken, setExpoPushToken] = useState('');
+  const [expoPushToken, setExpoPushToken] = useState("");
   const [notification, setNotification] = useState(false);
   const notificationListener = useRef();
   const responseListener = useRef();
+  // const isLoadingComplete = useLoadedAssets();
+  // const colorScheme = useColorScheme();
+  const [theme, setTheme] = useState("light")
+
+  const toggleTheme = () => {
+    const next = theme === "light" ? "dark" : "light"
+    setTheme(next)
+  }
+
+  const headerOptions = {
+    headerTitle: () => (<Image
+      style={{ width: 260, height: 30 }}
+      source={theme === "light" ? cardinalLogo : whiteLogo}
+    />),
+    headerStyle: {
+      backgroundColor: bread[theme]["background-basic-color-1"]
+    },
+    headerTintColor: eva[theme]["color-primary-500"]
+  }
+
+  const detailHeaderOptions = {
+    headerTitle: "",
+    headerTransparent: true,
+    headerTintColor: "white",
+    headerBackTitleVisible: false
+  }
+
+  const sectionHeaderOptions = {
+    headerStyle: {
+      backgroundColor: bread[theme]["background-basic-color-1"]
+    },
+    headerTintColor: bread[theme]["color-primary-500"],
+    headerTitleStyle: {
+      color: eva[theme][theme === "light" ? "color-basic-800" : "color-basic-100"]
+    }
+  }
 
   useEffect(() => {
     Font.loadAsync({
       // Loads fonts from static resource.
-      MinionProDisp: require('./assets/fonts/Minion_Pro/MinionPro-Disp.ttf'),
-      MinionProRegular: require('./assets/fonts/Minion_Pro/MinionPro-Regular.ttf'),
-      MinionProItDisp: require('./assets/fonts/Minion_Pro/MinionPro-ItDisp.ttf'),
-      MinionProBoldDisp: require('./assets/fonts/Minion_Pro/MinionPro-BoldDisp.ttf'),
-      MinionProBoldItDisp: require('./assets/fonts/Minion_Pro/MinionPro-BoldItDisp.ttf'),
-      MinionProMediumDisp: require('./assets/fonts/Minion_Pro/MinionPro-MediumDisp.ttf'),
-      MinionProMediumItDisp: require('./assets/fonts/Minion_Pro/MinionPro-MediumItDisp.ttf'),
-      MinionProSemiboldDisp: require('./assets/fonts/Minion_Pro/MinionPro-SemiboldDisp.ttf'),
-      MinionProSemiboldItDisp: require('./assets/fonts/Minion_Pro/MinionPro-SemiboldItDisp.ttf'),
-      LibreFranklinRegular: require('./assets/fonts/Libre_Franklin/LibreFranklin-Regular.ttf'),
-      LibreFranklinBold: require('./assets/fonts/Libre_Franklin/LibreFranklin-Bold.ttf'),
-      LibreFranklinItalic: require('./assets/fonts/Libre_Franklin/LibreFranklin-Italic.ttf'),
+      MinionProDisp: require("./assets/fonts/Minion_Pro/MinionPro-Disp.ttf"),
+      MinionProRegular: require("./assets/fonts/Minion_Pro/MinionPro-Regular.ttf"),
+      MinionProItDisp: require("./assets/fonts/Minion_Pro/MinionPro-ItDisp.ttf"),
+      MinionProBoldDisp: require("./assets/fonts/Minion_Pro/MinionPro-BoldDisp.ttf"),
+      MinionProBoldItDisp: require("./assets/fonts/Minion_Pro/MinionPro-BoldItDisp.ttf"),
+      MinionProMediumDisp: require("./assets/fonts/Minion_Pro/MinionPro-MediumDisp.ttf"),
+      MinionProMediumItDisp: require("./assets/fonts/Minion_Pro/MinionPro-MediumItDisp.ttf"),
+      MinionProSemiboldDisp: require("./assets/fonts/Minion_Pro/MinionPro-SemiboldDisp.ttf"),
+      MinionProSemiboldItDisp: require("./assets/fonts/Minion_Pro/MinionPro-SemiboldItDisp.ttf"),
+      LibreFranklinRegular: require("./assets/fonts/Libre_Franklin/LibreFranklin-Regular.ttf"),
+      LibreFranklinBold: require("./assets/fonts/Libre_Franklin/LibreFranklin-Bold.ttf"),
+      LibreFranklinItalic: require("./assets/fonts/Libre_Franklin/LibreFranklin-Italic.ttf"),
     }).then(setFontsLoaded(true));
     registerForPushNotificationsAsync().then(token => {
       setExpoPushToken(token)
@@ -77,7 +123,7 @@ export default function App() {
             const tokenRef = ref(db, "ExpoPushTokens/" + submatch, userCredential)
             set(tokenRef, Date())
           }).catch((error) => {
-            console.log("error with signing in: ", error)
+            console.log("Could not sign in: ", error)
           })
         }
       }
@@ -101,41 +147,54 @@ export default function App() {
     };
   }, []);
 
-      return (<SafeAreaProvider>
-        <Navigation />
-        <StatusBar />
-      </SafeAreaProvider>)
-
+      return (fontsLoaded &&
+        <NavigationContainer>
+          <IconRegistry icons={EvaIconsPack}/>
+          <ThemeContext.Provider value={{ theme, toggleTheme }}>
+            <ApplicationProvider {...eva} theme={{...eva[theme], ...bread[theme]}} customMapping={mapping}>
+              <SafeAreaProvider>
+                <StatusBar/>
+                <Stack.Navigator initialRouteName="Home">
+                  <Stack.Screen
+                    name="Home"
+                    component={Home}
+                    options={headerOptions}/>
+                  <Stack.Screen name="Post" component={Post} options={detailHeaderOptions} />
+                  <Stack.Screen name="Section" component={Section} options={({ route }) => ({ title: route.params.category.name, ...sectionHeaderOptions })}/>
+                </Stack.Navigator>
+              </SafeAreaProvider>
+            </ApplicationProvider>
+          </ThemeContext.Provider>
+        </NavigationContainer>
+      )
 }
 
 async function registerForPushNotificationsAsync() {
-
   let token;
   if (Device.isDevice) {
     const { status: existingStatus } = await Notifications.getPermissionsAsync();
     let finalStatus = existingStatus;
-    if (existingStatus !== 'granted') {
+    if (existingStatus !== "granted") {
       const { status } = await Notifications.requestPermissionsAsync();
       finalStatus = status;
     }
-    if (finalStatus !== 'granted') {
-      alert('Failed to get push token for push notification!');
+    if (finalStatus !== "granted") {
+      alert("Failed to get push token for push notification!");
       return;
     }
     token = (await Notifications.getExpoPushTokenAsync()).data;
   } else {
-    alert('Must use physical device for Push Notifications');
+    alert("Must use physical device for Push Notifications");
   }
 
-  if (Platform.OS === 'android') {
-    Notifications.setNotificationChannelAsync('default', {
-      name: 'default',
+  if (Platform.OS === "android") {
+    Notifications.setNotificationChannelAsync("default", {
+      name: "default",
       importance: Notifications.AndroidImportance.MAX,
       vibrationPattern: [0, 250, 250, 250],
-      lightColor: '#FF231F7C',
+      lightColor: "#FF231F7C",
     });
   }
 
   return token;
-
 }
diff --git a/Model.js b/Model.js
@@ -0,0 +1,3 @@
+var WPAPI = require("wpapi")
+var wp = new WPAPI({ endpoint: "https://stanforddaily.com/wp-json" })
+export default wp
diff --git a/README.md b/README.md
@@ -9,6 +9,10 @@
   <a href="https://play.google.com/store/apps/details?id=com.Stanford.Daily.App&hl=en_US&gl=US">
     <img alt="Supports Expo Android" longdesc="Supports Expo Android" src="https://img.shields.io/badge/Android-4630EB.svg?style=flat&logo=ANDROID&labelColor=A4C639&logoColor=fff" />
   </a>
+  <!-- Runs with Expo -->
+  <a href="https://github.com/expo/expo">
+    <img alt="Runs with Expo" longdesc="Runs with Expo" src="https://img.shields.io/badge/Runs%20with%20Expo-000.svg?style=flat&logo=EXPO&labelColor=ffffff&logoColor=000)">
+  </a>
 </p>
 
 Official mobile app of the independent, student-run newspaper of Stanford University. Contributions are welcome!

diff --git a/components/CardRow.js b/components/CardRow.js