From f9f6ed656ba447bd23158363ac03bd044ce3d5e2 Mon Sep 17 00:00:00 2001
From: Aditya Pawar <34043950+adityapawar1@users.noreply.github.com>
Date: Mon, 8 Apr 2024 19:12:28 -0700
Subject: [PATCH 1/7] Use rpc to check if password is the same (#80)

---
 src/app/auth/resetPassword/index.tsx |  7 ++++++-
 src/queries/profiles.tsx             | 17 +++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/app/auth/resetPassword/index.tsx b/src/app/auth/resetPassword/index.tsx
index 024fcf06..19a193bd 100644
--- a/src/app/auth/resetPassword/index.tsx
+++ b/src/app/auth/resetPassword/index.tsx
@@ -10,9 +10,10 @@ import colors from '../../../styles/colors';
 import globalStyles from '../../../styles/globalStyles';
 import { useSession } from '../../../utils/AuthContext';
 import PasswordComplexityText from '../../../components/PasswordComplexityText/PasswordComplexityText';
+import { isPasswordSameAsBefore } from '../../../queries/profiles';
 
 function ResetPasswordScreen() {
-  const { updateUser, signOut } = useSession();
+  const { session, updateUser, signOut } = useSession();
   const [password, setPassword] = useState('');
   const [passwordTextHidden, setPasswordTextHidden] = useState(true);
   const [confirmPassword, setConfirmPassword] = useState('');
@@ -36,6 +37,9 @@ function ResetPasswordScreen() {
 
   const checkPassword = (text: string) => {
     if (text !== '') {
+      isPasswordSameAsBefore(text, session?.user?.id).then(isSame =>
+        setIsDifferent(!isSame),
+      );
       setHasUppercase(text !== text.toLowerCase());
       setHasLowercase(text !== text.toUpperCase());
       setHasNumber(/[0-9]/.test(text));
@@ -70,6 +74,7 @@ function ResetPasswordScreen() {
     const { error } = await updateUser({ password });
 
     if (error) {
+      console.error(error);
       Alert.alert('Updating password failed');
     } else {
       await signOut();
diff --git a/src/queries/profiles.tsx b/src/queries/profiles.tsx
index 7bc979aa..dfdaea4c 100644
--- a/src/queries/profiles.tsx
+++ b/src/queries/profiles.tsx
@@ -25,3 +25,20 @@ export async function isEmailTaken(newEmail: string) {
   const emailIsTaken = (count ?? 0) >= 1;
   return emailIsTaken as boolean;
 }
+
+export async function isPasswordSameAsBefore(
+  new_plain_password: string,
+  user_id: string | undefined,
+): Promise<boolean> {
+  let { data, error } = await supabase.rpc('check_same_as_old_pass', {
+    new_plain_password,
+    user_id,
+  });
+
+  if (error) {
+    console.error(error);
+    return false;
+  } else {
+    return data;
+  }
+}

From 40f3394da93c539cbd980a61a0283396de9b71e8 Mon Sep 17 00:00:00 2001
From: Aditya Pawar <34043950+adityapawar1@users.noreply.github.com>
Date: Mon, 8 Apr 2024 22:17:07 -0700
Subject: [PATCH 2/7] Fix worm bug (null tags) (#81)

* Fix worm bug (null tags)

* Run prettier

* Update lint.yml

* Run prettier on lint.yml
---
 .github/workflows/lint.yml                 |  3 ---
 src/components/PreviewCard/PreviewCard.tsx | 16 +++++++++-------
 src/components/PreviewCard/styles.ts       |  1 +
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 579ef283..89691a02 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -6,9 +6,6 @@ name: Lint
 #############################
 on:
   push:
-    branches-ignore: [main]
-  pull_request:
-    branches: [main]
 
 ###############
 # Set the Job #
diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx
index 84910f88..8272b57b 100644
--- a/src/components/PreviewCard/PreviewCard.tsx
+++ b/src/components/PreviewCard/PreviewCard.tsx
@@ -59,23 +59,25 @@ function PreviewCard({
               numberOfLines={3}
               style={[globalStyles.subtext, styles.storyDescription]}
             >
-              "{cheerio.load(excerpt.html).text()}"
+              "{cheerio.load(excerpt.html ?? '').text()}"
             </Text>
           </View>
         </View>
         <View style={styles.tagsContainer}>
           <View style={styles.tagsRow}>
-            <View style={styles.tag}>
-              <Text key={tags[0]} style={globalStyles.button1}>
-                {tags[0]}
-              </Text>
-            </View>
+            {(tags?.length ?? 0) > 0 && (
+              <View style={styles.tag}>
+                <Text key={tags[0]} style={globalStyles.button1}>
+                  {tags[0]}
+                </Text>
+              </View>
+            )}
           </View>
           <View style={styles.moreTags}>
             <Pressable>
               <Text style={[globalStyles.subtext, styles.moreTagsText]}>
                 {' '}
-                + {tags.length - 1} more tags
+                + {(tags?.length ?? 1) - 1} more tags
               </Text>
             </Pressable>
           </View>
diff --git a/src/components/PreviewCard/styles.ts b/src/components/PreviewCard/styles.ts
index e8af8f2c..493e3061 100644
--- a/src/components/PreviewCard/styles.ts
+++ b/src/components/PreviewCard/styles.ts
@@ -81,6 +81,7 @@ const styles = StyleSheet.create({
     paddingTop: 4,
   },
   moreTags: {
+    paddingVertical: 10,
     paddingRight: 12,
     alignItems: 'center',
     justifyContent: 'center',

From 62307fd76528736215551c59ab41cfa4c72c372d Mon Sep 17 00:00:00 2001
From: Aditya Pawar <34043950+adityapawar1@users.noreply.github.com>
Date: Thu, 11 Apr 2024 22:15:21 -0700
Subject: [PATCH 3/7] [bug] Add other ethnicities (#83)

* Add other ethnicities

* Remove old settings
---
 src/app/(tabs)/settings/index.tsx | 3 +++
 src/app/auth/onboarding/index.tsx | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/src/app/(tabs)/settings/index.tsx b/src/app/(tabs)/settings/index.tsx
index 10bf4af9..0434bc6e 100644
--- a/src/app/(tabs)/settings/index.tsx
+++ b/src/app/(tabs)/settings/index.tsx
@@ -259,9 +259,12 @@ function SettingsScreen() {
               options={[
                 'American Indian/Alaska Native',
                 'Asian',
+                'Hispanic/Latinx',
+                'Middle Eastern',
                 'Black or African American',
                 'Native Hawaiian or other Pacific Islander',
                 'White',
+                'Not Listed Here',
                 'Prefer Not to Disclose',
               ]}
               label="Race/Ethnicity"
diff --git a/src/app/auth/onboarding/index.tsx b/src/app/auth/onboarding/index.tsx
index 936624fb..ea0af6ed 100644
--- a/src/app/auth/onboarding/index.tsx
+++ b/src/app/auth/onboarding/index.tsx
@@ -219,9 +219,12 @@ function OnboardingScreen() {
               options={[
                 'American Indian/Alaska Native',
                 'Asian',
+                'Hispanic/Latinx',
+                'Middle Eastern',
                 'Black or African American',
                 'Native Hawaiian or other Pacific Islander',
                 'White',
+                'Not Listed Here',
                 'Prefer Not to Disclose',
               ]}
               label="Race/Ethnicity"

From 860d346d2a8fd29c88f365ea86fda2209ae0fd22 Mon Sep 17 00:00:00 2001
From: Marcoss28 <69034384+Marcoss28@users.noreply.github.com>
Date: Thu, 11 Apr 2024 22:19:51 -0700
Subject: [PATCH 4/7] [update] Update preview card (#82)

* accidently forgot to branch

* [updated preview card]\n[updated preview and content card emojis/reactions]

* chanegs made

* Increase margin by 2

---------

Co-authored-by: Marcos Hernandez <marcosh@berkeley.com>
Co-authored-by: Aditya Pawar <apawar@berkeley.edu>
---
 package-lock.json                             |  39 ++++++++++++++++
 package.json                                  |   3 ++
 src/components/ContentCard/ContentCard.tsx    |  42 ++++++++----------
 src/components/ContentCard/styles.ts          |  22 ++++++---
 src/components/PreviewCard/PreviewCard.tsx    |  37 ++++++++++++---
 .../PreviewCard/savedStoriesIcon.png          | Bin 0 -> 1052 bytes
 src/components/PreviewCard/styles.ts          |  30 +++++++++++--
 7 files changed, 133 insertions(+), 40 deletions(-)
 create mode 100644 src/components/PreviewCard/savedStoriesIcon.png

diff --git a/package-lock.json b/package-lock.json
index ca07deb9..f83fb7da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,10 +38,13 @@
         "expo-status-bar": "~1.6.0",
         "html-entities": "^2.4.0",
         "react": "18.2.0",
+        "react-apple-emojis": "^2.2.1",
         "react-native": "0.72.10",
         "react-native-dom-parser": "^1.5.3",
         "react-native-element-dropdown": "^2.10.0",
         "react-native-elements": "^3.4.3",
+        "react-native-emoji": "^1.8.0",
+        "react-native-emojicon": "^1.0.0",
         "react-native-gesture-handler": "~2.12.0",
         "react-native-htmlview": "^0.16.0",
         "react-native-ionicons": "^4.6.5",
@@ -14217,6 +14220,11 @@
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
       "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
     },
+    "node_modules/lodash.toarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
+      "integrity": "sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw=="
+    },
     "node_modules/log-symbols": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
@@ -15502,6 +15510,14 @@
         "node": ">=10.5.0"
       }
     },
+    "node_modules/node-emoji": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
+      "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
+      "dependencies": {
+        "lodash.toarray": "^4.4.0"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -16664,6 +16680,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-apple-emojis": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-apple-emojis/-/react-apple-emojis-2.2.1.tgz",
+      "integrity": "sha512-tgq/+GUR6WsBkkkl0EYgVbaU803IF8GoELcG83cfircrEiyiiIbHqpBXIHyD8YIOecAGgN2ucEG6U/REDR7jvQ==",
+      "peerDependencies": {
+        "prop-types": "*",
+        "react": ">=16.x",
+        "react-dom": ">=16.x"
+      }
+    },
     "node_modules/react-devtools-core": {
       "version": "4.28.0",
       "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.28.0.tgz",
@@ -16853,6 +16879,19 @@
         "react-native-vector-icons": ">7.0.0"
       }
     },
+    "node_modules/react-native-emoji": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-emoji/-/react-native-emoji-1.8.0.tgz",
+      "integrity": "sha512-VunKOtYes6eymyWwE7QS3mhmNXksTt2AN92PcGRtmDKLDPjuKrwd5tcJckFUekAK3H+6AMpwYy30CsiCJrDdFQ==",
+      "dependencies": {
+        "node-emoji": "1.10.0"
+      }
+    },
+    "node_modules/react-native-emojicon": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-emojicon/-/react-native-emojicon-1.0.0.tgz",
+      "integrity": "sha512-rK6/7EIf/yNgkB24ujpV8zmmZylbQV+oq4F7YopZ9aSfNKmVKKFmqGOPahPo6OW8b1Dg5dm8caybgfpM2GP4Nw=="
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.12.1",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz",
diff --git a/package.json b/package.json
index 7ba5f154..ed0b39df 100644
--- a/package.json
+++ b/package.json
@@ -42,10 +42,13 @@
     "expo-status-bar": "~1.6.0",
     "html-entities": "^2.4.0",
     "react": "18.2.0",
+    "react-apple-emojis": "^2.2.1",
     "react-native": "0.72.10",
     "react-native-dom-parser": "^1.5.3",
     "react-native-element-dropdown": "^2.10.0",
     "react-native-elements": "^3.4.3",
+    "react-native-emoji": "^1.8.0",
+    "react-native-emojicon": "^1.0.0",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-htmlview": "^0.16.0",
     "react-native-ionicons": "^4.6.5",
diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx
index 4301cb9f..dd62a58b 100644
--- a/src/components/ContentCard/ContentCard.tsx
+++ b/src/components/ContentCard/ContentCard.tsx
@@ -9,6 +9,7 @@ import {
 
 import styles from './styles';
 import globalStyles from '../../styles/globalStyles';
+import Emoji from 'react-native-emoji';
 
 type ContentCardProps = {
   title: string;
@@ -58,33 +59,26 @@ function ContentCard({
             </Text>
           </View>
           <View style={styles.buttons}>
-            <View>
-              <TouchableOpacity
-                onPress={() => null}
-                style={{ flexDirection: 'row' }}
-              >
-                <Image
-                  style={styles.reactions}
-                  source={require('./savedStoriesIcon.png')}
-                />
-                <Image
-                  style={styles.reactions}
-                  source={require('./savedStoriesIcon.png')}
-                />
-                <Image
-                  style={styles.reactions}
-                  source={require('./savedStoriesIcon.png')}
-                />
-                <View style={styles.reactionNumber}>
-                  <Text style={[globalStyles.subtext, styles.reactionText]}>
-                    14{/*change number to work*/}
-                  </Text>
-                </View>
-              </TouchableOpacity>
+            <View style={{ flexDirection: 'row', gap: -7 }}>
+              <View style={[styles.reactions, { backgroundColor: '#FFCCCB' }]}>
+                <Emoji name="heart" />
+              </View>
+              <View style={[styles.reactions, { backgroundColor: '#FFD580' }]}>
+                <Emoji name="clap" />
+              </View>
+              <View style={[styles.reactions, { backgroundColor: '#89CFF0' }]}>
+                <Emoji name="muscle" />
+              </View>
+              {/* heart, clap, muscle, cry, ??? */}
+              <View style={styles.reactionNumber}>
+                <Text style={[globalStyles.subtext, styles.reactionText]}>
+                  14{/*change number to work*/}
+                </Text>
+              </View>
             </View>
             <TouchableOpacity onPress={() => saveStory()}>
               <Image
-                style={{ width: 30, height: 30 }}
+                style={styles.saveStoryImage}
                 source={require('./savedStoriesIcon.png')}
               />
             </TouchableOpacity>
diff --git a/src/components/ContentCard/styles.ts b/src/components/ContentCard/styles.ts
index d4458704..f18d4837 100644
--- a/src/components/ContentCard/styles.ts
+++ b/src/components/ContentCard/styles.ts
@@ -50,18 +50,26 @@ const styles = StyleSheet.create({
     color: colors.grey,
   },
   reactionNumber: {
-    marginLeft: 15,
-    marginTop: 10,
+    marginLeft: 14,
+    marginTop: 16,
   },
   reactions: {
-    width: 20,
-    height: 20,
-    borderRadius: 20 / 2,
+    width: 30,
+    height: 30,
+    borderRadius: 30 / 2,
     borderWidth: 1,
-    backgroundColor: '#89CFF0', //different per emoji reaction
+    backgroundColor: 'transparent', //different per emoji reaction
     borderColor: 'white',
     marginTop: 10,
-    marginRight: -10,
+    marginRight: -5, // -10
+    overflow: 'hidden',
+    justifyContent: 'center',
+    paddingLeft: 3,
+  },
+  saveStoryImage: {
+    width: 30,
+    height: 30,
+    marginTop: 10,
   },
   buttons: {
     flexDirection: 'row',
diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx
index 8272b57b..dfe73227 100644
--- a/src/components/PreviewCard/PreviewCard.tsx
+++ b/src/components/PreviewCard/PreviewCard.tsx
@@ -4,8 +4,10 @@ import {
   Image,
   Pressable,
   Text,
+  TouchableOpacity,
   View,
 } from 'react-native';
+import Emoji from 'react-native-emoji';
 
 import styles from './styles';
 import globalStyles from '../../styles/globalStyles';
@@ -32,6 +34,10 @@ function PreviewCard({
   tags,
   pressFunction,
 }: PreviewCardProps) {
+  const saveStory = () => {
+    console.log("testing '+' icon does something for story " + title);
+  };
+
   return (
     <Pressable onPress={pressFunction}>
       <View style={styles.card}>
@@ -39,11 +45,17 @@ function PreviewCard({
           <Text numberOfLines={1} style={[globalStyles.h3, styles.title]}>
             {title}
           </Text>
+          <TouchableOpacity onPress={() => saveStory()}>
+            <Image
+              style={{ width: 30, height: 30 }}
+              source={require('./savedStoriesIcon.png')}
+            />
+          </TouchableOpacity>
         </View>
         <View style={styles.body}>
           <Image
             style={styles.image}
-            source={{ uri: image == '' ? placeholderImage : image }}
+            source={{ uri: image === '' ? placeholderImage : image }}
           />
           <View style={styles.cardTextContainer}>
             <View style={styles.authorContainer}>
@@ -64,6 +76,23 @@ function PreviewCard({
           </View>
         </View>
         <View style={styles.tagsContainer}>
+          <View style={{ flexDirection: 'row', gap: -7 }}>
+            <View style={[styles.reactions, { backgroundColor: '#FFCCCB' }]}>
+              <Emoji name="heart" />
+            </View>
+            <View style={[styles.reactions, { backgroundColor: '#FFD580' }]}>
+              <Emoji name="clap" />
+            </View>
+            <View style={[styles.reactions, { backgroundColor: '#89CFF0' }]}>
+              <Emoji name="muscle" />
+            </View>
+            {/* heart, clap, muscle, cry, ??? */}
+            <View style={styles.reactionNumber}>
+              <Text style={[globalStyles.subtext, styles.reactionText]}>
+                14{/*change number to work*/}
+              </Text>
+            </View>
+          </View>
           <View style={styles.tagsRow}>
             {(tags?.length ?? 0) > 0 && (
               <View style={styles.tag}>
@@ -72,12 +101,10 @@ function PreviewCard({
                 </Text>
               </View>
             )}
-          </View>
-          <View style={styles.moreTags}>
-            <Pressable>
+            <Pressable style={styles.moreTags}>
               <Text style={[globalStyles.subtext, styles.moreTagsText]}>
                 {' '}
-                + {(tags?.length ?? 1) - 1} more tags
+                + {(tags?.length ?? 1) - 1}
               </Text>
             </Pressable>
           </View>
diff --git a/src/components/PreviewCard/savedStoriesIcon.png b/src/components/PreviewCard/savedStoriesIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..65b2ea6e4dd47e1c590ef1cbe5d7afc29d8fcca7
GIT binary patch
literal 1052
zcmV+%1mpXOP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91JfH&r1ONa40RR91JOBUy0E^%0TmS$AhDk(0RA>e5n@@7uFciimr$e`7
zhCjm&P7v1VhMpkVWYbNP6Eryi^aM>$(8;zeN=^{ENH^V(6Qo@wfn;E^B&pr+b1h<w
z2YCtx*;q41wk*l-_nwd*;#rE2G#n1|wr#)1(U4Ns9mlDLR5Pv!vi^dsJ>;E2p>P%^
zpbQq?-QDePZEbx)!+h{wlCB94d0Rp7Dd53i@ClWUJ+Q82S)K8Cd|s(k*x2~g@AvBv
zl1CH3Rpd;qVzKz~->L8O;o+ePU<bz#hl2LiNY*JCJQgz1kS__EIYglg>uKrbW`fVi
zqM-RzouJ&`-(P#ciMQ+o$~yrUE$teUld(|NMSdNuoR(_<Ul98C_VyU_lC?)L<gK&-
zhH#v-3=>(yQfn;M+^dj^sVI7We(n$i%k7S&sd<5^duoYdS(=jKw9*6>g(U-yqNOC)
z$t;{?>qU`$<1GA2r<MM@-MV~|)6Tc9(E|4!F+M4^fA$vWVs29{u(YkbkWOQ6FH5{B
z?brDwb~n?N7TEb?kED>@nU*mXIMN=))V14f=4r*LT@(7=xLG;_HeuMsDMM!AIJIj+
z-`aK91W&7fuzLz$U`I&ND}KE^SwwMKU=uto54IuPy_rRDh0p@0&C}8Xm)bw*$iH1o
zujaJQW@&S55sxI9h2znyIlX2UHpdq6NTS^USeB<1wpTUrpfqe!iaLA_ZvBkld~lhZ
zpF%t`^;e5_9bT5F6}DG3@u235?{~1Uza|=*>cZb3SXT?YEKe(JugVe5m2@KfhX)Ho
z@W>Wszd=xStsT;;;yUxe!J7-$vX1B$+n4|4^{FA9&C=_%<SL$>S$Gv%UgtA13$IiA
zt9W*1;Z<mPozKvETI&=}JzIHX^E@b3SC=Qk)6zjixxcxdmKQlLZf<U>Q8bmrI=+zT
z9%pIy_a(shlL!-0X8zg|h$sEc;L`8BK;WetRm=0VB}580$ppr4f<e>xLNn~&jVDeU
zEM9H+KsFT*Zf$RGk1(8%JPkB`<2~{0FeYC?Y7t~69vrU$oKh3CHY3NAPD{&z$sM_P
z-@%0@)71V7V0ptG@80a)V&HhGRB|UaHZVDHrOD-TdyttEaD%eK!k;1k#DG)4tbieX
zh|K@q4~vtSMgTu5m&+Z$@H4>bCc$B4&fHZTbyaS1&QS@A_V9h}K0ZF4)oQg-P~N|w
WSfpXwp?D_%0000<MNUMnLSTZx7~&WJ

literal 0
HcmV?d00001

diff --git a/src/components/PreviewCard/styles.ts b/src/components/PreviewCard/styles.ts
index 493e3061..ed355c7e 100644
--- a/src/components/PreviewCard/styles.ts
+++ b/src/components/PreviewCard/styles.ts
@@ -49,8 +49,11 @@ const styles = StyleSheet.create({
   titleContainer: {
     paddingTop: 16,
     paddingLeft: 12,
+    paddingRight: 12,
     borderBottomColor: '#EBEBEB',
     borderBottomWidth: StyleSheet.hairlineWidth,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
   },
   tag: {
     paddingHorizontal: 8,
@@ -62,7 +65,6 @@ const styles = StyleSheet.create({
     marginBottom: 10,
   },
   tagsContainer: {
-    // backgroundColor: colors.darkGrey,
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -75,20 +77,40 @@ const styles = StyleSheet.create({
   },
   tagsRow: {
     flexDirection: 'row',
-    justifyContent: 'flex-start',
+    justifyContent: 'flex-end',
+    alignContent: 'flex-end',
     alignItems: 'center',
     flexWrap: 'wrap',
-    paddingTop: 4,
   },
   moreTags: {
     paddingVertical: 10,
     paddingRight: 12,
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'flex-end',
   },
   moreTagsText: {
     color: colors.darkGrey,
   },
+  reactions: {
+    width: 32,
+    height: 32,
+    borderRadius: 32 / 2,
+    borderWidth: 1,
+    backgroundColor: '#89CFF0', //different per emoji reaction
+    borderColor: 'white',
+    marginTop: 10,
+    marginRight: -5, // -10
+    overflow: 'hidden',
+    justifyContent: 'center',
+    paddingLeft: 4,
+  },
+  reactionText: {
+    color: colors.grey,
+  },
+  reactionNumber: {
+    marginLeft: 16,
+    marginTop: 16,
+  },
   storyDescription: {
     color: colors.darkGrey,
     paddingRight: 12,

From b9865bcaf4258ca96ccdd96e247f7d47f6bc169b Mon Sep 17 00:00:00 2001
From: Justin Lee <91563628+jjstnlee@users.noreply.github.com>
Date: Wed, 17 Apr 2024 18:07:03 -0700
Subject: [PATCH 5/7] [saved] Implement saved story button (#79)

* Implemented save story button

* Move story image to assets

* Add save story to preview card, one home screen viewing bug

* Add pubsub to sync preview and content cards

* Bug fixes

* Refactor

* Create SavedStoryButton componenet

* Remove unused imports

* Fix type errors

---------

Co-authored-by: Aditya Pawar <34043950+adityapawar1@users.noreply.github.com>
Co-authored-by: Aditya Pawar <apawar@berkeley.edu>
---
 .../save_story.png                            | Bin
 assets/saved_story.png                        | Bin 0 -> 12911 bytes
 package-lock.json                             |   9 +++
 package.json                                  |   3 +-
 src/app/(tabs)/author/index.tsx               |   1 +
 src/app/(tabs)/genre/index.tsx                |   1 +
 src/app/(tabs)/home/index.tsx                 |   3 +
 src/app/(tabs)/search/index.tsx               |   4 +-
 src/app/_layout.tsx                           |  13 ++--
 src/components/AuthorCard/AuthorCard.tsx      |   4 +-
 src/components/ContentCard/ContentCard.tsx    |  16 ++---
 src/components/PreviewCard/PreviewCard.tsx    |  16 ++---
 .../PreviewCard/savedStoriesIcon.png          | Bin 1052 -> 0 bytes
 src/components/PreviewCard/styles.ts          |   2 +
 .../SaveStoryButton/SaveStoryButton.tsx       |  64 ++++++++++++++++++
 src/queries/reactions.tsx                     |   2 +-
 src/queries/savedStories.tsx                  |  54 ++++++++++++---
 src/utils/PubSubContext.tsx                   |  57 ++++++++++++++++
 18 files changed, 209 insertions(+), 40 deletions(-)
 rename src/components/ContentCard/savedStoriesIcon.png => assets/save_story.png (100%)
 create mode 100644 assets/saved_story.png
 delete mode 100644 src/components/PreviewCard/savedStoriesIcon.png
 create mode 100644 src/components/SaveStoryButton/SaveStoryButton.tsx
 create mode 100644 src/utils/PubSubContext.tsx

diff --git a/src/components/ContentCard/savedStoriesIcon.png b/assets/save_story.png
similarity index 100%
rename from src/components/ContentCard/savedStoriesIcon.png
rename to assets/save_story.png
diff --git a/assets/saved_story.png b/assets/saved_story.png
new file mode 100644
index 0000000000000000000000000000000000000000..46c3e7b053fe8b9c8b2a5a15994de304b40a3767
GIT binary patch
literal 12911
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
JufUi@{VzM@4g>%I

literal 0
HcmV?d00001

diff --git a/package-lock.json b/package-lock.json
index f83fb7da..68298471 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
         "expo": "~49.0.11",
         "expo-constants": "~14.4.2",
         "expo-font": "~11.4.0",
+        "expo-image": "~1.3.5",
         "expo-linking": "~5.0.2",
         "expo-router": "^2.0.0",
         "expo-status-bar": "~1.6.0",
@@ -11174,6 +11175,14 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-image": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/expo-image/-/expo-image-1.3.5.tgz",
+      "integrity": "sha512-yrIR2mnfIKbKcguoqWK3U5m3zvLPnonvSCabB2ErVGhws8zQs7ILYf+7T08j8U6eFcohjw0CoAFJ6RWNsX2EhA==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-keep-awake": {
       "version": "12.3.0",
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-12.3.0.tgz",
diff --git a/package.json b/package.json
index ed0b39df..d15d3b50 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,8 @@
     "react-native-vector-icons": "^10.0.2",
     "react-scroll-to-top": "^3.0.0",
     "use-debounce": "^10.0.0",
-    "validator": "^13.11.0"
+    "validator": "^13.11.0",
+    "expo-image": "~1.3.5"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/src/app/(tabs)/author/index.tsx b/src/app/(tabs)/author/index.tsx
index 38b8b88e..7767637c 100644
--- a/src/app/(tabs)/author/index.tsx
+++ b/src/app/(tabs)/author/index.tsx
@@ -122,6 +122,7 @@ function AuthorScreen() {
           {authorStoryPreview?.map(story => (
             <PreviewCard
               key={story.title}
+              storyId={story.id}
               title={story.title}
               image={story.featured_media}
               author={story.author_name}
diff --git a/src/app/(tabs)/genre/index.tsx b/src/app/(tabs)/genre/index.tsx
index 025680e5..87712eb5 100644
--- a/src/app/(tabs)/genre/index.tsx
+++ b/src/app/(tabs)/genre/index.tsx
@@ -272,6 +272,7 @@ function GenreScreen() {
         renderItem={({ item }) => (
           <PreviewCard
             key={item.id}
+            storyId={item.id}
             tags={item.genre_medium.concat(item.tone).concat(item.topic)}
             author={item.author_name}
             image={item.featured_media}
diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx
index 81341d77..b5c7b343 100644
--- a/src/app/(tabs)/home/index.tsx
+++ b/src/app/(tabs)/home/index.tsx
@@ -96,6 +96,7 @@ function HomeScreen() {
               {featuredStories.map(story => (
                 <PreviewCard
                   key={story.id}
+                  storyId={story.id}
                   title={story.title}
                   image={story.featured_media}
                   author={story.author_name}
@@ -132,6 +133,7 @@ function HomeScreen() {
                   title={story.title}
                   author={story.author_name}
                   authorImage={story.author_image}
+                  storyId={story.id}
                   pressFunction={() =>
                     router.push({
                       pathname: '/story',
@@ -161,6 +163,7 @@ function HomeScreen() {
                   title={story.title}
                   author={story.author_name}
                   authorImage={story.author_image}
+                  storyId={story.id}
                   pressFunction={() =>
                     router.push({
                       pathname: '/story',
diff --git a/src/app/(tabs)/search/index.tsx b/src/app/(tabs)/search/index.tsx
index a5114727..fdc5612d 100644
--- a/src/app/(tabs)/search/index.tsx
+++ b/src/app/(tabs)/search/index.tsx
@@ -306,6 +306,7 @@ function SearchScreen() {
                 {recentlyViewed.map(item => (
                   <PreviewCard
                     key={item.title}
+                    storyId={item.id}
                     title={item.title}
                     image={item.featured_media}
                     author={item.author_name}
@@ -395,7 +396,8 @@ function SearchScreen() {
             contentContainerStyle={styles.contentCotainerStories}
             renderItem={({ item }) => (
               <PreviewCard
-                key={item.title}
+                key={item.id}
+                storyId={item.id}
                 title={item.title}
                 image={item.featured_media}
                 author={item.author_name}
diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
index c15ba80c..b8f05279 100644
--- a/src/app/_layout.tsx
+++ b/src/app/_layout.tsx
@@ -2,6 +2,7 @@ import { Stack } from 'expo-router';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { AuthContextProvider } from '../utils/AuthContext';
+import { BooleanPubSubProvider } from '../utils/PubSubContext';
 import ToastComponent from '../components/Toast/Toast';
 import { Keyboard, TouchableWithoutFeedback } from 'react-native';
 
@@ -9,11 +10,13 @@ function StackLayout() {
   return (
     <SafeAreaProvider>
       <AuthContextProvider>
-        <Stack>
-          <Stack.Screen name="index" options={{ headerShown: false }} />
-          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-          <Stack.Screen name="auth" options={{ headerShown: false }} />
-        </Stack>
+        <BooleanPubSubProvider>
+          <Stack>
+            <Stack.Screen name="index" options={{ headerShown: false }} />
+            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+            <Stack.Screen name="auth" options={{ headerShown: false }} />
+          </Stack>
+        </BooleanPubSubProvider>
       </AuthContextProvider>
       <ToastComponent />
     </SafeAreaProvider>
diff --git a/src/components/AuthorCard/AuthorCard.tsx b/src/components/AuthorCard/AuthorCard.tsx
index afdd2b57..99694abd 100644
--- a/src/components/AuthorCard/AuthorCard.tsx
+++ b/src/components/AuthorCard/AuthorCard.tsx
@@ -1,7 +1,5 @@
-import { Image, Pressable, Text, View } from 'react-native';
-
+import { Image, Text, View } from 'react-native';
 import styles from './styles';
-import globalStyles from '../../styles/globalStyles';
 
 type AuthorCardProps = {
   name: string;
diff --git a/src/components/ContentCard/ContentCard.tsx b/src/components/ContentCard/ContentCard.tsx
index dd62a58b..c766751a 100644
--- a/src/components/ContentCard/ContentCard.tsx
+++ b/src/components/ContentCard/ContentCard.tsx
@@ -1,21 +1,23 @@
 import {
   GestureResponderEvent,
-  Image,
   Pressable,
   Text,
   View,
   TouchableOpacity,
 } from 'react-native';
+import { Image } from 'expo-image';
 
 import styles from './styles';
 import globalStyles from '../../styles/globalStyles';
 import Emoji from 'react-native-emoji';
+import SaveStoryButton from '../SaveStoryButton/SaveStoryButton';
 
 type ContentCardProps = {
   title: string;
   author: string;
   image: string;
   authorImage: string;
+  storyId: number;
   pressFunction: (event: GestureResponderEvent) => void;
 };
 
@@ -24,12 +26,9 @@ function ContentCard({
   author,
   image,
   authorImage,
+  storyId,
   pressFunction,
 }: ContentCardProps) {
-  const saveStory = () => {
-    console.log("testing '+' icon does something for story " + title);
-  };
-
   return (
     <Pressable onPress={pressFunction}>
       <View style={styles.contentCard}>
@@ -76,11 +75,8 @@ function ContentCard({
                 </Text>
               </View>
             </View>
-            <TouchableOpacity onPress={() => saveStory()}>
-              <Image
-                style={styles.saveStoryImage}
-                source={require('./savedStoriesIcon.png')}
-              />
+            <TouchableOpacity>
+              <SaveStoryButton storyId={storyId} />
             </TouchableOpacity>
           </View>
         </View>
diff --git a/src/components/PreviewCard/PreviewCard.tsx b/src/components/PreviewCard/PreviewCard.tsx
index dfe73227..71d6d057 100644
--- a/src/components/PreviewCard/PreviewCard.tsx
+++ b/src/components/PreviewCard/PreviewCard.tsx
@@ -1,16 +1,17 @@
 import * as cheerio from 'cheerio';
 import {
   GestureResponderEvent,
-  Image,
   Pressable,
   Text,
   TouchableOpacity,
   View,
 } from 'react-native';
 import Emoji from 'react-native-emoji';
+import { Image } from 'expo-image';
 
 import styles from './styles';
 import globalStyles from '../../styles/globalStyles';
+import SaveStoryButton from '../SaveStoryButton/SaveStoryButton';
 
 const placeholderImage =
   'https://gwn-uploads.s3.amazonaws.com/wp-content/uploads/2021/10/10120952/Girls-Write-Now-logo-avatar.png';
@@ -18,6 +19,7 @@ const placeholderImage =
 type PreviewCardProps = {
   title: string;
   image: string;
+  storyId: number;
   author: string;
   authorImage: string;
   excerpt: { html: string };
@@ -28,16 +30,13 @@ type PreviewCardProps = {
 function PreviewCard({
   title,
   image,
+  storyId,
   author,
   authorImage,
   excerpt,
   tags,
   pressFunction,
 }: PreviewCardProps) {
-  const saveStory = () => {
-    console.log("testing '+' icon does something for story " + title);
-  };
-
   return (
     <Pressable onPress={pressFunction}>
       <View style={styles.card}>
@@ -45,11 +44,8 @@ function PreviewCard({
           <Text numberOfLines={1} style={[globalStyles.h3, styles.title]}>
             {title}
           </Text>
-          <TouchableOpacity onPress={() => saveStory()}>
-            <Image
-              style={{ width: 30, height: 30 }}
-              source={require('./savedStoriesIcon.png')}
-            />
+          <TouchableOpacity>
+            <SaveStoryButton storyId={storyId} />
           </TouchableOpacity>
         </View>
         <View style={styles.body}>
diff --git a/src/components/PreviewCard/savedStoriesIcon.png b/src/components/PreviewCard/savedStoriesIcon.png
deleted file mode 100644
index 65b2ea6e4dd47e1c590ef1cbe5d7afc29d8fcca7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1052
zcmV+%1mpXOP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk00001b5ch_0Itp)
z=>Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@
z1ONa40RR91JfH&r1ONa40RR91JOBUy0E^%0TmS$AhDk(0RA>e5n@@7uFciimr$e`7
zhCjm&P7v1VhMpkVWYbNP6Eryi^aM>$(8;zeN=^{ENH^V(6Qo@wfn;E^B&pr+b1h<w
z2YCtx*;q41wk*l-_nwd*;#rE2G#n1|wr#)1(U4Ns9mlDLR5Pv!vi^dsJ>;E2p>P%^
zpbQq?-QDePZEbx)!+h{wlCB94d0Rp7Dd53i@ClWUJ+Q82S)K8Cd|s(k*x2~g@AvBv
zl1CH3Rpd;qVzKz~->L8O;o+ePU<bz#hl2LiNY*JCJQgz1kS__EIYglg>uKrbW`fVi
zqM-RzouJ&`-(P#ciMQ+o$~yrUE$teUld(|NMSdNuoR(_<Ul98C_VyU_lC?)L<gK&-
zhH#v-3=>(yQfn;M+^dj^sVI7We(n$i%k7S&sd<5^duoYdS(=jKw9*6>g(U-yqNOC)
z$t;{?>qU`$<1GA2r<MM@-MV~|)6Tc9(E|4!F+M4^fA$vWVs29{u(YkbkWOQ6FH5{B
z?brDwb~n?N7TEb?kED>@nU*mXIMN=))V14f=4r*LT@(7=xLG;_HeuMsDMM!AIJIj+
z-`aK91W&7fuzLz$U`I&ND}KE^SwwMKU=uto54IuPy_rRDh0p@0&C}8Xm)bw*$iH1o
zujaJQW@&S55sxI9h2znyIlX2UHpdq6NTS^USeB<1wpTUrpfqe!iaLA_ZvBkld~lhZ
zpF%t`^;e5_9bT5F6}DG3@u235?{~1Uza|=*>cZb3SXT?YEKe(JugVe5m2@KfhX)Ho
z@W>Wszd=xStsT;;;yUxe!J7-$vX1B$+n4|4^{FA9&C=_%<SL$>S$Gv%UgtA13$IiA
zt9W*1;Z<mPozKvETI&=}JzIHX^E@b3SC=Qk)6zjixxcxdmKQlLZf<U>Q8bmrI=+zT
z9%pIy_a(shlL!-0X8zg|h$sEc;L`8BK;WetRm=0VB}580$ppr4f<e>xLNn~&jVDeU
zEM9H+KsFT*Zf$RGk1(8%JPkB`<2~{0FeYC?Y7t~69vrU$oKh3CHY3NAPD{&z$sM_P
z-@%0@)71V7V0ptG@80a)V&HhGRB|UaHZVDHrOD-TdyttEaD%eK!k;1k#DG)4tbieX
zh|K@q4~vtSMgTu5m&+Z$@H4>bCc$B4&fHZTbyaS1&QS@A_V9h}K0ZF4)oQg-P~N|w
WSfpXwp?D_%0000<MNUMnLSTZx7~&WJ

diff --git a/src/components/PreviewCard/styles.ts b/src/components/PreviewCard/styles.ts
index ed355c7e..d8d3ef1d 100644
--- a/src/components/PreviewCard/styles.ts
+++ b/src/components/PreviewCard/styles.ts
@@ -50,9 +50,11 @@ const styles = StyleSheet.create({
     paddingTop: 16,
     paddingLeft: 12,
     paddingRight: 12,
+    paddingBottom: 8,
     borderBottomColor: '#EBEBEB',
     borderBottomWidth: StyleSheet.hairlineWidth,
     flexDirection: 'row',
+    flexGrow: 1,
     justifyContent: 'space-between',
   },
   tag: {
diff --git a/src/components/SaveStoryButton/SaveStoryButton.tsx b/src/components/SaveStoryButton/SaveStoryButton.tsx
new file mode 100644
index 00000000..c4d43315
--- /dev/null
+++ b/src/components/SaveStoryButton/SaveStoryButton.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+import {
+  addUserStoryToReadingList,
+  deleteUserStoryToReadingList,
+  isStoryInReadingList,
+} from '../../queries/savedStories';
+import { usePubSub } from '../../utils/PubSubContext';
+import { useSession } from '../../utils/AuthContext';
+import { Image } from 'expo-image';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+type SaveStoryButtonProps = {
+  storyId: number;
+};
+
+const saveStoryImage = require('../../../assets/save_story.png');
+const savedStoryImage = require('../../../assets/saved_story.png');
+
+export default function SaveStoryButton({ storyId }: SaveStoryButtonProps) {
+  const { user } = useSession();
+  const [storyIsSaved, setStoryIsSaved] = useState(false);
+  const { channels, initializeChannel, publish } = usePubSub();
+
+  useEffect(() => {
+    isStoryInReadingList(storyId, user?.id).then(storyInReadingList => {
+      setStoryIsSaved(storyInReadingList);
+      initializeChannel(storyId);
+    });
+  }, [storyId]);
+
+  useEffect(() => {
+    // if another card updates this story, update it here also
+    if (typeof channels[storyId] !== 'undefined') {
+      setStoryIsSaved(channels[storyId] ?? false);
+    }
+  }, [channels[storyId]]);
+
+  useEffect(() => {
+    isStoryInReadingList(storyId, user?.id).then(storyInReadingList =>
+      setStoryIsSaved(storyInReadingList),
+    );
+  }, [storyId]);
+
+  const saveStory = async (saved: boolean) => {
+    setStoryIsSaved(saved);
+    publish(storyId, saved); // update other cards with this story
+
+    if (saved) {
+      await addUserStoryToReadingList(user?.id, storyId);
+    } else {
+      await deleteUserStoryToReadingList(user?.id, storyId);
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={() => saveStory(!storyIsSaved)}>
+      {storyIsSaved ? (
+        <Image style={{ width: 30, height: 30 }} source={savedStoryImage} />
+      ) : (
+        <Image style={{ width: 30, height: 30 }} source={saveStoryImage} />
+      )}
+    </TouchableOpacity>
+  );
+}
diff --git a/src/queries/reactions.tsx b/src/queries/reactions.tsx
index 8a9da888..ffe68c40 100644
--- a/src/queries/reactions.tsx
+++ b/src/queries/reactions.tsx
@@ -53,7 +53,7 @@ export async function fetchAllReactionsToStory(
       `An error occured when trying to fetch reactions to a story', ${error}`,
     );
   } else {
-    return data;
+    return data as Reactions[];
   }
 }
 
diff --git a/src/queries/savedStories.tsx b/src/queries/savedStories.tsx
index 59f6ecaa..0416ecb8 100644
--- a/src/queries/savedStories.tsx
+++ b/src/queries/savedStories.tsx
@@ -1,7 +1,9 @@
 import supabase from '../utils/supabase';
 
-const favorites = 'favorites';
-const readingList = 'reading list';
+enum SavedList {
+  FAVORITES = 'favorites',
+  READING_LIST = 'reading list',
+}
 
 async function fetchUserStories(
   user_id: string | undefined,
@@ -48,11 +50,11 @@ async function fetchUserStories(
 }
 
 export async function fetchUserStoriesFavorites(user_id: string | undefined) {
-  return await fetchUserStories(user_id, favorites);
+  return await fetchUserStories(user_id, SavedList.FAVORITES);
 }
 
 export async function fetchUserStoriesReadingList(user_id: string | undefined) {
-  return await fetchUserStories(user_id, readingList);
+  return await fetchUserStories(user_id, SavedList.READING_LIST);
 }
 
 async function addUserStory(
@@ -62,13 +64,15 @@ async function addUserStory(
 ) {
   const { error } = await supabase
     .from('saved_stories')
-    .insert([{ user_id: user_id, story_id: story_id, name: name }])
+    .upsert([{ user_id: user_id, story_id: story_id, name: name }])
     .select();
 
   if (error) {
     if (process.env.NODE_ENV !== 'production') {
       throw new Error(
-        `An error occured when trying to set user saved stories: ${error.details}`,
+        `An error occured when trying to set user saved stories: ${JSON.stringify(
+          error,
+        )}`,
       );
     }
   }
@@ -78,17 +82,31 @@ export async function addUserStoryToFavorites(
   user_id: string | undefined,
   story_id: number,
 ) {
-  addUserStory(user_id, story_id, favorites);
+  addUserStory(user_id, story_id, SavedList.FAVORITES);
 }
 
 export async function addUserStoryToReadingList(
   user_id: string | undefined,
   story_id: number,
 ) {
-  addUserStory(user_id, story_id, readingList);
+  addUserStory(user_id, story_id, SavedList.READING_LIST);
+}
+
+export async function deleteUserStoryToFavorites(
+  user_id: string | undefined,
+  story_id: number,
+) {
+  deleteUserStory(user_id, story_id, SavedList.FAVORITES);
 }
 
-export async function deleteUserStories(
+export async function deleteUserStoryToReadingList(
+  user_id: string | undefined,
+  story_id: number,
+) {
+  deleteUserStory(user_id, story_id, SavedList.READING_LIST);
+}
+
+export async function deleteUserStory(
   user_id: string | undefined,
   story_id: number,
   name: string,
@@ -108,3 +126,21 @@ export async function deleteUserStories(
     }
   }
 }
+
+export async function isStoryInReadingList(
+  storyId: number,
+  userId: string | undefined,
+): Promise<boolean> {
+  let { data, error } = await supabase.rpc('is_story_saved_for_user', {
+    list_name: 'reading list',
+    story_db_id: storyId,
+    user_uuid: userId,
+  });
+
+  if (error) {
+    console.error(error);
+    return false;
+  }
+
+  return data;
+}
diff --git a/src/utils/PubSubContext.tsx b/src/utils/PubSubContext.tsx
new file mode 100644
index 00000000..fbb9ada6
--- /dev/null
+++ b/src/utils/PubSubContext.tsx
@@ -0,0 +1,57 @@
+import React, { createContext, useContext, useMemo, useState } from 'react';
+
+export interface PubSubState {
+  channels: Record<number, boolean | undefined>;
+  initializeChannel: (id: number) => void;
+  publish: (id: number, message: boolean) => void;
+}
+
+const BooleanPubSubContext = createContext({} as PubSubState);
+
+export function usePubSub() {
+  const value = useContext(BooleanPubSubContext);
+  if (process.env.NODE_ENV !== 'production') {
+    if (!value) {
+      throw new Error(
+        'usePubSub must be wrapped in a <PubSubContextProvider />',
+      );
+    }
+  }
+
+  return value;
+}
+
+export function BooleanPubSubProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [channels, setChannels] = useState<Record<number, boolean | undefined>>(
+    {},
+  );
+
+  const initializeChannel = (id: number) => {
+    if (!(id in channels)) {
+      setChannels({ ...channels, [id]: undefined });
+    }
+  };
+
+  const publish = (id: number, message: boolean) => {
+    setChannels({ ...channels, [id]: message });
+  };
+
+  const authContextValue = useMemo(
+    () => ({
+      channels,
+      initializeChannel,
+      publish,
+    }),
+    [channels],
+  );
+
+  return (
+    <BooleanPubSubContext.Provider value={authContextValue}>
+      {children}
+    </BooleanPubSubContext.Provider>
+  );
+}

From 9cc1b1a05e002f992873c7949ffd2519f651baa0 Mon Sep 17 00:00:00 2001
From: Aditya Pawar <34043950+adityapawar1@users.noreply.github.com>
Date: Thu, 18 Apr 2024 21:34:15 -0700
Subject: [PATCH 6/7] [bug] Bug bash changes (#86)

* Bug bash changes

* Change link back to login
---
 src/app/(tabs)/story/index.tsx     | 39 ++++++++++++++++++++++--------
 src/app/auth/onboarding/index.tsx  | 13 ++++++++++
 src/app/auth/onboarding/styles.tsx |  4 +++
 src/app/auth/signup/index.tsx      |  4 +--
 4 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/app/(tabs)/story/index.tsx b/src/app/(tabs)/story/index.tsx
index 2387f2f1..2995426d 100644
--- a/src/app/(tabs)/story/index.tsx
+++ b/src/app/(tabs)/story/index.tsx
@@ -89,7 +89,12 @@ function StoryScreen() {
                 style={styles.authorImage}
                 source={{ uri: story.author_image ? story.author_image : '' }}
               />
-              <Text style={globalStyles.subHeading1Bold}>
+              <Text
+                style={[
+                  globalStyles.subHeading1Bold,
+                  { textDecorationLine: 'underline' },
+                ]}
+              >
                 By {story.author_name}
               </Text>
             </View>
@@ -161,15 +166,29 @@ function StoryScreen() {
             systemFonts={fonts}
           />
 
-          <View style={styles.author}>
-            <Image
-              style={styles.authorImage}
-              source={{ uri: story.author_image }}
-            />
-            <Text style={globalStyles.subHeading1Bold}>
-              By {story.author_name}
-            </Text>
-          </View>
+          <TouchableOpacity
+            onPress={() => {
+              router.push({
+                pathname: '/author',
+                params: { author: story.author_id.toString() },
+              });
+            }}
+          >
+            <View style={styles.author}>
+              <Image
+                style={styles.authorImage}
+                source={{ uri: story.author_image ? story.author_image : '' }}
+              />
+              <Text
+                style={[
+                  globalStyles.subHeading1Bold,
+                  { textDecorationLine: 'underline' },
+                ]}
+              >
+                By {story.author_name}
+              </Text>
+            </View>
+          </TouchableOpacity>
 
           <Button
             textColor="black"
diff --git a/src/app/auth/onboarding/index.tsx b/src/app/auth/onboarding/index.tsx
index ea0af6ed..8667173f 100644
--- a/src/app/auth/onboarding/index.tsx
+++ b/src/app/auth/onboarding/index.tsx
@@ -30,6 +30,7 @@ function OnboardingScreen() {
   const [pronouns, setPronouns] = useState('');
   const [birthday, setBirthday] = useState('');
   const [birthdayExists, setBirthdayExists] = useState(false);
+  const [birthdayChanged, setBirthdayChanged] = useState(false);
   const [gender, setGender] = useState('');
   const [raceEthnicity, setRaceEthnicity] = useState('');
   const [showDatePicker, setShowDatePicker] = useState(false);
@@ -142,6 +143,7 @@ function OnboardingScreen() {
   };
 
   const onConfirmDate = (date: Date) => {
+    setBirthdayChanged(true);
     setShowDatePicker(false);
     setBirthday(date.toLocaleDateString());
     setDisplayDate(date);
@@ -235,6 +237,16 @@ function OnboardingScreen() {
         </View>
 
         <View>
+          {birthdayChanged && (
+            <View style={[styles.info, styles.warning]}>
+              <Icon type="material" name="info-outline" color="#797979" />
+              <Text style={[globalStyles.subtext, styles.subtext]}>
+                You can only input your birthday once. Please make sure the date
+                is correct before saving as you will not be able to change your
+                birthday in the future.
+              </Text>
+            </View>
+          )}
           <View style={styles.updateProfileButton}>
             <StyledButton
               text="Update profile"
@@ -248,6 +260,7 @@ function OnboardingScreen() {
               }
             />
           </View>
+
           <Link
             style={[globalStyles.bodyBoldUnderline, styles.skipButton]}
             href="/(tabs)/home"
diff --git a/src/app/auth/onboarding/styles.tsx b/src/app/auth/onboarding/styles.tsx
index 6555413a..2149ebfc 100644
--- a/src/app/auth/onboarding/styles.tsx
+++ b/src/app/auth/onboarding/styles.tsx
@@ -26,6 +26,10 @@ export default StyleSheet.create({
   body1: {
     marginTop: 26,
   },
+  warning: {
+    marginTop: 40,
+    marginBottom: 24,
+  },
   info: {
     flexDirection: 'row',
     marginTop: 12,
diff --git a/src/app/auth/signup/index.tsx b/src/app/auth/signup/index.tsx
index fbaeb5cd..f75aeab5 100644
--- a/src/app/auth/signup/index.tsx
+++ b/src/app/auth/signup/index.tsx
@@ -171,14 +171,14 @@ function SignUpScreen() {
             placeholder="First Name"
             label="First Name"
             placeholderTextColor={colors.darkGrey}
-            onChange={setFirstName}
+            onChange={text => setFirstName(text.replaceAll(/[^a-zA-Z]/g, ''))}
             value={firstName}
           />
           <UserStringInput
             placeholder="Last Name"
             label="Last Name"
             placeholderTextColor={colors.darkGrey}
-            onChange={setLastName}
+            onChange={text => setLastName(text.replaceAll(/[^a-zA-Z]/g, ''))}
             value={lastName}
           />
           <UserStringInput

From 85549e7bbce87e6ed8c8a84f925ac23a86a68419 Mon Sep 17 00:00:00 2001
From: Justin Lee <91563628+jjstnlee@users.noreply.github.com>
Date: Thu, 18 Apr 2024 22:10:24 -0700
Subject: [PATCH 7/7] [bug] Weird issues with keyboard in signup (#85)

* Fixed keyboard bug on signup page

* Revert to justin's code

---------

Co-authored-by: Aditya Pawar <34043950+adityapawar1@users.noreply.github.com>
Co-authored-by: Aditya Pawar <apawar@berkeley.edu>
---
 src/app/auth/signup/index.tsx | 247 +++++++++++++++++-----------------
 src/styles/globalStyles.ts    |   1 -
 2 files changed, 124 insertions(+), 124 deletions(-)

diff --git a/src/app/auth/signup/index.tsx b/src/app/auth/signup/index.tsx
index f75aeab5..17608b48 100644
--- a/src/app/auth/signup/index.tsx
+++ b/src/app/auth/signup/index.tsx
@@ -1,20 +1,20 @@
 import { Link, router } from 'expo-router';
 import { useEffect, useRef, useState } from 'react';
-import { Alert, Text, View } from 'react-native';
+import { Alert, KeyboardAvoidingView, Text, View } from 'react-native';
 import { Icon as RNEIcon } from 'react-native-elements';
 import { ScrollView } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import validator from 'validator';
 
 import styles from './styles';
+import PasswordComplexityText from '../../../components/PasswordComplexityText/PasswordComplexityText';
 import StyledButton from '../../../components/StyledButton/StyledButton';
 import UserStringInput from '../../../components/UserStringInput/UserStringInput';
-import PasswordComplexityText from '../../../components/PasswordComplexityText/PasswordComplexityText';
+import { isEmailTaken } from '../../../queries/profiles';
 import colors from '../../../styles/colors';
 import globalStyles from '../../../styles/globalStyles';
 import { useSession } from '../../../utils/AuthContext';
 import supabase from '../../../utils/supabase';
-import { isEmailTaken } from '../../../queries/profiles';
 
 function SignUpScreen() {
   const { signUp } = useSession();
@@ -143,133 +143,134 @@ function SignUpScreen() {
       style={[globalStyles.authContainer]}
       edges={['right', 'left', 'top']}
     >
-      <ScrollView
-        showsVerticalScrollIndicator={false}
-        automaticallyAdjustKeyboardInsets={true}
-        keyboardShouldPersistTaps="handled"
-        contentContainerStyle={styles.flex}
-      >
-        <View style={styles.inputs}>
-          <Text style={[globalStyles.h1, styles.title]}>
-            {'Read stories from \nyoung creators'}
-          </Text>
-
-          <UserStringInput
-            placeholder="Username"
-            label="Username"
-            placeholderTextColor={colors.darkGrey}
-            onChange={setAndCheckUsername}
-            value={username}
-          />
-          {usernameError && (
-            <Text style={[globalStyles.errorMessage, styles.inputError]}>
-              {usernameError}
+      <KeyboardAvoidingView behavior="padding">
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          keyboardShouldPersistTaps="handled"
+          contentContainerStyle={styles.flex}
+        >
+          <View style={styles.inputs}>
+            <Text style={[globalStyles.h1, styles.title]}>
+              {'Read stories from \nyoung creators'}
             </Text>
-          )}
 
-          <UserStringInput
-            placeholder="First Name"
-            label="First Name"
-            placeholderTextColor={colors.darkGrey}
-            onChange={text => setFirstName(text.replaceAll(/[^a-zA-Z]/g, ''))}
-            value={firstName}
-          />
-          <UserStringInput
-            placeholder="Last Name"
-            label="Last Name"
-            placeholderTextColor={colors.darkGrey}
-            onChange={text => setLastName(text.replaceAll(/[^a-zA-Z]/g, ''))}
-            value={lastName}
-          />
-          <UserStringInput
-            placeholder="Email"
-            label="Email"
-            placeholderTextColor={colors.darkGrey}
-            onChange={setAndCheckEmail}
-            value={email}
-            attributes={{
-              textContentType: 'emailAddress',
-              secureTextEntry: false,
-            }}
-          />
-          {emailError && (
-            <Text style={[globalStyles.errorMessage, styles.inputError]}>
-              {emailError}
-            </Text>
-          )}
-
-          <UserStringInput
-            placeholder="Password"
-            label="Password"
-            placeholderTextColor={colors.darkGrey}
-            onChange={text => {
-              setPassword(text);
-              checkPassword(text);
-            }}
-            value={password}
-            attributes={{
-              textContentType: 'password',
-              secureTextEntry: passwordTextHidden,
-            }}
-          >
-            <RNEIcon
-              name={passwordTextHidden ? 'visibility-off' : 'visibility'}
-              type="material"
-              style={styles.icon}
-              onPress={() => setPasswordTextHidden(!passwordTextHidden)}
+            <UserStringInput
+              placeholder="Username"
+              label="Username"
+              placeholderTextColor={colors.darkGrey}
+              onChange={setAndCheckUsername}
+              value={username}
             />
-          </UserStringInput>
-        </View>
-        {password !== '' && (
-          <PasswordComplexityText
-            condition={hasUppercase}
-            message="At least 1 uppercase letter"
-          />
-        )}
-        {password !== '' && (
-          <PasswordComplexityText
-            condition={hasLowercase}
-            message="At least 1 lowercase letter"
-          />
-        )}
-        {password !== '' && (
-          <PasswordComplexityText
-            condition={hasNumber}
-            message="At least 1 number"
-          />
-        )}
-        {password !== '' && (
-          <PasswordComplexityText
-            condition={hasLength}
-            message="At least 8 characters"
-          />
-        )}
+            {usernameError && (
+              <Text style={[globalStyles.errorMessage, styles.inputError]}>
+                {usernameError}
+              </Text>
+            )}
 
-        <View>
-          <View style={[styles.verticallySpaced, globalStyles.mt20]}>
-            <StyledButton
-              text="Sign Up"
-              disabled={
-                !passwordComplexity ||
-                loading ||
-                emailError !== '' ||
-                usernameError !== '' ||
-                firstName.length === 0 ||
-                lastName.length === 0 ||
-                email.length === 0 ||
-                username.length === 0
-              }
-              onPress={signUpWithEmail}
+            <UserStringInput
+              placeholder="First Name"
+              label="First Name"
+              placeholderTextColor={colors.darkGrey}
+              onChange={setFirstName}
+              value={firstName}
+            />
+            <UserStringInput
+              placeholder="Last Name"
+              label="Last Name"
+              placeholderTextColor={colors.darkGrey}
+              onChange={setLastName}
+              value={lastName}
+            />
+            <UserStringInput
+              placeholder="Email"
+              label="Email"
+              placeholderTextColor={colors.darkGrey}
+              onChange={setAndCheckEmail}
+              value={email}
+              attributes={{
+                textContentType: 'emailAddress',
+                secureTextEntry: false,
+              }}
             />
+            {emailError && (
+              <Text style={[globalStyles.errorMessage, styles.inputError]}>
+                {emailError}
+              </Text>
+            )}
+
+            <UserStringInput
+              placeholder="Password"
+              label="Password"
+              placeholderTextColor={colors.darkGrey}
+              onChange={text => {
+                setPassword(text);
+                checkPassword(text);
+              }}
+              value={password}
+              attributes={{
+                textContentType: 'password',
+                secureTextEntry: passwordTextHidden,
+              }}
+            >
+              <RNEIcon
+                name={passwordTextHidden ? 'visibility-off' : 'visibility'}
+                type="material"
+                style={styles.icon}
+                onPress={() => setPasswordTextHidden(!passwordTextHidden)}
+              />
+            </UserStringInput>
           </View>
-          <View style={styles.redirectText}>
-            <Text style={globalStyles.body1}>Already have an account?</Text>
-            <Link style={globalStyles.bodyBoldUnderline} href="/auth/login">
-              Log In
-            </Link>
+          {password !== '' && (
+            <PasswordComplexityText
+              condition={hasUppercase}
+              message="At least 1 uppercase letter"
+            />
+          )}
+          {password !== '' && (
+            <PasswordComplexityText
+              condition={hasLowercase}
+              message="At least 1 lowercase letter"
+            />
+          )}
+          {password !== '' && (
+            <PasswordComplexityText
+              condition={hasNumber}
+              message="At least 1 number"
+            />
+          )}
+          {password !== '' && (
+            <PasswordComplexityText
+              condition={hasLength}
+              message="At least 8 characters"
+            />
+          )}
+
+          <View>
+            <View style={[styles.verticallySpaced, globalStyles.mt20]}>
+              <StyledButton
+                text="Sign Up"
+                disabled={
+                  !passwordComplexity ||
+                  loading ||
+                  emailError !== '' ||
+                  usernameError !== '' ||
+                  firstName.length === 0 ||
+                  lastName.length === 0 ||
+                  email.length === 0 ||
+                  username.length === 0
+                }
+                onPress={signUpWithEmail}
+              />
+            </View>
+            <View style={styles.redirectText}>
+              <Text style={globalStyles.body1}>Already have an account?</Text>
+              <Link style={globalStyles.bodyBoldUnderline} href="/auth/login">
+                Log In
+              </Link>
+            </View>
           </View>
-        </View>
-      </ScrollView>
+        </ScrollView>
+      </KeyboardAvoidingView>
     </SafeAreaView>
   );
 }
diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts
index 3a104cf0..f85e8260 100644
--- a/src/styles/globalStyles.ts
+++ b/src/styles/globalStyles.ts
@@ -127,7 +127,6 @@ export default StyleSheet.create({
     textAlign: 'left',
     color: 'black',
   },
-
   subtext: {
     fontFamily: 'Manrope-Regular',
     fontSize: 12,