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 | + |
5 files changed, 80 insertions(+), 11 deletions(-)
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]