support new voting api in ui

web/app/common/api.ts

@@ -52,7 +52,10 @@ export const logOut = (): Promise<void> =>
 export const getConfig = (): Promise<Config> => fetcher.get(`/config`);
 
 export const getPostComments = (sort: Sorting): Promise<Tree> =>
-  fetcher.get(`/find?site=${siteId}&url=${url}&sort=${sort}&format=tree`);
+  fetcher.get({
+    url: `/find?site=${siteId}&url=${url}&sort=${sort}&format=tree`,
+    withCredentials: true,
+  });
 
 export const getLastComments = (siteId: string, max: number): Promise<Comment[]> =>
   fetcher.get(`/last/${max}?site=${siteId}`);
@@ -63,7 +66,8 @@ export const getCommentsCount = (siteId: string, urls: string[]): Promise<{ url:
     body: urls,
   });
 
-export const getComment = (id: Comment['id']): Promise<Comment> => fetcher.get(`/id/${id}?url=${url}`);
+export const getComment = (id: Comment['id']): Promise<Comment> =>
+  fetcher.get({ url: `/id/${id}?url=${url}`, withCredentials: true });
 
 export const getUserComments = (
   userId: User['id'],
@@ -71,7 +75,11 @@ export const getUserComments = (
 ): Promise<{
   comments: Comment[];
   count: number;
-}> => fetcher.get(`/comments?user=${userId}&limit=${limit}`);
+}> =>
+  fetcher.get({
+    url: `/comments?user=${userId}&limit=${limit}`,
+    withCredentials: true,
+  });
 
 export const putCommentVote = ({ id, value }: { id: Comment['id']; value: number }): Promise<void> =>
   fetcher.put({

web/app/common/types.ts

@@ -44,8 +44,12 @@ export interface Comment {
   locator: Locator;
   /** comment score, read only */
   score: number;
-  /** comment votes, read only */
-  votes: { [key: string]: boolean };
+  /**
+   * vote delta,
+   * if user hasn't voted delta will be 0,
+   * -1/+1 for downvote/upvote
+   */
+  vote: number;
   /** comment controversy, read only */
   controversy?: number;
   /** pointer to have empty default in json response */

web/app/components/comment/comment.test.tsx

@@ -12,7 +12,7 @@ const DefaultProps: Partial<Props> = {
   view: 'main',
   data: {
     text: 'test comment',
-    votes: {},
+    vote: 0,
     user: {
       id: 'someone',
       picture: 'somepicture-url',
@@ -121,7 +121,7 @@ describe('<Comment />', () => {
       const element = (
         <Comment
           {...DefaultProps as Props}
-          data={{ ...DefaultProps.data, votes: { [DefaultProps.user!.id]: true } } as Props['data']}
+          data={{ ...DefaultProps.data, vote: +1 } as Props['data']}
           putCommentVote={voteSpy}
         />
       );
@@ -146,7 +146,7 @@ describe('<Comment />', () => {
       const element = (
         <Comment
           {...DefaultProps as Props}
-          data={{ ...DefaultProps.data, votes: { [DefaultProps.user!.id]: false } } as Props['data']}
+          data={{ ...DefaultProps.data, vote: -1 } as Props['data']}
           putCommentVote={voteSpy}
         />
       );

web/app/components/comment/comment.tsx

@@ -104,18 +104,8 @@ export class Comment extends Component<Props, State> {
   }
 
   updateState(props: Props) {
-    let scoreDelta = 0;
-    if (props.user) {
-      if (props.data.votes[props.user.id] === true) {
-        ++scoreDelta;
-      }
-      if (props.data.votes[props.user.id] === false) {
-        --scoreDelta;
-      }
-    }
-
     this.setState({
-      scoreDelta,
+      scoreDelta: props.data.vote,
       cachedScore: props.data.score,
     });
 

web/app/components/root/root.tsx

@@ -113,6 +113,17 @@ export class Root extends Component<Props, State> {
     window.addEventListener('message', this.onMessage.bind(this));
   }
 
+  logIn = async (p: AuthProvider): Promise<User | null> => {
+    const user = await this.props.logIn(p);
+    await this.props.fetchComments(this.props.sort);
+    return user;
+  };
+
+  logOut = async (): Promise<void> => {
+    await this.props.logOut();
+    await this.props.fetchComments(this.props.sort);
+  };
+
   checkUrlHash(
     e: Event & {
       newURL?: string;
@@ -202,8 +213,8 @@ export class Root extends Component<Props, State> {
             providers={StaticStore.config.auth_providers}
             isCommentsDisabled={isCommentsDisabled}
             postInfo={this.props.info}
-            onSignIn={this.props.logIn}
-            onSignOut={this.props.logOut}
+            onSignIn={this.logIn}
+            onSignOut={this.logOut}
             onBlockedUsersShow={this.onBlockedUsersShow}
             onBlockedUsersHide={this.onBlockedUsersHide}
             onCommentsEnable={this.props.enableComments}