added study screen

App/Card.ts

@@ -1,5 +1,5 @@
 import shortid from "shortid"
-import { observable } from "mobx"
+import { computed, observable } from "mobx"
 
 export default class Card {
 	id: string = shortid.generate()
@@ -9,4 +9,22 @@ export default class Card {
 
 	@observable
 	back = ""
+
+	@observable
+	lastStudied: Date = new Date(0)
+
+	@observable
+	baseConfidence = 0.5
+
+	// (0, 1)
+	// (24, 0.8)
+	// (72, 0.5)
+	// y_1~ab^(x_1)
+	// a = 1.00214
+	// b = 0.990448
+	@computed
+	get confidence(): number {
+		const hoursSinceLastStudy = (Date.now() - Number(this.lastStudied)) / (1000 * 60 * 60)
+		return Math.max(0.2, Math.min(1, 1.00214 * 0.990448 ** hoursSinceLastStudy * this.baseConfidence))
+	}
 }

App/DetailsScreen/Cards/index.tsx

@@ -15,6 +15,7 @@ import { useNavigation } from "@react-navigation/native"
 
 	context: RootStore
 
+	// component does not automatically update after editing set
 	componentDidMount(): void {
 		this.props.navigation.addListener("focus", (): void => {
 			this.forceUpdate()

App/DetailsScreen/index.tsx

@@ -5,8 +5,10 @@ import context from "../context"
 import { ScrollView, Text, View } from "react-native"
 import { observer } from "mobx-react"
 
-@observer
-export default class Details extends React.Component<{
+import { Button } from "react-native-paper"
+import { useNavigation } from "@react-navigation/native"
+
+@observer class Details extends React.Component<{
 	navigation: any
 }> {
 	static contextType = context
@@ -22,8 +24,20 @@ export default class Details extends React.Component<{
 				</ScrollView>
 				<View>
 					<Cards />
+					<Button
+						mode="contained"
+						style={{
+							margin: 20,
+							marginTop: 0,
+						}}
+						onPress={(): void => { this.props.navigation.navigate("study") }}
+					>
+						Study
+					</Button>
 				</View>
 			</View>
 		)
 	}
 }
+
+export default (props): JSX.Element => <Details navigation={useNavigation()} {...props} />

App/Root.tsx

@@ -5,6 +5,7 @@ import HomeScreen from "./HomeScreen"
 import HomeScreenHeaderRight from "./HomeScreen/HeaderRight"
 import React from "react"
 import RootStore from "./RootStore"
+import StudyScreen from "./StudyScreen"
 import context from "./context"
 import styles from "./styles"
 import { NavigationContainer } from "@react-navigation/native"
@@ -62,6 +63,13 @@ export default class Root extends React.Component {
 								headerRight: (): JSX.Element => <DetailsScreenHeaderRight />,
 							}}
 						/>
+						<Stack.Screen
+							name="study"
+							component={StudyScreen}
+							options={{
+								title: "Study",
+							}}
+						/>
 					</Stack.Navigator>
 				</View>
 			</NavigationContainer>

App/Set.ts

@@ -1,6 +1,6 @@
 import Card from "./Card"
 import shortid from "shortid"
-import { observable } from "mobx"
+import { computed, observable } from "mobx"
 
 export default class Set {
 	id: string = shortid.generate()
@@ -13,4 +13,13 @@ export default class Set {
 
 	@observable
 	cards: Card[] = []
+
+	@computed
+	get studyCards(): Card[] {
+		return this.cards.slice().sort((a, b) => (
+			a.confidence === b.confidence ? 0 :
+				a.confidence > b.confidence ? 1 :
+					-1
+		))
+	}
 }

App/StudyScreen/Face/index.tsx

@@ -0,0 +1,23 @@
+import Icon from "react-native-vector-icons/FontAwesome5"
+import React from "react"
+import { TouchableOpacity } from "react-native"
+import { observer } from "mobx-react"
+
+@observer
+export default class Face extends React.Component<{
+	icon: string
+	color: string
+	onPress: any
+}> {
+	render(): JSX.Element {
+		return (
+			<TouchableOpacity onPress={this.props.onPress}>
+				<Icon
+					name={this.props.icon}
+					size={96}
+					color={this.props.color}
+				/>
+			</TouchableOpacity>
+		)
+	}
+}

App/StudyScreen/index.tsx

@@ -0,0 +1,61 @@
+import Face from "./Face"
+import FlipCard from "../DetailsScreen/Cards/FlipCard"
+import React from "react"
+import RootStore from "../RootStore"
+import context from "../context"
+import { View } from "react-native"
+import { observer } from "mobx-react"
+
+@observer
+export default class StudyScreen extends React.Component {
+	static contextType = context
+
+	context: RootStore = null
+
+	render(): JSX.Element {
+		return (
+			<View style={{ flex: 1 }}>
+				<View
+					style={{
+						alignItems: "center",
+						aspectRatio: 1,
+						justifyContent: "center",
+						width: "100%",
+					}}
+				>
+					<FlipCard front={this.context.selectedSet.studyCards[0].front} back={this.context.selectedSet.studyCards[0].back} />
+				</View>
+				<View
+					style={{
+						alignItems: "center",
+						flex: 1,
+					}}
+				>
+					<View
+						style={{
+							flexDirection: "row",
+							justifyContent: "space-evenly",
+							width: "100%",
+						}}
+					>
+						<Face
+							icon="frown"
+							color="#f44336"
+							onPress={(): void => console.log(":(")}
+						/>
+						<Face
+							icon="meh"
+							color="#ffc107"
+							onPress={(): void => console.log(":|")}
+						/>
+						<Face
+							icon="smile"
+							color="#4caf50"
+							onPress={(): void => console.log(":)")}
+						/>
+					</View>
+				</View>
+			</View>
+		)
+	}
+}

App/index.tsx

@@ -1,8 +1,10 @@
 import "react-native-gesture-handler"
 
+import Card from "./Card"
 import React from "react"
 import Root from "./Root"
 import RootStore from "./RootStore"
+import Set from "./Set"
 import context from "./context"
 import { AsyncStorage } from "react-native"
 import { AsyncTrunk } from "mobx-sync"
@@ -24,6 +26,11 @@ export default class App extends React.Component {
 		})
 
 		trunk.init().then(() => {
+			for (let i = 0; i < this.store.sets.length; i++) {
+				this.store.sets[i] = Object.assign(new Set(), this.store.sets[i])
+				this.store.sets[i].cards.map((card) => Object.assign(new Card(), card))
+			}
+
 			this.initialized = true
 		})
 	}