Merge branch 'emily/genreScreen' of github.com:calblueprint/girls-wri…

…te-now into emily/genreScreen
calblueprint · Apr 5, 2024 · eaa5e31 · eaa5e31
2 parents 507c847 + d035929
commit eaa5e31
Show file tree

Hide file tree

Showing 37 changed files with 565 additions and 314 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "@mui/styled-engine-sc": "^6.0.0-alpha.1",
     "@mui/system": "^5.14.13",
     "@react-native-async-storage/async-storage": "^1.18.2",
-    "@react-native-community/datetimepicker": "7.2.0",
+    "@react-native-community/datetimepicker": "^7.2.0",
     "@react-navigation/bottom-tabs": "^6.5.9",
     "@react-navigation/material-bottom-tabs": "^6.2.17",
     "@react-navigation/native": "^6.1.8",

diff --git a/src/app/(tabs)/_layout.tsx b/src/app/(tabs)/_layout.tsx
@@ -1,5 +1,5 @@
 import { Tabs } from 'expo-router';
-import { Platform } from 'react-native';
+import { Platform, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import Icon from '../../../assets/icons';
@@ -89,6 +89,13 @@ function TabNav() {
         }}
       />
       <Tabs.Screen
+        name="settings"
+        options={{
+          headerShown: false,
+          href: null,
+        }}
+      />
+           <Tabs.Screen
         name="genre"
         options={{
           headerShown: false,

diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx
@@ -6,7 +6,6 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 import styles from './styles';
 import BackButton from '../../../components/BackButton/BackButton';
-import ContentCard from '../../../components/ContentCard/ContentCard';
 import HorizontalLine from '../../../components/HorizontalLine/HorizontalLine';
 import PreviewCard from '../../../components/PreviewCard/PreviewCard';
 import {
@@ -68,12 +67,14 @@ function AuthorScreen() {
                 <Text
                   adjustsFontSizeToFit
                   numberOfLines={2}
-                  style={styles.name}
+                  style={globalStyles.h1}
                 >
                   {authorInfo.name}
                 </Text>
                 {authorInfo?.pronouns && (
-                  <Text style={styles.pronouns}>{authorInfo.pronouns}</Text>
+                  <Text style={[globalStyles.subHeading2, styles.pronouns]}>
+                    {authorInfo.pronouns}
+                  </Text>
                 )}
               </View>
             )}
@@ -83,17 +84,19 @@ function AuthorScreen() {
 
           {authorInfo?.bio && (
             <>
-              <Text style={styles.bioText}>{decode(authorInfo.bio)}</Text>
+              <Text style={globalStyles.body1}>{decode(authorInfo.bio)}</Text>
               <HorizontalLine />
             </>
           )}
 
           {authorInfo?.artist_statement && (
             <>
-              <Text style={styles.authorStatementTitle}>
+              <Text
+                style={[globalStyles.body2Bold, styles.authorStatementTitle]}
+              >
                 Artist's Statement
               </Text>
-              <Text style={styles.authorStatement}>
+              <Text style={globalStyles.body1}>
                 {decode(authorInfo.artist_statement)}
               </Text>
               <HorizontalLine />

diff --git a/src/app/(tabs)/author/styles.tsx b/src/app/(tabs)/author/styles.tsx
@@ -10,28 +10,12 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
     alignItems: 'flex-end',
   },
-  name: {
-    fontWeight: 'bold',
-    fontSize: 24,
-    fontFamily: 'Manrope-Regular',
-  },
   image: {
     height: 68,
     width: 68,
     backgroundColor: colors.darkGrey,
     borderRadius: 4,
   },
-  bioText: {
-    color: 'black',
-    fontFamily: 'Manrope-Regular',
-    fontSize: 14,
-  },
-  authorStatement: {
-    fontSize: 14,
-    color: 'black',
-    fontWeight: '400',
-    fontFamily: 'Manrope-Regular',
-  },
   authorTextContainer: {
     paddingLeft: 20,
   },
@@ -40,17 +24,14 @@ const styles = StyleSheet.create({
     borderTopWidth: 20,
   },
   authorStatementTitle: {
-    fontWeight: 'bold',
-    fontFamily: 'Manrope-Regular',
-    fontSize: 16,
     marginBottom: 8,
   },
   storyCountText: {
     fontSize: 12,
     marginBottom: 8,
   },
   pronouns: {
-    color: '#797979',
+    color: colors.textGrey,
   },
 });
 

diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx
@@ -43,6 +43,7 @@ function HomeScreen() {
         fetchRecommendedStories().catch(() => []),
         fetchNewStories().catch(() => []),
       ]);
+
       setUsername(usernameResponse);
       setFeaturedStories(featuredStoryResponse);
       setFeaturedStoriesDescription(featuredStoryDescriptionResponse);
@@ -68,7 +69,7 @@ function HomeScreen() {
         contentContainerStyle={{ paddingHorizontal: 8 }}
       >
         <View style={styles.headerContainer}>
-          <Text style={globalStyles.h2}>
+          <Text style={globalStyles.h1}>
             {username ? `Welcome, ${username}` : 'Welcome!'}
           </Text>
           <Pressable onPress={() => router.push('/settings')}>
@@ -77,6 +78,7 @@ function HomeScreen() {
             </View>
           </Pressable>
         </View>
+
         {featuredStories.length > 0 && (
           <View>
             <Text style={globalStyles.h3}>Featured Stories</Text>
@@ -86,7 +88,7 @@ function HomeScreen() {
             <View style={{ marginRight: 24 }}>
               {featuredStories.map(story => (
                 <PreviewCard
-                  key={story.title}
+                  key={story.id}
                   title={story.title}
                   image={story.featured_media}
                   author={story.author_name}
@@ -115,13 +117,14 @@ function HomeScreen() {
               horizontal
               showsHorizontalScrollIndicator={false}
               bounces={false}
-              style={styles.scrollView}
+              style={styles.scrollView1}
             >
               {recommendedStories.map(story => (
                 <ContentCard
                   key={story.title}
                   title={story.title}
                   author={story.author_name}
+                  authorImage={story.author_image}
                   pressFunction={() =>
                     router.push({
                       pathname: '/story',
@@ -143,13 +146,14 @@ function HomeScreen() {
               horizontal
               showsHorizontalScrollIndicator={false}
               bounces={false}
-              style={styles.scrollView}
+              style={styles.scrollView2}
             >
               {newStories.map(story => (
                 <ContentCard
                   key={story.title}
                   title={story.title}
                   author={story.author_name}
+                  authorImage={story.author_image}
                   pressFunction={() =>
                     router.push({
                       pathname: '/story',

diff --git a/src/app/(tabs)/home/styles.ts b/src/app/(tabs)/home/styles.ts
@@ -19,9 +19,15 @@ const styles = StyleSheet.create({
     marginTop: 12,
     marginBottom: 16,
   },
-  scrollView: {
-    marginBottom: 20,
+  scrollView1: {
+    paddingBottom: 16,
     flexGrow: 0,
+    padding: 8,
+  },
+  scrollView2: {
+    paddingBottom: 80,
+    flexGrow: 0,
+    padding: 8,
   },
   headerContainer: {
     flexDirection: 'row',

diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx
@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { SearchBar } from '@rneui/themed';
 import { router } from 'expo-router';
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import {
   Button,
   FlatList,
@@ -198,18 +198,21 @@ function SearchScreen() {
             setShowRecents(true);
             setShowGenreCarousals(false);
           }}
-          searchIcon={false}
-          clearIcon
+          searchIcon
+          clearIcon={false}
+          cancelButtonProps={{
+            buttonTextStyle: [globalStyles.body1Bold, styles.cancelButton],
+          }}
           containerStyle={[
             styles.searchContainer,
             showGenreCarousals && { marginRight: 24 },
           ]}
           inputContainerStyle={styles.inputContainer}
-          inputStyle={{ color: 'black' }}
+          inputStyle={globalStyles.body1Bold}
           leftIconContainerStyle={{}}
           rightIconContainerStyle={{}}
-          placeholder="Search"
-          placeholderTextColor="black"
+          placeholder="What do you want to read?"
+          placeholderTextColor="grey"
           onChangeText={text => searchFunction(text)}
           value={search}
           onSubmitEditing={searchString => {
@@ -230,19 +233,44 @@ function SearchScreen() {
         )}
 
         {showRecents &&
-          (search ? (
+          (search && searchResults.length > 0 ? (
             <View style={styles.default}>
-              <Text style={[styles.searchText, styles.numDisplay]}>
-                {searchResults.length}{' '}
-                {searchResults.length === 1 ? 'Story' : 'Stories'}
+              <Text style={[globalStyles.subHeading1Bold, styles.numDisplay]}>
+                Showing results 1-{searchResults.length}
               </Text>
             </View>
-          ) : (
+          ) : search && searchResults.length === 0 ? (
+            <View style={styles.emptySearch}>
+              <View style={{ paddingBottom: 16 }}>
+                <Text style={[globalStyles.h3, { textAlign: 'center' }]}>
+                  There are no stories
+                </Text>
+                <Text style={[globalStyles.h3, { textAlign: 'center' }]}>
+                  for "{search}".
+                </Text>
+              </View>
+              <Text style={[globalStyles.subHeading2, { textAlign: 'center' }]}>
+                Try searching by title or author, or
+              </Text>
+              <Text style={[globalStyles.subHeading2, { textAlign: 'center' }]}>
+                check if your spelling is correct.
+              </Text>
+            </View>
+          ) : recentSearches.length > 0 || recentlyViewed.length > 0 ? (
             <ScrollView showsVerticalScrollIndicator={false} bounces={false}>
               <View style={styles.recentSpacing}>
-                <Text style={styles.searchText}>Recent Searches</Text>
+                <Text style={globalStyles.subHeading1Bold}>
+                  Recent Searches
+                </Text>
                 <Pressable onPress={clearRecentSearches}>
-                  <Text style={styles.clearAll}>Clear All</Text>
+                  <Text
+                    style={[
+                      globalStyles.subHeading2Bold,
+                      { color: colors.gwnOrange },
+                    ]}
+                  >
+                    Clear All
+                  </Text>
                 </Pressable>
               </View>
               <View style={styles.contentContainerRecents}>
@@ -260,9 +288,18 @@ function SearchScreen() {
               </View>
 
               <View style={styles.recentSpacing}>
-                <Text style={styles.searchText}>Recently Viewed</Text>
+                <Text style={globalStyles.subHeading1Bold}>
+                  Recently Viewed
+                </Text>
                 <Pressable onPress={clearRecentlyViewed}>
-                  <Text style={styles.clearAll}>Clear All</Text>
+                  <Text
+                    style={[
+                      globalStyles.subHeading2Bold,
+                      { color: colors.gwnOrange },
+                    ]}
+                  >
+                    Clear All
+                  </Text>
                 </Pressable>
               </View>
               <View style={styles.contentContainerRecents}>
@@ -286,6 +323,17 @@ function SearchScreen() {
                 ))}
               </View>
             </ScrollView>
+          ) : (
+            <View style={styles.emptySearch}>
+              <View style={{ paddingBottom: 16 }}>
+                <Text style={globalStyles.h3}>
+                  Find stories from young creators.
+                </Text>
+              </View>
+              <Text style={globalStyles.subHeading2}>
+                Search for stories, authors, or collections.
+              </Text>
+            </View>
           ))}
 
         {showGenreCarousals ? (