index.jsx 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. class Page extends React.Component {
  4. constructor(props) {
  5. super(props);
  6. this.state = {
  7. loaded: false,
  8. modified: null,
  9. rendered: null,
  10. slug: null,
  11. source: null,
  12. title: null,
  13. };
  14. }
  15. componentDidMount() {
  16. if (!window.location.hash) {
  17. window.location.hash = "#index";
  18. }
  19. const loc = window.location.hash.substring(1);
  20. fetch(`/p/${loc}`, {headers: {'Accept': 'application/json'}})
  21. .then(res => res.json())
  22. .then(
  23. (res) => {
  24. console.log(res);
  25. this.setState({
  26. loaded: true,
  27. modified: res.modified,
  28. rendered: res.rendered,
  29. slug: res.slug,
  30. source: res.source,
  31. title: res.title,
  32. });
  33. },
  34. (error) => {
  35. this.setState({
  36. rendered: "not found",
  37. });
  38. }
  39. );
  40. }
  41. render() {
  42. if (this.state.loaded) {
  43. return <div className="page" dangerouslySetInnerHTML={{__html: this.state.rendered}} />;
  44. } else {
  45. return <div className="page">Loading...</div>;
  46. }
  47. }
  48. }
  49. const Sidebar = () => {
  50. return (
  51. <div className="sidebar"><img src="/static/baba-yaga-sidebar-plain.svg"/></div>
  52. );
  53. };
  54. const Board = () => {
  55. return (
  56. <div className="board">
  57. <Sidebar/>
  58. <Page/>
  59. </div>
  60. );
  61. };
  62. ReactDOM.render(<Board/>, document.getElementById('root'));