Skip to content

Commit

Permalink
Dark mode has decent functionality now.
Browse files Browse the repository at this point in the history
  • Loading branch information
MatthewTurk247 committed Jul 23, 2022
1 parent 8869c35 commit b369abb
Show file tree
Hide file tree
Showing 11 changed files with 206 additions and 187 deletions.
38 changes: 34 additions & 4 deletions App.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ 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() {
Expand All @@ -63,6 +65,34 @@ export default function App() {
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.
Expand Down Expand Up @@ -121,16 +151,16 @@ export default function App() {
<NavigationContainer>
<IconRegistry icons={EvaIconsPack}/>
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<ApplicationProvider {...eva} theme={{...eva[theme], ...bread}} customMapping={mapping}>
<ApplicationProvider {...eva} theme={{...eva[theme], ...bread[theme]}} customMapping={mapping}>
<SafeAreaProvider>
<StatusBar/>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{headerTitle: () => (<Image style={{ width: 260, height: 30 }} source={require("./assets/media/DailyLogoCardinal.png")} />), headerStyle: { backgroundColor: theme === "light" ? "white" : "#222B45" }, headerTintColor: bread["color-primary-500"]}}/>
<Stack.Screen name="Post" component={Post} options={{ headerTitle: "", headerTransparent: true, headerTintColor: "white" }} />
<Stack.Screen name="Section" component={Section} options={({ route }) => ({ title: route.params.category.name })}/>
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>
Expand Down
5 changes: 1 addition & 4 deletions components/Carousel.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,7 @@ export default function Carousel(props) {
}

return (
<PagerView
style={styles.container}
initialPage={0}
overdrag>
<PagerView style={styles.container} initialPage={0} overdrag>
{articles.map((item, index) => {
return (
<View collapsable={false} style={{ flex: 1, flexDirection: "row" }} key={index}>
Expand Down
16 changes: 6 additions & 10 deletions components/Diptych.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,7 @@ export default function Diptych(props) {

const Header = (props) => (
<React.Fragment>
<Image
source={{ uri: props.source }}
style={{ flex: 1, height: 192 }}
/>
<Image source={{ uri: props.source }} style={{ flex: 1, height: 192 }} />
</React.Fragment>
)

Expand All @@ -30,15 +27,12 @@ export default function Diptych(props) {
}

return (
<PagerView
style={styles.container}
initialPage={0}
overdrag>
<PagerView style={styles.container} initialPage={0} overdrag>
{_.chunk(newsArticles, 2).map((couplet, index) => (
<View collapsable={false} style={{ flex: 1, flexDirection: "row" }} key={index}>
{couplet.map((item) => (
<Card
style={{ flex: 1, height: 300, marginHorizontal: 5 }}
style={styles.card}
header={<Header source={item["jetpack_featured_media_url"]}/>}
footer={<Footer date={item.date}/>}
{...{...props, onPress: () => props.navigation.navigate("Post", { article: item })}}>
Expand All @@ -65,7 +59,9 @@ const styles = StyleSheet.create({
},
card: {
flex: 1,
margin: 2
height: 300,
marginHorizontal: 5
// margin: 2
},
headerTextContainer: {
paddingHorizontal: 20,
Expand Down
7 changes: 2 additions & 5 deletions components/Shelf.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react"
import { View, StyleSheet, Image } from "react-native"
import { Button, Divider, Layout, List, ListItem, Text, useTheme } from "@ui-kitten/components"
import { Divider, ListItem, Text, useTheme } from "@ui-kitten/components"
import PagerView from "react-native-pager-view"
import { decode } from "html-entities"
import _ from "lodash"
Expand All @@ -22,10 +22,7 @@ export default function Shelf(props) {
const inactiveColor = theme[props.alternate ? "color-primary-200" : "background-color-basic-2"]

return (
<PagerView
style={[styles.container, { backgroundColor: inactiveColor }]}
initialPage={0}
overdrag>
<PagerView style={[styles.container, { backgroundColor: inactiveColor }]} initialPage={0} overdrag>
{_.chunk(opinionsArticles, 3).map((triplet, index) => (
<View collapsable={false} style={{ flex: 1, flexDirection: "column" }} key={index}>
{triplet.map((item) => (
Expand Down
40 changes: 39 additions & 1 deletion constants/Sections.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,30 @@ export default {
slug: "news",
id: 3,
desks: {
ACADEMICS: {
name: "Academics",
slug: "academics-news",
id: 4408
},
BIZTECH: {
name: "Business & Technology",
slug: "business-and-technology-news",
id: 16821
},
CAMPUS_LIFE: {
name: "Campus Life",
slug: "campus-life-news",
id: 4423
},
GRADUATE_STUDENTS: {
name: "Graduate Students",
slug: "graduate-students",
id: 75212
},
UNIVERSITY: {
name: "University",
slug: "university-news",
id: 4424
}
}
},
Expand All @@ -34,7 +54,25 @@ export default {
ARTS_LIFE: {
name: "Arts & Life",
slug: "artsAndLife",
id: 25
id: 25,
desks: {
CULTURE: {
name: "Culture",
slug: "culture",
},
MUSIC: {
name: "Music",
slug: "music-intermission",
},
READS: {
name: "Reads",
slug: "reads",
},
SCREEN: {
name: "Screen",
slug: "screen",
}
}
},
CARTOONS: {
name: "Cartoons",
Expand Down
6 changes: 5 additions & 1 deletion constants/Spacing.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
export default {

extraSmall: 2,
small: 4,
medium: 8,
large: 16,
extraLarge: 24,
}
1 change: 0 additions & 1 deletion dummy.json

This file was deleted.

55 changes: 18 additions & 37 deletions helpers/format.js
Original file line number Diff line number Diff line change
@@ -1,50 +1,31 @@
import { Dimensions, PixelRatio, TouchableWithoutFeedback } from 'react-native';
import moment from 'moment';
import "moment-timezone";
import { Dimensions } from "react-native";

const {width, height} = Dimensions.get('window');
const { width, height } = Dimensions.get("window");
const scale = width/320
const MONTHS = ["Jan.", "Feb.", "March", "April", "May", "June", "July", "Aug.", "Sept.", "Oct.", "Nov.", "Dec."]

export const formatDate = post => moment.utc(post.postDateGmt).tz("America/Los_Angeles").toDate().toLocaleDateString();
export const getThumbnailURL = ({thumbnailInfo}) => thumbnailInfo ? (thumbnailInfo.urls.mediumLarge || thumbnailInfo.urls.full): null;
// export const formatAuthors = ({tsdAuthors}) => (tsdAuthors || []).map(e => e.displayName).join(", ");
export const itemize = (elements) => {
return [elements.slice(0, -1).join(", "), elements.length > 2 ? elements.last() : elements].join(" and ")
}
export function normalize(size) {
const newSize = size * scale
if (Platform.OS === 'ios') {
return Math.round(PixelRatio.roundToNearestPixel(newSize))
} else {
return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2
}
}

export function decodeEntityHTML(message) {
const doc = new DOMParser().parseFromString(message, "text/html");
return doc.documentElement.textContent;
}


// const inferred = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" }) // undefined means it auto-detects locale
// const DIVISIONS = [
// { amount: 60, name: 'seconds' },
// { amount: 60, name: 'minutes' },
// { amount: 24, name: 'hours' },
// { amount: 7, name: 'days' },
// { amount: 4.34524, name: 'weeks' },
// { amount: 12, name: 'months' },
// { amount: Number.POSITIVE_INFINITY, name: 'years' }
// ]

// export function relativeDate(date) {
// let duration = (date - new Date()) / 1000

// for (let i = 0; i <= DIVISIONS.length; i++) {
// const division = DIVISIONS[i]
// if (Math.abs(duration) < division.amount) {
// return inferred.format(Math.round(duration), division.name)
// }
// duration /= division.amount
// }
// }
export const formatDate = (instance) => {
let formattedMonth = MONTHS[instance.getMonth()]
let formattedDay = instance.getDate()
let formattedYear = instance.getFullYear()
let formattedHours = instance.getHours() % 12
if (formattedHours == 0) {
formattedHours = 12
}
let formattedMinutes = instance.getMinutes()
if (formattedMinutes < 10) {
formattedMinutes = `0${formattedMinutes}`
}
let formattedMeridian = instance.getUTCHours % 24 < 7 ? "a.m." : "p.m."
return `${formattedMonth} ${formattedDay}, ${formattedYear}, ${formattedHours}:${formattedMinutes} ${formattedMeridian}`
}
45 changes: 17 additions & 28 deletions screens/Home.js
Original file line number Diff line number Diff line change
@@ -1,38 +1,27 @@
import React, { useEffect, useState } from "react";
import { View, ScrollView, StyleSheet } from "react-native";
import { Sections } from "../constants";
import { getHomeAsync, getCategoryAsync, getHomeMoreAsync } from "../helpers/wpapi";
import LightboxGallery from "../components/LightboxGallery";
import { getThumbnailURL, formatDate } from "../helpers/format";
import { Divider, Layout, Text } from "@ui-kitten/components";
import { ScrollView, StyleSheet } from "react-native";
import { Divider, Layout, useTheme } from "@ui-kitten/components";
import Carousel from "../components/Carousel";
import Diptych from "../components/Diptych";
import Mark from "../components/Mark";
import Shelf from "../components/Shelf";
import Wildcard from "../components/Wildcard";
import Shelf from "../components/Shelf"; // Could probably have an index file with all the sections and import all of them on one line.
import Carousel from "../components/Carousel";
import Model from "../Model";
import { post } from "superagent";

const dummyData = require("../dummy.json")

const thumbnailImage = (details) => {
console.log(details.sizes.thumbnail)
}

const homeMember = (article, section) => {
if (section.id === Sections.FEATURED.id) {
return article.categories.includes(Sections.FEATURED.id)
}
/*if (section.id === Sections.THE_GRIND.id || section.id === Sections.ARTS_LIFE.id) {
return article.categories.includes(Sections.THE_GRIND.id) || article.categories.includes(Sections.ARTS_LIFE.id)
}*/
return article.categories.includes(section.id) && !article.categories.includes(Sections.FEATURED.id)
}
import { Sections } from "../constants";

export default function Home({ navigation }) {
const [articles, setArticles] = useState({}) // or just append to articles like before or useReducer
const [articles, setArticles] = useState({})
const [pageNumber, setPageNumber] = useState(0)
const [articlesLoaded, setArticlesLoaded] = useState(false)

const homeMember = (article, section) => {
if (section.id === Sections.FEATURED.id) {
return article.categories.includes(Sections.FEATURED.id)
}

return article.categories.includes(section.id) && !article.categories.includes(Sections.FEATURED.id)
}

useEffect(() => {
Model.posts().perPage(50).get().then(posts => {
for (let value of Object.values(Sections)) {
Expand All @@ -54,12 +43,12 @@ export default function Home({ navigation }) {
<Carousel articles={articles[Sections.FEATURED.slug]} navigation={navigation} />
<Mark category={Sections.NEWS} seed={articles[Sections.NEWS.slug]} navigation={navigation} />
<Diptych articles={articles[Sections.NEWS.slug]} navigation={navigation} />
<Divider marginTop={8}/>
<Divider marginTop={8} />
<Mark category={Sections.OPINIONS} seed={articles[Sections.OPINIONS.slug]} navigation={navigation} />
<Shelf articles={articles[Sections.OPINIONS.slug]} navigation={navigation} />
<Mark category={Sections.SPORTS} seed={articles[Sections.SPORTS.slug]} navigation={navigation} />
<Diptych articles={articles[Sections.SPORTS.slug]} navigation={navigation} />
<Divider marginTop={8}/>
<Divider marginTop={8} />
<Wildcard articles={articles["culture"]} navigation={navigation} random />
<Divider/>
{articles[Sections.HUMOR.slug].length >= 3 && (
Expand Down
Loading

0 comments on commit b369abb

Please sign in to comment.