Skip to content

Commit

Permalink
#52 - Added a button to set Meditations, Challenges, and Yoga Videos …
Browse files Browse the repository at this point in the history 
…as featured; change how floating buttons are styled
  • Loading branch information
@cyhamUMICH
cyhamUMICH committed Jul 15, 2021
1 parent f49d01b commit 230e726
Show file tree
Hide file tree
Showing 6 changed files with 171 additions and 130 deletions.
53 changes: 26 additions & 27 deletions src/components/ContentList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,31 +90,31 @@ const ContentList = (props) => {
return (
isTopicsLoaded ?
<View style={styles.fullWidthWindow}>
<Button
buttonStyle={styles.button}
titleStyle={styles.buttonText}
title="Filter"
onPress={() => {
setFilterModalVisible(true);
}}></Button>
<ContentCards
style={styles.cardList}
contentType={props.contentType}
filteredList={filteredList}
contentComponent={props.contentComponent}
navigation={props.navigation} />
<FilterModal
allData={props.data}
topicsList={topicsList}
filterBy={filterBy}
visibleFunction={setFilterModalVisible}
visible={filterModalVisible}
filterSettingsFunction={setFilterSettings}
filterSettings={filterSettings}
filteredListFunction={setFilteredList}
filteredList={filteredList}/>
<View style={styles.floatingActionView}>
<TouchableOpacity style={styles.floatingActionButton}
<View style={styles.floatingActionView}>
<Button
buttonStyle={styles.button}
titleStyle={styles.buttonText}
title="Filter"
onPress={() => {
setFilterModalVisible(true);
}}></Button>
<ContentCards
style={styles.cardList}
contentType={props.contentType}
filteredList={filteredList}
contentComponent={props.contentComponent}
navigation={props.navigation} />
<FilterModal
allData={props.data}
topicsList={topicsList}
filterBy={filterBy}
visibleFunction={setFilterModalVisible}
visible={filterModalVisible}
filterSettingsFunction={setFilterSettings}
filterSettings={filterSettings}
filteredListFunction={setFilteredList}
filteredList={filteredList}/>
<TouchableOpacity style={styles.floatingActionButtonBottomRight}
onPress={() => props.navigation.navigate("Add".concat(props.contentComponent), {
topics: topicsList,
navigation: props.navigation
Expand All @@ -123,8 +123,7 @@ const ContentList = (props) => {
<Icon name="plus" type="font-awesome" color={colors.text} />
</View>
</TouchableOpacity>
</View>

</View>
</View>
: <LoadingSpinner />
);
Expand Down
63 changes: 63 additions & 0 deletions src/components/SetFeatured.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React, { useState, useEffect } from 'react';
import { View, TouchableOpacity, Alert } from "react-native";
import { Icon } from 'react-native-elements';
import { styles } from '../styles/Styles';
import { colors } from '../styles/Colors';
import * as firebase from 'firebase/app';
import "firebase/firestore";

const SetFeatured = (props) => {
const [isFeatured, setIsFeatured] = useState(props.item.featured);

const submit = async (newValue) => {
const dbh = firebase.firestore();
const docRef = await dbh.collection(props.firebaseCollectionName).doc(props.item.contentID);

await docRef.update({
featured: newValue
})
.then(() => {
let message = (newValue) ? "featured." : "not featured.";
message = "This content is now " + message;

Alert.alert(
"Content Successfully Updated",
message,
[
{text: "OK"}
]
);
})
.catch(() => {
Alert.alert(
"Error Updating Content",
"There was an error when updating the content.",
[
{text: "OK"}
]
);
});
};

return(
<TouchableOpacity style={styles.floatingActionButtonTopRight}
onPress={async () => {
// Update Firestore
await submit(!isFeatured);
// Update the item so change persists in app even without refreshing the content list data from Firestore
props.item.featured = !isFeatured;
setIsFeatured(!isFeatured);
}}>
<View style={styles.floatingActionIcon}>
{ isFeatured ?
<Icon name="star" type="material"
color={colors.text} size={styles.setFeaturedIconSize}/>
:
<Icon name="star-outline" type="material" color={colors.text} size={styles.setFeaturedIconSize}/>
}
</View>
</TouchableOpacity>
);
};

export default SetFeatured;
49 changes: 25 additions & 24 deletions src/screens/Challenge.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Tags from '../components/Tags';
import { styles } from '../styles/Styles';
import { Button } from 'react-native-elements';
import ContentList from '../components/ContentList';
import SetFeatured from "../components/SetFeatured";
import LoadingSpinner from '../components/LoadingSpinner';
import * as firebase from 'firebase/app';
import "firebase/firestore";
Expand Down Expand Up @@ -99,31 +100,31 @@ const Challenge = ({route}, props) => {


return (
<View style={styles.fullWidthWindow}>

<Image source={{ uri: item.imagePath }}
style={styles.challengePhoto}></Image>
<Tags difficulty={item.difficulty} topics={item.topics}></Tags>
<Text style={styles.contentTitle}>{item.title}</Text>
<Text style={styles.contentDesc}>{item.description}{"\n"}</Text>
<Text>Challenge starts on: {theStartDate}</Text>
<Text>Challenge ends on: {theEndDate}</Text>
<Text>This challenge is {route.params.numDays} day(s) long {"\n"}</Text>
<View style={styles.app}>
{
isLoaded ?
<ChallengeDayList
contentComponent="ChallengeDay"
navigation={props.navigation}
contentType="challengeDays"
data={data.sort((docA, docB) => docB.dateAdded - docA.dateAdded)}
filterBy="Difficulty,Language,Topic" />
<View style={styles.app}>
{
isLoaded ?
<View style={styles.fullWidthWindow}>
<View style={styles.floatingActionView}>
<Image source={{ uri: item.imagePath }}
style={styles.challengePhoto}></Image>
<SetFeatured firebaseCollectionName="challenges" item={item} />
<Tags difficulty={item.difficulty} topics={item.topics}></Tags>
<Text style={styles.contentTitle}>{item.title}</Text>
<Text style={styles.contentDesc}>{item.description}{"\n"}</Text>
<Text>Challenge starts on: {theStartDate}</Text>
<Text>Challenge ends on: {theEndDate}</Text>
<Text>This challenge is {route.params.numDays} day(s) long {"\n"}</Text>
<ChallengeDayList
contentComponent="ChallengeDay"
navigation={props.navigation}
contentType="challengeDays"
data={data.sort((docA, docB) => docB.dateAdded - docA.dateAdded)}
filterBy="Difficulty,Language,Topic" />
</View>
</View>
: <LoadingSpinner />
}
</View>

</View>

}
</View>
);
};

Expand Down
60 changes: 13 additions & 47 deletions src/screens/Meditation.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@

import React, { useEffect, useState } from "react";
import { View, Text, Image, ScrollView, Alert } from "react-native";
import { Audio } from 'expo-av';

// import React, { useState } from "react";
// import { View, Text, Image, ScrollView, Button } from "react-native";
// import { TouchableOpacity } from "react-native-gesture-handler";
// >>>>>>> Stashed changes
import Controller from "../components/Controller";
import PlayerSlider from "../components/PlayerSlider";
import SetFeatured from "../components/SetFeatured";
import LoadingSpinner from "../components/LoadingSpinner";
import { styles } from '../styles/Styles';

Expand All @@ -23,26 +18,6 @@ const Meditation = ({route}) => {
// These must be initialized to null due to the way if conditions are written throughout.
const [sound, setSound] = useState(null);
const [soundStatus, setSoundStatus] = useState(null);
// =======
// import MaterialIcons from "react-native-vector-icons/MaterialIcons";
// import SendContent from '../components/SendContent';

// const goNext = () => {
// console.log("go forward 30 seconds");
// };
// const goPrv = () => {
// console.log("go back 30 seconds");
// };
// const goPause = () => {
// console.log("paused");
// }
// const onShareThis = () => {

// }

// const Meditation = ({route}, props) => {
// const [currentValue, setCurrentValue] = useState(0);
// >>>>>>> Stashed changes

const item = route.params;

Expand Down Expand Up @@ -173,27 +148,18 @@ const Meditation = ({route}) => {
{
isLoaded ?
<View style={styles.fullWidthWindow}>
{/* =======
<View style={styles.fullWidthWindow}>
<TouchableOpacity onPress={() => props.navigation.navigate("ShareContent")}>
<MaterialIcons name="textsms" size={20}/>
</TouchableOpacity>
>>>>>>> Stashed changes */}

<Image source={{ uri: item.imagePath }}
style={styles.meditationPhoto}></Image>
<Text style={styles.contentTitle}>{item.title}</Text>

<View style={styles.sliderAndController}>
<PlayerSlider currentValue={soundStatus ? soundStatus.positionMillis / 1000 : 0} setCurrentValue={(position) => goToPosition(position)} duration={item.duration}/>
<Controller isPlaying={isPlaying} quickForward={quickForward} quickBackward={quickBackward} playPause={playPause} />
</View>

<ScrollView style={styles.contentDescriptionSpacer}>
<Text style={styles.contentDesc}>{item.description}</Text>
</ScrollView>
<View style={styles.floatingActionView}>
<Image source={{ uri: item.imagePath }} style={styles.meditationPhoto} />
<SetFeatured firebaseCollectionName="meditations" item={item} />
<Text style={styles.contentTitle}>{item.title}</Text>
<View style={styles.sliderAndController}>
<PlayerSlider currentValue={soundStatus ? soundStatus.positionMillis / 1000 : 0} setCurrentValue={(position) => goToPosition(position)} duration={item.duration}/>
<Controller isPlaying={isPlaying} quickForward={quickForward} quickBackward={quickBackward} playPause={playPause} />
</View>
<ScrollView style={styles.contentDescriptionSpacer}>
<Text style={styles.contentDesc}>{item.description}</Text>
</ScrollView>
</View>
</View>
: <LoadingSpinner />
}
Expand Down
29 changes: 15 additions & 14 deletions src/screens/Yoga.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState } from "react";
import { View, Text, Image, ScrollView } from "react-native";
import Controller from "../components/Controller";
import PlayerSlider from "../components/PlayerSlider";
import SetFeatured from "../components/SetFeatured";
import Tags from '../components/Tags';
import { styles } from '../styles/Styles';

Expand All @@ -21,20 +22,20 @@ const Yoga = ({route}) => {
const item = route.params;
return (
<View style={styles.fullWidthWindow}>
<Image source={{ uri: item.imagePath }}
style={styles.meditationPhoto}></Image>
{/* <Tags difficulty={item.difficulty} topics={item.topics}></Tags> */}
<Text style={styles.contentTitle}>{item.title}</Text>

<View style={styles.sliderAndController}>
<PlayerSlider currentValue={currentValue} setCurrentValue={setCurrentValue} duration={item.duration}/>
<Controller onNext={goNext} onPrv={goPrv} onPause={goPause} currentValue={currentValue} setCurrentValue={setCurrentValue} />
</View>

<ScrollView style={styles.contentDescriptionSpacer}>
<Text style={styles.contentDesc}>{item.description}</Text>
</ScrollView>

<View style={styles.floatingActionView}>
<Image source={{ uri: item.imagePath }}
style={styles.meditationPhoto}></Image>
<SetFeatured firebaseCollectionName="yoga" item={item} />
{/* <Tags difficulty={item.difficulty} topics={item.topics}></Tags> */}
<Text style={styles.contentTitle}>{item.title}</Text>
<View style={styles.sliderAndController}>
<PlayerSlider currentValue={currentValue} setCurrentValue={setCurrentValue} duration={item.duration}/>
<Controller onNext={goNext} onPrv={goPrv} onPause={goPause} currentValue={currentValue} setCurrentValue={setCurrentValue} />
</View>
<ScrollView style={styles.contentDescriptionSpacer}>
<Text style={styles.contentDesc}>{item.description}</Text>
</ScrollView>
</View>
</View>
);
};
Expand Down
Loading

0 comments on commit 230e726

Please sign in to comment.