Skip to content

Dynamic render #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zackrone wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Dynamic render #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e9320d1
fixed covers to load immediately and not lag behind other profile inf…
zackrone Jun 2, 2022
76a7b62
all of the titles are dynamically rendered
zackrone Jun 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 14 additions & 38 deletions frontend/BookBae/screens/HomeScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
} from 'react-native';
import RadioForm from 'react-native-simple-radio-button';
import Client from '../Client.js';
import axios from 'axios';
import {styles, matchStyles} from './HomeScreenStyles';

/**
Expand Down Expand Up @@ -93,49 +92,26 @@ const HomeScreen = ({navigation}) => {
if ('favGenre' in match) {
matchInfo.favGenre = match.favGenre;
}
// adds books.
if ('bookList' in match) {
let books = [];
if (match.bookList.entries.length >= 2) {
for (let j = 0; j < 2; j++) {
books[j] = match.bookList.entries[j].bookId;
}
}
matchInfo.books = books;
}

// updates name to solely include first name.
if (match.name.split(' ').length > 1) {
matchInfo.name = match.name.split(' ')[0];
}

// handles adding books.
if ('books' in match) {
// matchInfo.books = match.books;
// add new user data to the end of the array.
let coverList = [];
for (let j = 0; j < 2 && j < match.books.length; i++) {
// try/catch block to set new book covers.
try {
// get new book.
axios
.get(
'https://www.googleapis.com/books/v1/volumes/' +
match.books[i],
)
.then(bookData => {
// add book to end of list.
coverList[j] =
bookData.data.volumeInfo.imageLinks.smallThumbnail;
});
} catch (error) {
// log error if necessary
console.log(error);
}
}
matchInfo.books = coverList;
setMatches(prevState => {
prevState.push(matchInfo);
return [...prevState];
});
} else {
// other option must be separate to avoid missing a promise.
// add new user data to the end of the array.
setMatches(prevState => {
prevState.push(matchInfo);
return [...prevState];
});
}
setMatches(prevState => {
prevState.push(matchInfo);
return [...prevState];
});
}
}
});
Expand Down
31 changes: 17 additions & 14 deletions frontend/BookBae/screens/onboarding/EnterBooksScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
TextInput,
Pressable,
FlatList,
Image
Image,
} from 'react-native';
import axios from 'axios';

Expand All @@ -19,19 +19,19 @@ const EnterBooksScreen = ({route, navigation}) => {
// Pass the ids of the selected books on to the next onboarding screen
const onPress = () => {
console.log('leave books');
const idList = bookList.map(book => book.id);
const coverList = bookList.map(book => book.volumeInfo.imageLinks.smallThumbnail);
navigation.navigate('EnterPhotoScreen', {
...route.params,
books: idList,
books: coverList,
});
};

// Adds a book to the user's list
const addNewBook = (book) => {
const addNewBook = book => {
setBookList(prevState => {
prevState.push(book);
return [...prevState];
})
});
};

// Displays search results;
Expand All @@ -44,10 +44,8 @@ const EnterBooksScreen = ({route, navigation}) => {
});
};


return (
<SafeAreaView style={styles.container}>

<Text style={styles.title}>Start Typing a Book Title:</Text>

{/* search bar */}
Expand All @@ -69,7 +67,9 @@ const EnterBooksScreen = ({route, navigation}) => {
<FlatList
data={searchResults}
extraData={searchResults}
renderItem={({item}) => <BookListItem book={item} onClick={() => addNewBook(item)}/>}
renderItem={({item}) => (
<BookListItem book={item} onClick={() => addNewBook(item)} />
)}
/>
</View>

Expand All @@ -94,13 +94,16 @@ const EnterBooksScreen = ({route, navigation}) => {
const BookListItem = ({book, onClick}) => {
return (
<Pressable onPress={onClick}>
<View style={{flexDirection: 'row'}}>
<Image style={styles.image} source={{uri: book.volumeInfo.imageLinks.smallThumbnail}}/>
<Text style = {styles.book}> {book.volumeInfo.title} </Text>
</View>
<View style={{flexDirection: 'row'}}>
<Image
style={styles.image}
source={{uri: book.volumeInfo.imageLinks.smallThumbnail}}
/>
<Text style={styles.book}> {book.volumeInfo.title} </Text>
</View>
</Pressable>
)
}
);
};

const styles = StyleSheet.create({
title: {
Expand Down