@amityco/ts-sdk-react-native 6.34.1-6ae6435.0 → 6.35.0

package/dist/reactionRepository/events/onReactorAddedLocal.d.ts

@@ -1,6 +1,6 @@
 /**
  * ```js
- * import { onReactorAddedLocal } from '@amityco/ts-sdk'
+ * import { onReactorAddedLocal } from '@amityco/ts-sdk-react-native'
  * const dispose = onReactorAdded('post', postId, reactor => {
  *   // ...
  * })

package/dist/reactionRepository/events/onReactorRemovedLocal.d.ts

@@ -1,6 +1,6 @@
 /**
  * ```js
- * import { onReactorRemovedLocal } from '@amityco/ts-sdk'
+ * import { onReactorRemovedLocal } from '@amityco/ts-sdk-react-native'
  * const dispose = onReactorRemoved('post', postId, reactor => {
  *   // ...
  * })

package/dist/reactionRepository/observers/getReactions/getReactions.d.ts

@@ -1,6 +1,6 @@
 /**
  * ```js
- * import { getReactions } from '@amityco/ts-sdk'
+ * import { getReactions } from '@amityco/ts-sdk-react-native'
  *
  * let reactions = []
  * const unsub = liveReactions({

package/dist/storyRepository/api/createImageStory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createImageStory.d.ts","sourceRoot":"","sources":["../../../src/storyRepository/api/createImageStory.ts"],"names":[],"mappings":"AASA;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,eACf,MAAM,aAAa,CAAC,YAAY,CAAC,YACnC,MAAM,aAAa,CAAC,UAAU,CAAC,YAC/B,QAAQ,aACR,MAAM,QAAQ,qBACN,MAAM,gBAAgB,UACjC,MAAM,SAAS,EAAE,KACvB,QAAQ,MAAM,MAAM,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,CA2E/C,CAAC"}
+{"version":3,"file":"createImageStory.d.ts","sourceRoot":"","sources":["../../../src/storyRepository/api/createImageStory.ts"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,eACf,MAAM,aAAa,CAAC,YAAY,CAAC,YACnC,MAAM,aAAa,CAAC,UAAU,CAAC,YAC/B,QAAQ,aACR,MAAM,QAAQ,qBACN,MAAM,gBAAgB,UACjC,MAAM,SAAS,EAAE,KACvB,QAAQ,MAAM,MAAM,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,CA6E/C,CAAC"}

package/dist/storyRepository/api/createVideoStory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createVideoStory.d.ts","sourceRoot":"","sources":["../../../src/storyRepository/api/createVideoStory.ts"],"names":[],"mappings":"AAUA;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,gBAAgB,eACf,MAAM,aAAa,CAAC,YAAY,CAAC,YACnC,MAAM,aAAa,CAAC,UAAU,CAAC,YAC/B,QAAQ,aACR,MAAM,QAAQ,UACjB,MAAM,SAAS,EAAE,KACvB,QAAQ,MAAM,MAAM,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,CA0E/C,CAAC"}
+{"version":3,"file":"createVideoStory.d.ts","sourceRoot":"","sources":["../../../src/storyRepository/api/createVideoStory.ts"],"names":[],"mappings":"AAWA;;;;;;;;;;;;GAYG;AAEH,eAAO,MAAM,gBAAgB,eACf,MAAM,aAAa,CAAC,YAAY,CAAC,YACnC,MAAM,aAAa,CAAC,UAAU,CAAC,YAC/B,QAAQ,aACR,MAAM,QAAQ,UACjB,MAAM,SAAS,EAAE,KACvB,QAAQ,MAAM,MAAM,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,CA4E/C,CAAC"}

package/dist/storyRepository/internalApi/deleteStory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deleteStory.d.ts","sourceRoot":"","sources":["../../../src/storyRepository/internalApi/deleteStory.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,YACb,MAAM,KAAK,CAAC,SAAS,CAAC,0BAE9B,QAAQ,OAAO,CA2BjB,CAAC"}
+{"version":3,"file":"deleteStory.d.ts","sourceRoot":"","sources":["../../../src/storyRepository/internalApi/deleteStory.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW,YACb,MAAM,KAAK,CAAC,SAAS,CAAC,0BAE9B,QAAQ,OAAO,CAmGjB,CAAC"}

package/dist/storyRepository/observers/getActiveStoriesByTarget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getActiveStoriesByTarget.d.ts","sourceRoot":"","sources":["../../../src/storyRepository/observers/getActiveStoriesByTarget.ts"],"names":[],"mappings":"AA6BA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,wBAAwB,WAC3B,MAAM,uBAAuB,YAC3B,MAAM,sBAAsB,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,eA+KhE,CAAC"}
+{"version":3,"file":"getActiveStoriesByTarget.d.ts","sourceRoot":"","sources":["../../../src/storyRepository/observers/getActiveStoriesByTarget.ts"],"names":[],"mappings":"AA8BA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,wBAAwB,WAC3B,MAAM,uBAAuB,YAC3B,MAAM,sBAAsB,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,eA6LhE,CAAC"}

package/dist/storyRepository/observers/getGlobalStoryTargets/GlobalStoryLiveCollectionController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalStoryLiveCollectionController.d.ts","sourceRoot":"","sources":["../../../../src/storyRepository/observers/getGlobalStoryTargets/GlobalStoryLiveCollectionController.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gDAAgD,CAAC;AAU1F,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AASxE,qBAAa,mCAAoC,SAAQ,wBAAwB,CAC/E,iBAAiB,EACjB,KAAK,CAAC,gBAAgB,EACtB,KAAK,CAAC,WAAW,EACjB,yBAAyB,CAC1B;IACC,OAAO,CAAC,qBAAqB,CAAmC;IAEhE,OAAO,CAAC,KAAK,CAAyB;gBAGpC,KAAK,EAAE,KAAK,CAAC,gBAAgB,EAC7B,QAAQ,EAAE,KAAK,CAAC,sBAAsB,CAAC,KAAK,CAAC,WAAW,CAAC;IA0B3D,SAAS,CAAC,KAAK;IAUf,SAAS,CAAC,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,sBAAsB;IAI7D,SAAS,CAAC,kBAAkB,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,OAAO,GACR,EAAE,KAAK,CAAC,sCAAsC,CAAC,iBAAiB,CAAC;IAIlE,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,CAAC,0BAA0B;IA6BzE,OAAO,CAAC,WAAW;IAkCnB,iBAAiB;CAalB"}
+{"version":3,"file":"GlobalStoryLiveCollectionController.d.ts","sourceRoot":"","sources":["../../../../src/storyRepository/observers/getGlobalStoryTargets/GlobalStoryLiveCollectionController.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gDAAgD,CAAC;AAU1F,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AASxE,qBAAa,mCAAoC,SAAQ,wBAAwB,CAC/E,iBAAiB,EACjB,KAAK,CAAC,gBAAgB,EACtB,KAAK,CAAC,WAAW,EACjB,yBAAyB,CAC1B;IACC,OAAO,CAAC,qBAAqB,CAAmC;IAEhE,OAAO,CAAC,KAAK,CAAyB;gBAGpC,KAAK,EAAE,KAAK,CAAC,gBAAgB,EAC7B,QAAQ,EAAE,KAAK,CAAC,sBAAsB,CAAC,KAAK,CAAC,WAAW,CAAC;IA0B3D,SAAS,CAAC,KAAK;IAUf,SAAS,CAAC,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,sBAAsB;IAI7D,SAAS,CAAC,kBAAkB,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,OAAO,GACR,EAAE,KAAK,CAAC,sCAAsC,CAAC,iBAAiB,CAAC;IAIlE,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,CAAC,0BAA0B;IAyCzE,OAAO,CAAC,WAAW;IAkCnB,iBAAiB;CAalB"}

package/dist/storyRepository/utils/createOptimisticTarget.d.ts

@@ -0,0 +1,5 @@
+export declare const createOptimisticTarget: ({ targetId, targetType, }: {
+    targetType: string;
+    targetId: string;
+}) => Promise<void>;
+//# sourceMappingURL=createOptimisticTarget.d.ts.map

package/dist/storyRepository/utils/createOptimisticTarget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createOptimisticTarget.d.ts","sourceRoot":"","sources":["../../../src/storyRepository/utils/createOptimisticTarget.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,sBAAsB;gBAIrB,MAAM;cACR,MAAM;mBAmCjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/ts-sdk-react-native",
-  "version": "6.34.1-6ae6435.0",
+  "version": "6.35.0",
   "license": "CC-BY-ND-4.0",
   "author": "amity.co <developers@amity.co> (https://amity.co)",
   "description": "Amity Social Cloud Typescript SDK",
@@ -80,6 +80,6 @@
     "ts-jest": "^28.0.3"
   },
   "peerDependencies": {
-    "react-native": ">=0.70.13"
+    "react-native": "*"
   }
 }

package/src/@types/domains/client.ts

@@ -36,8 +36,8 @@ declare global {
 
       log: Logger;
       http: AxiosInstance;
-      mqtt: Amity.MqttClient;
-      ws: SocketIOClient.Socket;
+      mqtt?: Amity.MqttClient;
+      ws?: SocketIOClient.Socket;
       emitter: Emitter<Amity.Events>;
 
       hasPermission: (permission: string) => Amity.PermissionChecker;

package/src/client/api/createClient.ts

@@ -47,10 +47,12 @@ export const createClient = (
     debugSession = DEFAULT_DEBUG_SESSION,
     apiEndpoint,
     prefixDeviceIdKey,
+    rteEnabled = true,
   }: {
     debugSession?: string;
     apiEndpoint?: { http?: string; mqtt?: string };
     prefixDeviceIdKey?: string;
+    rteEnabled?: boolean;
   } = {},
 ): Amity.Client => {
   const log = createLogger(debugSession);
@@ -64,8 +66,14 @@ export const createClient = (
   const mqttEndpoint = apiEndpoint?.mqtt ?? computeUrl('mqtt', apiRegion);
 
   const http = createHttpTransport(httpEndpoint);
-  const ws = createWebsocketTransport(httpEndpoint);
-  const mqtt = createMqttTransport(mqttEndpoint);
+
+  let ws;
+  let mqtt;
+
+  if (rteEnabled) {
+    ws = createWebsocketTransport(httpEndpoint);
+    mqtt = createMqttTransport(mqttEndpoint);
+  }
 
   const emitter = createEventEmitter();
 

package/src/client/api/isConnected.ts

@@ -16,9 +16,12 @@ export const isConnected = (): boolean => {
   const client = getActiveClient();
   client.log('client/api/isConnected', client);
 
+  // if client is connected to ws, it means client is connected. If ws is undefined, it means ws is not used.
+  const isWsConnected = (client.ws && client.ws.connected) || !!client.ws;
+
   return !!(
     client.userId &&
     String(client.http.defaults.headers.common?.Authorization)?.length &&
-    client.ws.connected
+    isWsConnected
   );
 };

package/src/client/api/login.ts

@@ -125,7 +125,7 @@ export const login = async (
     // wire websocket events to our event emitter
     proxyWebsocketEvents(client.ws, client.emitter);
 
-    client.ws.open();
+    client.ws?.open();
 
     client.userId = user.userId;
 

package/src/client/api/logout.ts

@@ -22,11 +22,11 @@ export const logout = async (): Promise<boolean> => {
 
   client.log('client/api/disconnectClient');
 
-  if (client.mqtt.connected) {
+  if (client.mqtt && client.mqtt.connected) {
     client.mqtt.disconnect();
   }
 
-  if (client.ws.connected) {
+  if (client.ws && client.ws.connected) {
     client.ws.disconnect();
   }
 
@@ -47,8 +47,8 @@ export const logout = async (): Promise<boolean> => {
 
   client.emitter.all.clear();
   // FIXME: it removes listener in ws.ts, it breaks global ban event
-  client.ws.removeAllListeners();
-  client.mqtt.removeAllListeners();
+  client.ws?.removeAllListeners();
+  client.mqtt?.removeAllListeners();
   client.userId = undefined;
   client.token = undefined;
 
@@ -58,7 +58,8 @@ export const logout = async (): Promise<boolean> => {
     isGlobalBanned: false,
     isUserDeleted: false,
   };
-  client.ws.io.opts.query = { token: '' };
+
+  if (client.ws) client.ws.io.opts.query = { token: '' };
 
   if (typeof document !== 'undefined') {
     document.cookie = '_ascSession=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';

package/src/client/utils/modifyMqttConnection.ts

@@ -7,6 +7,8 @@ let mqttUserId: string;
 
 export async function modifyMqttConnection() {
   const { mqtt, emitter, token } = getActiveClient();
+  if (!mqtt) return;
+
   const accessToken = token?.accessToken ?? '';
 
   const user = getActiveUser();

package/src/client/utils/setClientToken.ts

@@ -31,7 +31,7 @@ export const setClientToken = async (params: Parameters<typeof getToken>[0]) =>
   };
 
   // manually setup the token for ws transport
-  client.ws.io.opts.query = { token: accessToken };
+  if (client.ws) client.ws.io.opts.query = { token: accessToken };
 
   client.token = { accessToken, issuedAt, expiresAt };
 

package/src/core/events.ts

@@ -50,7 +50,7 @@ export const createEventEmitter = () => {
  */
 export const proxyWebsocketEvents = (ws: Amity.Client['ws'], emitter: Amity.Client['emitter']) => {
   WS_EVENTS.forEach(event => {
-    ws.on(event, (param: Amity.Events[typeof event]) => {
+    ws?.on(event, (param: Amity.Events[typeof event]) => {
       emitter.emit(event, param);
     });
   });
@@ -61,7 +61,7 @@ export const proxyMqttEvents = (
   emitter: Amity.Client['emitter'],
 ) => {
   MQTT_EVENTS.forEach(event => {
-    mqttClient.on(event, (...params: any[]) => {
+    mqttClient?.on(event, (...params: any[]) => {
       emitter.emit(event, params.length === 1 ? params[0] : params);
     });
   });

package/src/core/subscription.ts

@@ -162,6 +162,8 @@ export function subscribeTopic(
   callback?: Amity.Listener<ASCError | void>,
 ): Amity.Unsubscriber {
   const { mqtt } = getActiveClient();
+  if (!mqtt) return () => null;
+
   modifyMqttConnection();
 
   return mqtt.subscribe(topic, callback);

package/src/core/transports/ws.ts

@@ -47,7 +47,7 @@ export const synchronousWSCall = async <T>(
   const { ws } = client;
 
   const value = await new Promise<T | undefined>((resolve, reject) => {
-    ws.emit(event, data, (response: Amity.Response<T>) => {
+    ws?.emit(event, data, (response: Amity.Response<T>) => {
       try {
         resolve(unwrapPayload(response));
       } catch (error) {

package/src/reactionRepository/events/onReactorAddedLocal.ts

@@ -5,7 +5,7 @@ import { prepareMessagePayload } from '~/messageRepository/utils';
 
 /**
  * ```js
- * import { onReactorAddedLocal } from '@amityco/ts-sdk'
+ * import { onReactorAddedLocal } from '@amityco/ts-sdk-react-native'
  * const dispose = onReactorAdded('post', postId, reactor => {
  *   // ...
  * })

package/src/reactionRepository/events/onReactorRemovedLocal.ts

@@ -5,7 +5,7 @@ import { prepareMessagePayload } from '~/messageRepository/utils';
 
 /**
  * ```js
- * import { onReactorRemovedLocal } from '@amityco/ts-sdk'
+ * import { onReactorRemovedLocal } from '@amityco/ts-sdk-react-native'
  * const dispose = onReactorRemoved('post', postId, reactor => {
  *   // ...
  * })

package/src/reactionRepository/observers/getReactions/getReactions.ts

@@ -9,7 +9,7 @@ import { ReactionLiveCollectionController } from './ReactionLiveCollectionContro
 */
 /**
  * ```js
- * import { getReactions } from '@amityco/ts-sdk'
+ * import { getReactions } from '@amityco/ts-sdk-react-native'
  *
  * let reactions = []
  * const unsub = liveReactions({

package/src/storyRepository/api/createImageStory.ts

@@ -6,6 +6,7 @@ import { LinkedObject } from '~/utils/linkedObject';
 import { pushToCache } from '~/cache/api';
 import { STORY_KEY_CACHE } from '~/storyRepository/constants';
 import { createStory } from '../internalApi/createStory';
+import { createOptimisticTarget } from '../utils/createOptimisticTarget';
 
 /**
  * ```js
@@ -79,6 +80,8 @@ export const createImageStory = async (
       },
     };
 
+    createOptimisticTarget({ targetId, targetType });
+
     // Fire optimistic event - update fileId
     createOptimisticEvent({ payload, formData }, optimisticData => {
       fireEvent('local.story.created', optimisticData);

package/src/storyRepository/api/createVideoStory.ts

@@ -7,6 +7,7 @@ import { LinkedObject } from '~/utils/linkedObject';
 import { pushToCache } from '~/cache/api';
 import { STORY_KEY_CACHE } from '~/storyRepository/constants';
 import { createStory } from '../internalApi/createStory';
+import { createOptimisticTarget } from '../utils/createOptimisticTarget';
 
 /**
  * ```js
@@ -56,6 +57,8 @@ export const createVideoStory = async (
     new Date(date.setFullYear(date.getFullYear() + 1)),
   );
 
+  createOptimisticTarget({ targetId, targetType });
+
   // Fire optimistic event
   createOptimisticEvent({ payload, formData, isVideo: true }, optimisticData => {
     fireEvent('local.story.created', optimisticData);

package/src/storyRepository/internalApi/deleteStory.ts

@@ -1,6 +1,8 @@
 import { getActiveClient } from '~/client';
 import { fireEvent } from '~/core/events';
 import { getStoryCache } from '../utils/getStoryCache';
+import { dropFromCache, pullFromCache, pushToCache, queryCache } from '~/cache/api';
+import { STORY_KEY_CACHE } from '../constants';
 
 export const deleteStory = async (
   storyId: Amity.Story['storyId'],
@@ -24,6 +26,78 @@ export const deleteStory = async (
         users: [],
         stories: [{ ...data, isDeleted: true }],
       });
+
+      /* ------ Unsynced story case ------ */
+      if (data.syncState !== Amity.SyncState.Synced) {
+        if (permanent) {
+          dropFromCache([STORY_KEY_CACHE.STORY, 'get', storyId]);
+        } else {
+          pushToCache([STORY_KEY_CACHE.STORY, 'get', storyId], { ...cached.data, isDeleted: true });
+        }
+
+        const unsyncedStoriesCache = queryCache<Amity.InternalStory>([
+          STORY_KEY_CACHE.STORY,
+          'get',
+        ])?.filter(
+          story =>
+            story.data.syncState !== Amity.SyncState.Synced &&
+            story.data.targetId === data.targetId &&
+            story.data.isDeleted !== true,
+        );
+
+        // update localLastStoryExpiresAt to be the last story expires
+
+        if (unsyncedStoriesCache && unsyncedStoriesCache.length > 0) {
+          const lastStoryExpires = unsyncedStoriesCache.reduce((acc, story) => {
+            const expireAt = new Date(story.data.expiresAt || 0);
+            return expireAt > acc ? expireAt : acc;
+          }, new Date(0));
+
+          pushToCache(
+            [STORY_KEY_CACHE.EXPIRE, cached.data.targetId],
+            lastStoryExpires.toISOString(),
+          );
+        } else {
+          // if no unsynced stories, remove last story expires since there is no more story
+          dropFromCache([STORY_KEY_CACHE.EXPIRE, cached.data.targetId]);
+        }
+
+        return true;
+      }
+
+      /* ------ Synced story case ------ */
+      const targetCache = pullFromCache<Amity.RawStoryTarget>([
+        STORY_KEY_CACHE.STORY_TARGET,
+        'get',
+        data.targetId,
+      ])?.data;
+
+      const syncedStoriesCache = queryCache<Amity.InternalStory>([
+        STORY_KEY_CACHE.STORY,
+        'get',
+      ])?.filter(
+        story =>
+          story.data.syncState === Amity.SyncState.Synced &&
+          story.data.targetId === data.targetId &&
+          story.data.isDeleted !== true,
+      );
+
+      let lastStoryExpiresAt;
+
+      if (syncedStoriesCache && syncedStoriesCache.length > 0) {
+        lastStoryExpiresAt = syncedStoriesCache?.reduce((acc, story) => {
+          const expireAt = new Date(story.data.expiresAt || 0);
+          return expireAt > acc ? expireAt : acc;
+        }, new Date(0));
+      }
+
+      // update lastStoryExpiresAt from lastest synced story
+      if (targetCache) {
+        pushToCache([STORY_KEY_CACHE.STORY_TARGET, 'get', data.targetId], {
+          ...targetCache,
+          lastStoryExpiresAt,
+        });
+      }
     }
   }
 

package/src/storyRepository/observers/getActiveStoriesByTarget.ts

@@ -1,6 +1,6 @@
 import { getActiveClient } from '~/client';
 import { ENABLE_CACHE_MESSAGE } from '~/utils/constants';
-import { dropFromCache, pullFromCache, pushToCache } from '~/cache/api';
+import { dropFromCache, pullFromCache, pushToCache, queryCache } from '~/cache/api';
 import {
   createQuery,
   runQuery,
@@ -26,6 +26,7 @@ import { onStoryCreated, onStoryCreatedLocal } from '../events/onStoryCreated';
 import { onStoryDeleted, onStoryDeletedLocal } from '../events/onStoryDeleted';
 import { onStoryError } from '../events/onStoryError';
 import { onStoryLocalDataUpdated } from '../events/onStoryLocalDataUpdated';
+import { STORY_KEY_CACHE } from '../constants';
 
 /**
  * ```js
@@ -162,6 +163,20 @@ export const getActiveStoriesByTarget = (
       }
     }
 
+    const unSyncedStories = queryCache<Amity.InternalStory>([STORY_KEY_CACHE.STORY, 'get'])
+      ?.filter(
+        story =>
+          story.data.targetId === params.targetId &&
+          story.data.syncState !== Amity.SyncState.Synced,
+      )
+      .map(story => getResolver('story')(story.data));
+
+    if (unSyncedStories && unSyncedStories?.length > 0) {
+      unSyncedStories.forEach(referenceId => {
+        if (!data.data.includes(referenceId)) data.data.push(referenceId);
+      });
+    }
+
     pushToCache(cacheKey, data.data);
 
     responder(data);

package/src/storyRepository/observers/getGlobalStoryTargets/GlobalStoryLiveCollectionController.ts

@@ -1,6 +1,6 @@
 import hash from 'object-hash';
 import { LiveCollectionController } from '~/core/liveCollection/LiveCollectionController';
-import { pullFromCache, pushToCache } from '~/cache/api';
+import { pullFromCache, pushToCache, queryCache } from '~/cache/api';
 import { LinkedObject } from '~/utils/linkedObject';
 import { STORY_KEY_CACHE } from '~/storyRepository/constants';
 import { sortByLocalSortingDate } from '~/core/query';
@@ -82,7 +82,17 @@ export class GlobalStoryLiveCollectionController extends LiveCollectionControlle
     const collection = pullFromCache<Amity.StoryTargetLiveCollectionCache>(this.cacheKey)?.data;
     if (!collection) return;
 
-    let data = collection.data
+    const targetIds = collection.data;
+
+    const cachedTargets = queryCache<Amity.RawStoryTarget>([STORY_KEY_CACHE.STORY_TARGET]);
+
+    if (cachedTargets && cachedTargets?.length > 0) {
+      cachedTargets?.forEach(({ key }) => {
+        if (!collection.data.includes(key[2] as string)) targetIds.push(key[2] as string);
+      });
+    }
+
+    let data = targetIds
       .map(
         targetId =>
           pullFromCache<Amity.RawStoryTarget>([STORY_KEY_CACHE.STORY_TARGET, 'get', targetId])!,
@@ -93,6 +103,8 @@ export class GlobalStoryLiveCollectionController extends LiveCollectionControlle
     if (!this.shouldNotify(data) && origin === 'event') return;
 
     data = this.applyFilter(data)
+      // exclude story targets with invalid stories
+      .filter(({ localSortingDate }) => !!localSortingDate)
       // Remove internal fields
       .map(
         ({ localFilter, localLastExpires, localLastSeen, localSortingDate, ...rest }) => rest,

package/src/storyRepository/utils/StoryComputedValue.ts

@@ -106,10 +106,10 @@ export class StoryComputedValue {
     const groupByType = stories.reduce(
       (acc, story) => {
         const {
-          data: { targetId, syncState },
+          data: { targetId, syncState, isDeleted },
         } = story;
 
-        if (targetId === this._targetId) {
+        if (targetId === this._targetId && !isDeleted) {
           acc[syncState!] += 1;
         }
 

package/src/storyRepository/utils/createOptimisticTarget.ts

@@ -0,0 +1,46 @@
+import { pullFromCache, pushToCache } from '~/cache/api';
+import { getUser } from '~/userRepository/internalApi/getUser';
+import { getCommunity } from '~/communityRepository/api/getCommunity';
+import { STORY_KEY_CACHE } from '../constants';
+
+export const createOptimisticTarget = async ({
+  targetId,
+  targetType,
+}: {
+  targetType: string;
+  targetId: string;
+}) => {
+  const targetCache = pullFromCache<Amity.RawStoryTarget>([
+    STORY_KEY_CACHE.STORY_TARGET,
+    'get',
+    targetId,
+  ]);
+
+  if (!targetCache) {
+    let optimisticTarget = {
+      targetId,
+      targetType,
+    };
+
+    if (targetType === 'community') {
+      const community = await getCommunity(targetId);
+      optimisticTarget = {
+        ...optimisticTarget,
+        targetPublicId: community.data.communityId,
+        targetUpdatedAt: community.data.updatedAt ?? new Date().toISOString(),
+      } as Amity.RawStoryTarget;
+    }
+
+    if (targetType === 'user') {
+      const user = await getUser(targetId);
+
+      optimisticTarget = {
+        ...optimisticTarget,
+        targetPublicId: user.data.userPublicId,
+        targetUpdatedAt: user.data.updatedAt ?? new Date().toISOString(),
+      } as Amity.RawStoryTarget;
+    }
+
+    pushToCache([STORY_KEY_CACHE.STORY_TARGET, 'get', targetId], optimisticTarget);
+  }
+};