From 3246b662140fca74bb1fcf4befd25b1648220861 Mon Sep 17 00:00:00 2001
From: Vyrtsev Mikhail <reeywhaar@gmail.com>
Date: Wed, 10 Apr 2019 02:24:19 +0300
Subject: [PATCH] support new voting api in ui

---
 web/app/common/api.ts                       | 14 +++++++++++---
 web/app/common/types.ts                     |  8 ++++++--
 web/app/components/comment/comment.test.tsx |  6 +++---
 web/app/components/comment/comment.tsx      | 12 +-----------
 web/app/components/root/root.tsx            | 15 +++++++++++++--
 5 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/web/app/common/api.ts b/web/app/common/api.ts
index ed6b9c6f..b5948148 100644
--- a/web/app/common/api.ts
+++ b/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({
diff --git a/web/app/common/types.ts b/web/app/common/types.ts
index c14d8146..d1843789 100644
--- a/web/app/common/types.ts
+++ b/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 */
diff --git a/web/app/components/comment/comment.test.tsx b/web/app/components/comment/comment.test.tsx
index 254bb4ef..cc8a947e 100644
--- a/web/app/components/comment/comment.test.tsx
+++ b/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}
         />
       );
diff --git a/web/app/components/comment/comment.tsx b/web/app/components/comment/comment.tsx
index 5fd98b97..3062f922 100644
--- a/web/app/components/comment/comment.tsx
+++ b/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,
     });
 
diff --git a/web/app/components/root/root.tsx b/web/app/components/root/root.tsx
index 345f708a..c638be64 100644
--- a/web/app/components/root/root.tsx
+++ b/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}