ybbond-reason

commit 19170154e45a567d615fbb3b6c959d866cd25307
parent 376e55340df7c6503b5e0a4819f4a3575ecb7da7
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Tue,  3 Mar 2020 04:10:56 +0700

feature(Blog) => add Blog path and now it is accessible while WIP

Diffstat:
M
src/App.re
 | 
3
++-
A
src/BlogContent.re
 | 
23
+++++++++++++++++++++++
M
src/BlogGistData.re
 | 
15
+++++----------
A
src/BlogScene.re
 | 
49
+++++++++++++++++++++++++++++++++++++++++++++++++
M
src/components/Header.re
 | 
1
+

diff --git a/src/App.re b/src/App.re
@@ -32,12 +32,13 @@ module Styles = {
 let make = () => {
   let url = ReasonReact.Router.useUrl();
 
-  Js.log("Written with ReasonReact");
+  Js.log("Written with ReasonReact!");
 
   let content = () =>
     switch (url.path) {
     | [] => <CurViScene />
     | ["uses"] => <UsesScene />
+    | ["blog"] => <BlogScene />
     | ["poem"] =>
       ReasonReact.Router.replace("poems");
       <PoemsScene />;
diff --git a/src/BlogContent.re b/src/BlogContent.re
@@ -0,0 +1,23 @@
+type state = {blog_content: string};
+
+type action =
+  | Loaded(string);
+
+[@react.component]
+let make = (~link: string) => {
+  let (state, dispatch) =
+    React.useReducer(
+      (_state, action) =>
+        switch (action) {
+        | Loaded(data) => {blog_content: data}
+        },
+      {blog_content: "Mengambil data konten blog..."},
+    );
+
+  React.useEffect0(() => {
+    BlogGistData.fetchBlog(data => dispatch(Loaded(data)), link) |> ignore;
+    None;
+  });
+
+  <pre> {ReasonReact.string(state.blog_content)} </pre>;
+};
diff --git a/src/BlogGistData.re b/src/BlogGistData.re
@@ -135,14 +135,9 @@ let fetchGist = callback =>
 let fetchBlog = (callback, link) =>
   Js.Promise.(
     Fetch.fetch(link)
-    |> then_(Fetch.Response.json)
-    |> then_(blog =>
-         Json.stringify(blog)
-         |> (
-           content => {
-             callback(content);
-             resolve();
-           }
-         )
-       )
+    |> then_(Fetch.Response.text)
+    |> then_(blog => {
+         callback(blog);
+         resolve();
+       })
   );
diff --git a/src/BlogScene.re b/src/BlogScene.re
@@ -0,0 +1,49 @@
+open BlogGistData;
+
+type state = {gist_content: option(BlogGistData.gist_return)};
+
+type action =
+  | Loaded(BlogGistData.gist_return);
+
+[@react.component]
+let make = () => {
+  let (state, dispatch) =
+    React.useReducer(
+      (_state, action) =>
+        switch (action) {
+        | Loaded(data) => {gist_content: Some(data)}
+        },
+      {gist_content: None},
+    );
+
+  React.useEffect0(() => {
+    BlogGistData.fetchGist(data => dispatch(Loaded(data))) |> ignore;
+    None;
+  });
+
+  <React.Fragment>
+    <h3> {ReasonReact.string("Blog")} </h3>
+    {switch (state.gist_content) {
+     | Some(story) =>
+       let comp =
+         Array.mapi(
+           (key, item: gist_type) => {
+             let blogContent = Js.Dict.get(item.files, "_blog.md");
+
+             switch (blogContent) {
+             | Some(value) =>
+               <div key={string_of_int(key)}>
+                 <h1> {ReasonReact.string("# " ++ item.description)} </h1>
+                 <date> {ReasonReact.string(item.created_at)} </date>
+                 <BlogContent link={value.raw_url} />
+               </div>
+             | None => <div />
+             };
+           },
+           story,
+         );
+       <div> {ReasonReact.array(comp)} </div>;
+     | None => React.string("Mengambil data blog...")
+     }}
+  </React.Fragment>;
+};
diff --git a/src/components/Header.re b/src/components/Header.re
@@ -15,6 +15,7 @@ let content: array(contentType) = [|
   {title: "CV", path: "/"},
   {title: "Poems-Verses", path: "poems"},
   {title: "Uses", path: "uses"},
+  {title: "Blog (WIP)", path: "blog"},
 |];
 
 [@react.component]