Merge pull request #300 from Reeywhaar/vote

support new voting api in ui

README.md

@@ -507,7 +507,7 @@ type Comment struct {
     User      User            `json:"user"`    // user info, read only
     Locator   Locator         `json:"locator"` // post locator
     Score     int             `json:"score"`   // comment score, read only
-    Votes     map[string]bool `json:"votes"`   // comment votes, read only
+    Vote      int             `json:"vote"`    // vote for the current user, -1/1/0.
     Controversy float64       `json:"controversy,omitempty"` // comment controversy, read only
     Timestamp time.Time       `json:"time"`    // time stamp, read only
     Edit      *Edit           `json:"edit,omitempty" bson:"edit,omitempty"` // pointer to have empty default in json response
@@ -609,11 +609,11 @@ Sort can be `time`, `active` or `score`. Supported sort order with prefix -/+, i
 
 ### Images management
 
-* `GET /api/v1/picture/{user}/{id}` - load stored image 
+* `GET /api/v1/picture/{user}/{id}` - load stored image
 * `POST /api/v1/picture` - upload and store image, uses post form with `FormFile("file")`. returns `{"id": user/imgid}` _auth required_
 
 _returned id should be appended to load image url on caller side_
-  
+
 ### Admin
 
 * `DELETE /api/v1/admin/comment/{id}?site=site-id&url=post-url` - delete comment by `id`.

web/.babelrc

@@ -7,7 +7,7 @@
           "browsers": ["> 1%", "android >= 4.4.4", "ios >= 9", "IE >= 11"]
         },
         "useBuiltIns": "usage",
-				"corejs": 3
+        "corejs": 3
       }
     ],
     [

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}

web/webpack.config.js

@@ -139,6 +139,7 @@ module.exports = () => ({
   },
   stats: {
     children: false,
+    entrypoints: false,
   },
   devServer: {
     host: 'localhost',
@@ -157,5 +158,9 @@ module.exports = () => ({
         changeOrigin: true,
       },
     },
+    stats: {
+      children: false,
+      entrypoints: false,
+    },
   },
 });