From f7d74a78ebe122ef0b623aa6db1bcc61b80153de Mon Sep 17 00:00:00 2001
From: Nimish Gupta <gnimish03@gmail.com>
Date: Mon, 5 Nov 2018 02:55:11 +0530
Subject: [PATCH] feat: added the pagination for user query (#198)

---
 client/shared/Utils.re                 |   8 ++
 client/src/Config.re                   |   2 +
 client/src/User.re                     |  93 ++++++++++++--
 client/src/components/UI_SketchList.re | 163 ++++++++++++++-----------
 4 files changed, 182 insertions(+), 84 deletions(-)

diff --git a/client/shared/Utils.re b/client/shared/Utils.re
index 569a4260..20048275 100644
--- a/client/shared/Utils.re
+++ b/client/shared/Utils.re
@@ -132,3 +132,11 @@ let joinWithComma =
       acc ++ ", " ++ str;
     }
   );
+
+module Object = {
+  [@bs.val]
+  external assign3: (Js.t({..}), Js.t({..}), Js.t({..})) => Js.t({..}) =
+    "Object.assign";
+  let merge = (o1: Js.t({..}), o2: Js.t({..})) =>
+    assign3(Js.Obj.empty(), o1, o2);
+};
diff --git a/client/src/Config.re b/client/src/Config.re
index 4f04fea0..ed1ba996 100644
--- a/client/src/Config.re
+++ b/client/src/Config.re
@@ -23,3 +23,5 @@ let graphqlEndpoint =
 let anonymousUserId = "anonymous";
 
 let cmTheme = "rtop";
+
+let sketchListLimit = 30;
diff --git a/client/src/User.re b/client/src/User.re
index 82c66213..4cfc383c 100644
--- a/client/src/User.re
+++ b/client/src/User.re
@@ -3,33 +3,74 @@ open Utils;
 
 module GetNotes = [%graphql
   {|
-    query getNotes($userName: String!) {
-      note(
-        where: {owner: {username: {_eq: $userName}}}
-        order_by: updated_at_desc
+  query getNotes($userName: String!, $limit: Int, $offset: Int) {
+    note(
+      where: {owner: {username: {_eq: $userName}}}
+      order_by: updated_at_desc
+      limit: $limit,
+      offset: $offset
       ) {
         id
         title
         date: updated_at
       }
     }
-  |}
+    |}
 ];
 
 module GetNotesComponent = ReasonApollo.CreateQuery(GetNotes);
 
-let component = ReasonReact.statelessComponent("User");
+let getNotesQuery = (~userName, ~offset=0, ()) =>
+  GetNotes.make(~userName, ~offset, ~limit=Config.sketchListLimit, ());
 
+external unsafeFromJson: Js.Json.t => GetNotes.t = "%identity";
+external unsafeToJson: GetNotes.t => Js.Json.t = "%identity";
+
+let updateQuery = (prev, next) => {
+  let prev = unsafeFromJson(prev);
+  let fetchMoreResult = ReasonApolloQuery.fetchMoreResultGet(next);
+
+  (
+    switch (fetchMoreResult) {
+    | None => prev
+    | Some(moreNotes) =>
+      let moreNotes = unsafeFromJson(moreNotes);
+      let newNotes = {
+        "note": Belt.Array.concat(prev##note, moreNotes##note),
+      };
+      Utils.Object.merge(prev, newNotes);
+    }
+  )
+  |> unsafeToJson;
+};
+
+let shouldFetchMore = (note, count) =>
+  Array.length(note) >= Config.sketchListLimit * count;
+
+type state = {count: int};
+type action =
+  | ChangeCount;
+
+let initialState = () => {count: 1};
+
+let reducer = (action, state) =>
+  switch (action) {
+  | ChangeCount => ReasonReact.Update({count: 1 + state.count})
+  };
+
+let component = ReasonReact.reducerComponent("User");
 let make = (~userName, _children) => {
   ...component,
-  render: _self => {
-    let notesQuery = GetNotes.make(~userName, ());
+  initialState,
+  reducer,
+  render: self => {
+    let notesQuery = getNotesQuery(~userName, ());
     <section className="Layout__center User">
       <h1> {j|$(userName)'s sketches|j}->str </h1>
       <GetNotesComponent
         fetchPolicy="network-only" variables=notesQuery##variables>
         ...{
-             ({result}) =>
+             ({result, fetchMore}) =>
                switch (result) {
                | Loading =>
                  <div style={ReactDOMRe.Style.make(~width="500px", ())}>
@@ -37,10 +78,36 @@ let make = (~userName, _children) => {
                  </div>
                | Error(error) => error##message->str
                | Data(response) =>
-                 <UI_SketchList
-                   sketches=response##note
-                   noSketches={<UI_NoSketches />}
-                 />
+                 let notesQuery =
+                   getNotesQuery(
+                     ~userName,
+                     ~offset=Array.length(response##note),
+                     (),
+                   );
+                 let fetchMore = _e =>
+                   Js.Promise.(
+                     fetchMore(
+                       ~variables=notesQuery##variables,
+                       ~updateQuery,
+                       (),
+                     )
+                     |> then_(_ => {
+                          self.send(ChangeCount);
+                          resolve();
+                        })
+                   )
+                   |> ignore;
+
+                 shouldFetchMore(response##note, self.state.count) ?
+                   <UI_SketchList
+                     sketches=response##note
+                     noSketches={<UI_NoSketches />}
+                     fetchMore
+                   /> :
+                   <UI_SketchList
+                     sketches=response##note
+                     noSketches={<UI_NoSketches />}
+                   />;
                }
            }
       </GetNotesComponent>
diff --git a/client/src/components/UI_SketchList.re b/client/src/components/UI_SketchList.re
index a4527b63..35fbdb66 100644
--- a/client/src/components/UI_SketchList.re
+++ b/client/src/components/UI_SketchList.re
@@ -15,85 +15,106 @@ module DeleteNoteComponent = ReasonApollo.CreateMutation(DeleteNote);
 let component = ReasonReact.statelessComponent("UI_SketchList");
 
 let make =
-    (~sketches, ~className=?, ~noSketches="No sketches"->str, _children) => {
+    (
+      ~sketches,
+      ~className=?,
+      ~noSketches="No sketches"->str,
+      ~fetchMore=?,
+      _children,
+    ) => {
   ...component,
   render: _self =>
     switch (sketches) {
     | [||] => <div className={Cn.unwrap(className)}> noSketches </div>
     | sketches =>
-      <ul className={Cn.make(["UI_SketchList", Cn.unwrap(className)])}>
-        ...sketches
-           ->(
-               Belt.Array.mapU((. sketch) =>
-                 <li className="UI_SketchList__sketch">
-                   <Router.Link
-                     className="UI_SketchList__sketch--link"
-                     route={Route.Note({noteId: sketch##id, data: None})}>
-                     <span className="UI_SketchList__sketch--title">
-                       {
-                         switch (sketch##title) {
-                         | None
-                         | Some("") => "untitled sketch"->str
-                         | Some(title) => title->str
+      <>
+        <ul className={Cn.make(["UI_SketchList", Cn.unwrap(className)])}>
+          ...sketches
+             ->(
+                 Belt.Array.mapU((. sketch) =>
+                   <li className="UI_SketchList__sketch">
+                     <Router.Link
+                       className="UI_SketchList__sketch--link"
+                       route={Route.Note({noteId: sketch##id, data: None})}>
+                       <span className="UI_SketchList__sketch--title">
+                         {
+                           switch (sketch##title) {
+                           | None
+                           | Some("") => "untitled sketch"->str
+                           | Some(title) => title->str
+                           }
                          }
-                       }
-                     </span>
-                   </Router.Link>
-                   <div className="UI_SketchList__sketch--lastEdited">
-                     "last edited"->str
-                     <UI_DateTime
-                       date=sketch##date
-                       className="UI_SketchList__sketch--time"
-                     />
-                   </div>
-                   <DeleteNoteComponent>
-                     ...(
-                          (mutation, _) =>
-                            <button
-                              className="btn UI_SketchList__sketch--delete"
-                              onClick={
-                                _event => {
-                                  let continue =
-                                    Webapi.Dom.(
-                                      Window.confirm(
-                                        "Are you sure you want to delete this sketch?",
-                                        window,
-                                      )
-                                    );
+                       </span>
+                     </Router.Link>
+                     <div className="UI_SketchList__sketch--lastEdited">
+                       "last edited"->str
+                       <UI_DateTime
+                         date=sketch##date
+                         className="UI_SketchList__sketch--time"
+                       />
+                     </div>
+                     <DeleteNoteComponent>
+                       ...(
+                            (mutation, _) =>
+                              <button
+                                className="btn UI_SketchList__sketch--delete"
+                                onClick={
+                                  _event => {
+                                    let continue =
+                                      Webapi.Dom.(
+                                        Window.confirm(
+                                          "Are you sure you want to delete this sketch?",
+                                          window,
+                                        )
+                                      );
 
-                                  if (continue) {
-                                    let deleteNoteQuery =
-                                      DeleteNote.make(~noteId=sketch##id, ());
+                                    if (continue) {
+                                      let deleteNoteQuery =
+                                        DeleteNote.make(
+                                          ~noteId=sketch##id,
+                                          (),
+                                        );
 
-                                    Js.Promise.(
-                                      mutation(
-                                        ~variables=deleteNoteQuery##variables,
-                                        ~refetchQueries=[|"getNotes"|],
-                                        (),
-                                      )
-                                      |> then_(_response => {
-                                           Notify.info("Note was deleted.");
-                                           resolve();
-                                         })
-                                      |> catch(err => {
-                                           Notify.error(
-                                             "Note failed to delete.",
-                                           );
-                                           logError(err)->resolve;
-                                         })
-                                      |> ignore
-                                    );
-                                  };
-                                }
-                              }>
-                              "Delete"->str
-                            </button>
-                        )
-                   </DeleteNoteComponent>
-                 </li>
+                                      Js.Promise.(
+                                        mutation(
+                                          ~variables=
+                                            deleteNoteQuery##variables,
+                                          ~refetchQueries=[|"getNotes"|],
+                                          (),
+                                        )
+                                        |> then_(_response => {
+                                             Notify.info("Note was deleted.");
+                                             resolve();
+                                           })
+                                        |> catch(err => {
+                                             Notify.error(
+                                               "Note failed to delete.",
+                                             );
+                                             logError(err)->resolve;
+                                           })
+                                        |> ignore
+                                      );
+                                    };
+                                  }
+                                }>
+                                "Delete"->str
+                              </button>
+                          )
+                     </DeleteNoteComponent>
+                   </li>
+                 )
                )
-             )
-      </ul>
+        </ul>
+        {
+          switch (fetchMore) {
+          | None => ReasonReact.null
+          | Some(fetchMore) =>
+            <button className="btn btn-primary" onClick=fetchMore>
+              "Load more sketches"->str
+            </button>
+          }
+        }
+      </>
     },
 };
 
@@ -162,4 +183,4 @@ module Placeholder = {
         <circle cx="12" cy="177" r="12" />
       </ReactContentLoader>,
   };
-};
+};
\ No newline at end of file