🔀 Merge cookies issue mitigation & reader updates

app/components/content-list-item/content-list-item.tsx

@@ -80,14 +80,12 @@ export class ContentListItem extends React.Component<ContentListItemProps> {
       >
         <View style={Style.ROW}>
           <View style={Style.DETAIL_VIEW}>
-            {content.creator && content.creator.hasFetchedDetails &&
-              <Text
-                color="likeGreen"
-                size="default"
-                weight="600"
-                text={content.creator.displayName}
-              />
-            }
+            <Text
+              color="likeGreen"
+              size="default"
+              weight="600"
+              text={content.creator.displayName || content.creator.likerID}
+            />
             <Text
               color="grey4a"
               size="medium"

app/i18n/en.json

@@ -57,9 +57,10 @@
     "shouldSignInOnDesktop": "Please retry after signing in to http://like.co on desktop"
   },
   "signInScreen": {
-    "error": "Error signing in",
-    "errorAuthCore": "Error signing in with AuthCore",
-    "errorLikeCo": "Error signing in with like.co",
+    "error": "Sign In Error",
+    "errorAuthCore": "Error occurs when signing in to AuthCore",
+    "errorLikeCo": "Error occurs when signing in to like.co",
+    "errorLikerLand": "Error occurs when signing in to liker.land",
     "heading": "At Republic of Liker Land, every Like is a reward to creators",
     "signIn": "Sign In"
   },

app/i18n/zh-Hant-HK.json

@@ -87,6 +87,7 @@
     "error": "登入出現錯誤",
     "errorAuthCore": "登入 AuthCore 錯誤",
     "errorLikeCo": "登入 like.co 錯誤",
+    "errorLikerLand": "登入 liker.land 錯誤",
     "heading": "讚賞公民共和國，每個 Like 都是對創作者的實質回報",
     "signIn": "登入"
   },

app/models/content/content.ts

@@ -47,7 +47,7 @@ export const ContentModel = types
     },
     get isLoading() {
       return !(self.hasCached || self.hasFetchedDetails) ||
-        self.isFetchingDetails ||
+        (!self.hasCached && self.isFetchingDetails) ||
         (self.creator && self.creator.isLoading)
     },
     get shouldFetchDetails() {

app/models/reader-store/reader-store.ts

@@ -174,6 +174,7 @@ export const ReaderStoreModel = types
       }
     }),
     fetchBookmarkList: flow(function * () {
+      if (self.isFetchingBookmarkList) return
       self.isFetchingBookmarkList = true
       try {
         const result: BookmarkListResult = yield self.env.likerLandAPI.fetchReaderBookmark()

app/models/root-store/setup-root-store.ts

@@ -88,7 +88,7 @@ export async function setupRootStore() {
   onSnapshot(
     rootStore,
     ({
-      /* eslint-disable @typescript-eslint/no-unused-vars */
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       navigationStore,
       readerStore: {
         contents,
@@ -99,18 +99,24 @@ export async function setupRootStore() {
         bookmarkList,
       },
       ...snapshot
-      /* eslint-enable @typescript-eslint/no-unused-vars */
     }) => {
-      const bookmarkURLs = new Set(bookmarkList)
-      const [bookmarks, restContents] = partition(c => bookmarkURLs.has(c.url), Object.values(contents))
+      const toBePersistedContentURLs = new Set([
+        ...bookmarkList,
+        ...featuredList,
+        ...followedList.slice(0, 20),
+      ])
+      const [toBePersistedContents, restContents] = partition(
+        c => toBePersistedContentURLs.has(c.url),
+        Object.values(contents)
+      )
       const snContents = {}
       const snCreators = {}
       restContents
         .sort((a, b) => b.timestamp - a.timestamp)
         // Cache 1,000 contents at max and
         .slice(0, 1000)
-        // cache all bookmarks
-        .concat(bookmarks)
+        // Cache preferred contents
+        .concat(toBePersistedContents)
         .forEach(c => {
           snContents[c.url] = c
           if (creators[c.creator]) {

app/screens/bookmark-screen/bookmark-screen.tsx

@@ -11,10 +11,10 @@ import { Screen } from "../../components/screen"
 @inject("readerStore")
 @observer
 export class BookmarkScreen extends React.Component<Props> {
-  list = React.createRef<ContentList>()
-
   componentDidMount() {
-    this.list.current.props.onRefresh()
+    if (!this.props.readerStore.hasFetchedBookmarkList) {
+      this.props.readerStore.fetchBookmarkList()
+    }
   }
 
   private onBookmarkContentItem = (url: string) => {
@@ -34,7 +34,6 @@ export class BookmarkScreen extends React.Component<Props> {
       >
         <Header headerTx="BookmarkScreen.title" />
         <ContentList
-          ref={this.list}
           data={this.props.readerStore.bookmarkList}
           creators={this.props.readerStore.creators}
           hasFetched={this.props.readerStore.hasFetchedBookmarkList}

app/screens/likerland-oauth-screen/likerland-oauth-screen.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import {
+  Alert,
   View,
 } from "react-native"
 import { NavigationScreenProps } from "react-navigation"
@@ -9,13 +10,14 @@ import { inject } from "mobx-react"
 import { Style } from "./likerland-oauth-screen.style"
 
 import { LikeCoinWebView } from "../../components/likecoin-webview"
+import { LoadingLikeCoin } from "../../components/loading-likecoin"
 import { Screen } from "../../components/screen"
 
 import { color } from "../../theme"
 
 import { RootStore } from "../../models/root-store"
-import { LoadingLikeCoin } from "../../components/loading-likecoin"
 
+import { translate } from "../../i18n"
 import { COMMON_API_CONFIG } from "../../services/api/api-config"
 
 export interface LikerLandOAuthScreenProps extends NavigationScreenProps<{}> {
@@ -24,7 +26,7 @@ export interface LikerLandOAuthScreenProps extends NavigationScreenProps<{}> {
 
 @inject("rootStore")
 export class LikerLandOAuthScreen extends React.Component<LikerLandOAuthScreenProps, {}> {
-  _onNavigationStateChange = async (navState: WebViewNavigation) => {
+  private onNavigationStateChange = async (navState: WebViewNavigation) => {
     const { url } = navState
     const { rootStore } = this.props
     if (url.includes("/following")) {
@@ -37,12 +39,29 @@ export class LikerLandOAuthScreen extends React.Component<LikerLandOAuthScreenPr
       // Try to open the deferred deep link URL after sign in
       rootStore.openDeepLink()
     } else if (url.includes("/in/register")) {
-      await rootStore.userStore.logout()
-      rootStore.userStore.setIsSigningIn(false)
-      this.props.navigation.goBack()
+      this.handleError()
     }
   }
 
+  private handleError = async () => {
+    await this.props.rootStore.userStore.logout()
+    this.props.rootStore.userStore.setIsSigningIn(false)
+    this.props.navigation.goBack()
+  }
+
+  private onWebviewError = () => {
+    Alert.alert(
+      translate("signInScreen.error"),
+      translate("signInScreen.errorLikerLand"),
+      [
+        {
+          text: translate("common.back"),
+          onPress: this.handleError,
+        },
+      ]
+    )
+  }
+
   render () {
     const {
       signInURL,
@@ -58,15 +77,24 @@ export class LikerLandOAuthScreen extends React.Component<LikerLandOAuthScreenPr
             style={Style.Webview}
             sharedCookiesEnabled={true}
             source={{ uri: signInURL }}
-            onNavigationStateChange={this._onNavigationStateChange}
             // TODO: remove HACK after applicationNameForUserAgent type is fixed
             {...{ applicationNameForUserAgent: COMMON_API_CONFIG.userAgent }}
+            renderError={this.renderLoadingOverlay}
+            onNavigationStateChange={this.onNavigationStateChange}
+            onError={this.onWebviewError}
+            onHttpError={this.onWebviewError}
           />
-          <View style={Style.LoadingWrapper}>
-            <LoadingLikeCoin />
-          </View>
+          {this.renderLoadingOverlay()}
         </View>
       </Screen>
     )
   }
+
+  private renderLoadingOverlay = () => {
+    return (
+      <View style={Style.LoadingWrapper}>
+        <LoadingLikeCoin />
+      </View>
+    )
+  }
 }

app/services/api/likerland-api.ts

@@ -58,8 +58,11 @@ export class LikerLandAPI {
     if (!response.ok) {
       const problem = getGeneralApiProblem(response)
       if (problem) {
-        if (problem.kind === "forbidden") {
-          this.config.onUnauthenticated()
+        switch (problem.kind) {
+          case "forbidden":
+          case "not-found":
+            this.config.onUnauthenticated()
+            break
         }
         return problem
       }

ios/LikeCoinApp/LKCWebView.m

@@ -22,14 +22,7 @@ - (void)                  webView:(WKWebView *)webView
     if (self.sharedCookiesEnabled) {
       [webView.configuration.websiteDataStore.httpCookieStore getAllCookies: ^(NSArray<NSHTTPCookie *> *cookies) {
         for (NSHTTPCookie *cookie in cookies) {
-          NSLog(@"COOKIE SET %@ %@ %@ %@", cookie.domain, cookie.name, cookie.expiresDate, webView.URL.absoluteString);
-          NSLog(@"COOKIE CHECK %d %d %d", [cookie.domain isEqualToString:@"liker.land"], [cookie.name isEqualToString:@"__session"], [webView.URL.absoluteString containsString:@"/oauth/redirect"]);
-          if (
-            [cookie.domain isEqualToString:@"liker.land"] &&
-            [cookie.name isEqualToString:@"__session"] &&
-            [webView.URL.absoluteString containsString:@"/oauth/redirect"]
-          ) {
-            NSLog(@"COOKIE CHANGE %@ %@ %@ %@", cookie.domain, cookie.name, cookie.expiresDate, webView.URL.absoluteString);
+          if ([cookie.name isEqualToString:@"__session"]) {
             NSMutableDictionary *cookieProperties = [NSMutableDictionary dictionary];
             [cookieProperties setObject:cookie.name forKey:NSHTTPCookieName];
             [cookieProperties setObject:cookie.value forKey:NSHTTPCookieValue];
@@ -45,8 +38,6 @@ - (void)                  webView:(WKWebView *)webView
             [cookieProperties setObject:nextMonth forKey:NSHTTPCookieExpires];
             NSHTTPCookie *newCookie = [NSHTTPCookie cookieWithProperties:cookieProperties];
             [[NSHTTPCookieStorage sharedHTTPCookieStorage] setCookie:newCookie];
-          } else {
-            [[NSHTTPCookieStorage sharedHTTPCookieStorage] setCookie:cookie];
           }
         }
       }];