Skip to content

Commit cf3c63f

Browse files
malitherlmalitherl
committed
refactor hooks
1 parent 00e0b78 commit cf3c63f

File tree

21 files changed

+20720
-12422
lines changed

21 files changed

+20720
-12422
lines changed

‎App.tsx‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Auth from './components/AuthScreen/Auth'
88
import { NavigationContainer } from '@react-navigation/native';
99
import { createNativeStackNavigator } from '@react-navigation/native-stack';
1010
import Home from './components/HomeScreen/Home'
11-
import TodoList from './components/ForYouScreen/ForYou';
11+
import ForYou from './components/ForYouScreen/ForYou';
1212
import RecentBooks from './components/RecentsScreen/RecentBooks';
1313
import { ParagraphCalc } from './components/ReaderScreen/ParagraphCalc';
1414

@@ -49,7 +49,7 @@ const Container = ({navigation} : any) => {
4949

5050
const Reader = ({navigation} : any) => {
5151

52-
return <TodoList navigation={navigation}/>
52+
return <ForYou navigation={navigation}/>
5353
}
5454

5555

@@ -80,17 +80,9 @@ const Current = ({navigation} : any) => {
8080
)
8181
}
8282

83-
const Para = ({navigation} : any) => {
84-
return (
85-
<View>
86-
<ParagraphCalc />
87-
</View>
88-
)
89-
}
90-
9183

9284
const Stack = createNativeStackNavigator();
93-
85+
//TODO: fix the naming conventions
9486
export default function App() {
9587
return (
9688
<NavigationContainer>
@@ -99,7 +91,8 @@ export default function App() {
9991
<Stack.Screen name="Home" component={Container} />
10092
<Stack.Screen name="Snippets" component={Content}/>
10193
<Stack.Screen name="CurrentBook" component={Current} />
102-
<Stack.Screen name="RecentBooks" component={Para}/>
94+
<Stack.Screen name="RecentBooks" component={RecentBooks}/>
95+
<Stack.Screen name="Paragraphs" component={ParagraphCalc}/>
10396
</Stack.Navigator>
10497
</UserContextProvider>
10598
</NavigationContainer>

‎components/ForYouScreen/ButtonPanel.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Dimensions, View, Text, StyleSheet, FlatList } from 'react-native'
2+
import { Divider } from '@rneui/themed';
3+
import { FontAwesome } from '@expo/vector-icons';
4+
import {MoreInfo} from './MoreInfo';
5+
import Like from './Like'
6+
export const ButtonPanel = (props: any) => {
7+
return (
8+
<View>
9+
<View style={styles.panel}>
10+
<Like id={props.id} />
11+
<MoreInfo />
12+
</View>
13+
</View>
14+
)
15+
}
16+
17+
18+
const styles = StyleSheet.create({
19+
panel: {
20+
display: 'flex',
21+
flexDirection: 'row',
22+
alignItems: 'center',
23+
justifyContent: 'space-around',
24+
position: 'relative',
25+
height: 60,
26+
width: '100%',
27+
backgroundColor: 'transparent',
28+
padding: 10,
29+
},
30+
});

‎components/ForYouScreen/ForYou.tsx‎

Lines changed: 3 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,11 @@
1-
import React, { useEffect, useState } from 'react'
21
import { View, StyleSheet, Dimensions } from 'react-native'
32
import { Text } from '@rneui/base'
43
import { Styles } from '../../lib/constants'
5-
import { useUser } from '../UserContext'
64
/** URL polyfill. Required for Supabase queries to work in React Native. */
75
import 'react-native-url-polyfill/auto'
8-
import Like from './Like'
96
import ReaderView from './ReaderView'
10-
import backendService from '../../services/backend'
11-
12-
13-
type Paragraph = {
14-
num: number
15-
paragraph: string
16-
}
17-
18-
type Snippet = {
19-
id: number
20-
created_at: Date
21-
isbn: string
22-
snippet: string
23-
}
24-
25-
export default function TodoList({navigation} : any) {
26-
const { user } = useUser()
27-
const indicesForBooks = [121, 33, 26]
28-
const [snippets, setSnippet] = useState<Array<Snippet>>([])
29-
const [paragraphs, setParagraphs] = useState<Array<Paragraph>>([]);
30-
const [texts, setTexts] = useState<Array<String>>([])
31-
useEffect(() => {
32-
setParagraphs([])
33-
indicesForBooks.forEach(i =>
34-
backendService
35-
.fetchParagraphs(i)
36-
.then(p => {
37-
setParagraphs(prevState => prevState.concat(p!))
38-
})
39-
)
40-
}, [])
41-
42-
const handleLike = (id: number) => {
43-
backendService
44-
.isLiked(id, user!)
45-
.then(like => like)
46-
}
477

8+
export default function ForYou({navigation} : any) {
489
return (
4910
<View>
5011
<View style={styles.container}>
@@ -56,8 +17,8 @@ export default function TodoList({navigation} : any) {
5617
</View>
5718
<View
5819
style={styles.snippetList}
59-
>
60-
<ReaderView handleLike={handleLike} snippets={paragraphs} isLiked={true}/>
20+
>
21+
<ReaderView/>
6122
</View>
6223
</View>
6324
</View>

‎components/ForYouScreen/Like.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ export default function Like ( {snippet}: any) {
77
const [id, setId] = useState(0);
88
const { user } = useUser();
99
const [liked, setLiked] = useState(false)
10+
11+
12+
//more hooks useLike() needed here
1013
useEffect(() => {
1114
setId(snippet.num)
1215
backendservice

‎components/ForYouScreen/MoreInfo.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { View, Text } from "react-native"
2+
import { FontAwesome } from '@expo/vector-icons';
3+
4+
export const MoreInfo = () => {
5+
6+
return (
7+
<View>
8+
<Text>Toggled when the user clicks on More Info</Text>
9+
</View>
10+
)
11+
12+
}

‎components/ForYouScreen/ParagraphView.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@ import { Text } from "@rneui/themed"
33

44
export default function ParagraphView(props: any) {
55
//Just so the amount of words don't overflow the screen
6-
7-
const wordCount = () => {
6+
//this could also be refactored into the paragraphview screen
7+
const WordCount = () => {
88
const wordArray = props.paragraphText.split(' ')
9-
return wordArray.slice(0, 100).join(' ').trim() + '...'
9+
return <Text>{wordArray.slice(0, 100).join(' ').trim() + '...'}</Text>
1010
}
1111

1212
return (
1313
<View>
1414
<Text style={styles.para}>
15-
{wordCount()}
15+
<WordCount/>
1616
</Text>
1717
</View>
1818
)

‎components/HomeScreen/ActivityFeed.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function ActivityFeed({navigation} : any) {
77
<View style={styles.activityFeed}>
88
<View style={styles.card}>
99
<Text h2={true}>Recent Books</Text>
10-
<RecentActivity />
10+
<RecentActivity navigation= {navigation}/>
1111
<Button
1212
title={"Pick up where you left off"}
1313
titleStyle={{ fontWeight: "300", fontSize: 18 }}

‎components/HomeScreen/Explore.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {Button, Text} from '@rneui/themed';
33
import Separator from '../Separator';
44

55
export default function Explore({navigation} : any) {
6+
//TODO: what if this could have a search function as well?
67
return (
78
<View style={styles.card}>
89
<Text h2={true}>Explore</Text>

‎components/HomeScreen/ReadingStats.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,24 @@
11
import { View, StyleSheet } from 'react-native';
22
import {Card, Text} from '@rneui/themed';
33
import Separator from '../Separator';
4+
import { useUser } from '../UserContext';
5+
import { useProgress } from '../../hooks/useProgress';
46

57
export default function ReadingStats() {
8+
const {user} = useUser()
9+
const goal = useProgress(user!);
10+
/**
11+
* TODO: Give the user the ability to edit their daily reading goal
12+
*/
13+
614
return (
715
<View style={styles.card}>
816
<Text h2={true}>Statistics</Text>
917
<Text>Track your reading process here</Text>
1018
<View>
1119
<Card>
12-
<Text>Read 40 pages (23/40)</Text>
20+
<Text>Read {goal} pages</Text>
21+
1322
</Card>
1423
</View>
1524
<Separator />

‎components/ReaderScreen/ParagraphCalc.tsx‎

Lines changed: 52 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,75 @@
1-
import { useEffect, useState } from "react";
2-
import { StyleSheet, View, Alert, Dimensions, FlatList } from "react-native";
3-
import { supabase } from "../../lib/initSupabase";
1+
import { StyleSheet, View, Dimensions, FlatList } from "react-native";
42
import { Text } from '@rneui/themed';
3+
import { Button } from "@rneui/base";
4+
import { useParagraphs } from '../../hooks/useParagraphs';
5+
import { useReaderInfo } from "../../hooks/useReaderInfo";
6+
import { useUser } from "../UserContext";
7+
import { useCallback, useEffect, useRef, useState } from "react";
8+
import { LinearProgress } from "@rneui/base";
9+
import { useProgress } from "../../hooks/useProgress";
510

611
export type Paragraph = {
712
num: number
813
paragraph: string
914
paragraph_length: number
1015
}
16+
//this must be a child belonging to another Screen, for better naming conventions.
17+
export const ParagraphCalc = ({route, navigation} : any) => {
18+
const {user} = useUser()
1119

12-
export const ParagraphCalc = () => {
20+
//progress: this comes from the goal column
21+
const dailyGoal = useProgress(user!) || 0;
22+
//RecentBooks: this would arrive as a prop from that component
23+
const {book_num} = route?.params || 0;
1324

14-
/**
15-
* Create a function that will find the average length of a book's paragraphs
16-
* and we can do some of the same calculations under the hood again
17-
*/
25+
const {updateBookmark, getSingleProgress} = useReaderInfo(user!);
26+
const start = getSingleProgress(book_num)?.progress || 0;
27+
const {displayedPara} = useParagraphs(book_num, dailyGoal, start);
28+
29+
const [paragraphsRead, setParagraphsRead] = useState(start);
30+
const [paragraphPerc, setParagraphPerc] = useState(start/displayedPara.length);
1831

19-
const start= 0;
20-
const goal = 40;
21-
const book_num = 33;
22-
const [paragraphs, setParagraphs] = useState<Array<Paragraph>>([])
23-
const [displayedPara, setDisplayedPara] = useState<Array<Paragraph>>([]);
24-
const [numPara, setNumPara] = useState<number>(0);
32+
useEffect(() => {
33+
const p = (paragraphsRead / displayedPara.length);
34+
setParagraphPerc(p);
35+
}, [paragraphsRead])
2536

26-
useEffect(() => {
27-
if(book_num){
28-
getParagraphs()
29-
console.log(1)
30-
}
31-
}, [])
3237

33-
useEffect(() => {
34-
const avg= Math.round(paragraphs.map(p => p.paragraph)
35-
.map(para => para.split(' ').length)
36-
.reduce((a, b) => a +b, 0) / paragraphs.length)
37-
const num = Math.round((250*goal) / avg);
38-
setNumPara(num);
39-
console.log(2)
40-
}, [paragraphs]);
38+
//https://reactnavigation.org/docs/preventing-going-back
39+
//we can use this to save progress if the user tries leaving the screen early.
4140

42-
useEffect(() => {
43-
const displayed = paragraphs.slice(start, numPara);
44-
setDisplayedPara(displayed);
45-
console.log(3)
46-
}, [numPara])
47-
48-
async function getParagraphs() {
49-
try {
50-
let {data, error} = await supabase
51-
.from('paragraphs')
52-
.select('*')
53-
.eq('num', book_num)
54-
if(error) {
55-
throw error
56-
}
57-
if (data) {
58-
setParagraphs(data)
59-
}
60-
} catch (error) {
61-
if (error instanceof Error) {
62-
Alert.alert(error.message)
63-
}
64-
}
65-
}
66-
67-
const renderText = ({item, index} : any) => {
41+
const renderText = ({item} : any) => {
6842
return (
6943
<View style={styles.snippet}>
7044
<Text style={styles.para}>{item.paragraph}</Text>
7145
</View>
7246
)
7347
}
48+
49+
const handleFinish = () => {
50+
updateBookmark(book_num, paragraphsRead, paragraphPerc);
51+
}
52+
const viewabilityConfig = {
53+
viewAreaCoveragePercentThreshold: 50,
54+
}
55+
56+
const onViewableItemsChanged = useCallback((viewableItem: any) => {
57+
if(viewableItem.viewableItems[0].index){
58+
setParagraphsRead(viewableItem.viewableItems[0].index);
59+
}
60+
}, []);
61+
62+
const viewabilityConfigCallbackPairs = useRef([{ viewabilityConfig, onViewableItemsChanged }])
63+
64+
7465
return (
7566
<View style={styles.snippetList}>
76-
<FlatList pagingEnabled={true} data={displayedPara} renderItem={(item) => renderText(item)}/>
67+
<FlatList pagingEnabled={true}
68+
viewabilityConfig={viewabilityConfig}
69+
viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
70+
data={displayedPara} renderItem={renderText}/>
71+
<LinearProgress value={paragraphPerc} variant={"determinate"} trackColor={'lightgreen'} color={'green'} />
72+
<Button onPress={handleFinish}>Save Progress</Button>
7773
</View>
7874
)
7975
}
@@ -92,6 +88,7 @@ const styles = StyleSheet.create({
9288
height: Dimensions.get("window").height,
9389
justifyContent: 'center',
9490
alignItems: "center",
91+
paddingTop: 16,
9592
},
9693
viewerText: {
9794
fontSize: 16,

0 commit comments

Comments
 (0)