perf(beer): update to use new id prop

src/screens/Feed/index.tsx

@@ -17,9 +17,9 @@ export const FeedScreen: React.FC<FeedScreenProps> = () => {
   const { colors } = useTheme() as AppTheme
   const { dispatch, beers } = useStoreon<State, Events>('beers')
 
-  const keyExtractor = (item: Beer) => `${item.giver.id}-${item.givenAt}-${item.receiver.id}`
+  const keyExtractor = (item: Beer) => `${item.id}`
 
-  const renderItem: ListRenderItem<Beer> = ({ item }) => {
+  const renderItem: ListRenderItem<Beer> = React.useCallback(({ item }) => {
     const giverFName = item.giver.name.split(' ')[0]
     const receiverFName = item.receiver.name.split(' ')[0]
     const giverPic = item.giver.picture
@@ -54,7 +54,7 @@ export const FeedScreen: React.FC<FeedScreenProps> = () => {
         </View>
       </View>
     )
-  }
+  }, [colors])
 
   const renderFooter: React.FC = () => {
     return (

src/store/auth/helpers.ts

@@ -25,6 +25,7 @@ export function onMessage (message: FirebaseMessagingTypes.RemoteMessage) {
   if (message.data?.hasOwnProperty('beers')) {
     store.dispatch(BEER_EVENTS.NEW_LOG, {
       beer: {
+        id: Number(message.data.id),
         beers: Number(message.data.beers),
         givenAt: message.data.givenAt,
         giver: JSON.parse(message.data.giver),

src/store/beers/index.ts

@@ -180,7 +180,7 @@ export const beers: StoreonModule<State, Events> = (store) => {
   // add a single log to the state
   store.on(BEER_EVENTS.NEW_LOG, ({ beers, auth }, { beer }) => {
     const topLog = beers.beerLog[0]
-    let newLog = [beer].concat(beers.beerLog)
+    let newLog = [beer].concat(beers.beerLog.filter((item) => item.id !== beer.id))
 
     // sort the log in case the beer received is older than the last log we have
     if (topLog && topLog.givenAt > beer.givenAt) {

src/store/beers/types.ts

@@ -22,6 +22,7 @@ export type BeersEvents = {
 }
 
 export type Beer = {
+  id: number,
   beers: number,
   giver: {
     id: string,