Añadido: Changelog

5 files changed, 104 insertions, 15 deletions

diff --git a/src/App.js b/src/App.js
index 413e957..94b3156 100644
--- a/src/App.js
+++ b/src/App.js
@@ -19,6 +19,7 @@ import Board from "./Board";
 import NotFound from "./NotFound";
 import ThreadList from "./ThreadList";
 import FAQ from "./FAQ";
+import ChangeLogPage from "./ChangelogPage";
 
 class App extends Component {
   constructor() {
@@ -179,7 +180,9 @@ class App extends Component {
               path="/list/:dir"
               nightMode={nightMode}
             />
+            <ChangeLogPage path="/changelog" nightMode={nightMode} />
             <FAQ path="/faq" nightMode={nightMode} />
+
             <NotFound default />
           </Router>
         </Container>
diff --git a/src/Changelog.js b/src/Changelog.js
new file mode 100644
index 0000000..62f36f7
--- /dev/null
+++ b/src/Changelog.js
@@ -0,0 +1,20 @@
+export const Changelog = [
+  {
+    timestamp: 1569607703,
+    list: [
+      { icon: "add", desc: "Implementación de changelog" },
+      { icon: "add", desc: "Eliminación de posts e hilos" },
+      { icon: "add", desc: "Sonido de notificación" },
+      { icon: "bug", desc: "Pequeños arreglos en nightmode" },
+      { icon: "bug", desc: "Fix: avatares faltantes" }
+    ]
+  },
+  {
+    timestamp: 1569540827,
+    list: [
+      { icon: "add", desc: "Página de FAQ" },
+      { icon: "add", desc: "Licencia" },
+      { icon: "add", desc: "Embed de audio y video" }
+    ]
+  }
+];
diff --git a/src/ChangelogPage.js b/src/ChangelogPage.js
new file mode 100644
index 0000000..6927ef8
--- /dev/null
+++ b/src/ChangelogPage.js
@@ -0,0 +1,37 @@
+import React from "react";
+import { Segment, Header, List } from "semantic-ui-react";
+import { Changelog } from "./Changelog";
+import Moment from "react-moment";
+import "moment/locale/es";
+
+const ChangeLogPage = ({ nightMode }) => {
+  return (
+    <Segment inverted={nightMode}>
+      <Header>Changelog</Header>
+      <List inverted={nightMode}>
+        {Changelog.map(date => {
+          return (
+            <List.Item key={date.timestamp}>
+              <List.Header>
+                <Moment unix date={date.timestamp} format="DD/MM/YY " />
+                <small>
+                  <Moment unix date={date.timestamp} fromNow />
+                </small>
+              </List.Header>
+              <List.List>
+                {date.list.map((change, i) => (
+                  <List.Item key={i}>
+                    <List.Icon name={change.icon}></List.Icon>
+                    <List.Content>{change.desc}</List.Content>
+                  </List.Item>
+                ))}
+              </List.List>
+            </List.Item>
+          );
+        })}
+      </List>
+    </Segment>
+  );
+};
+
+export default ChangeLogPage;
diff --git a/src/Home.js b/src/Home.js
index 5685d3b..858ce0f 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -1,9 +1,9 @@
 import React, { Component } from "react";
-import { List, Header, Icon, Loader, Grid, Image } from "semantic-ui-react";
+import { Link } from "@reach/router";
+import { List, Header, Loader, Grid, Image } from "semantic-ui-react";
 import Moment from "react-moment";
 import "moment/locale/es";
-
-import { Link } from "@reach/router";
+import { Changelog } from "./Changelog";
 
 class Home extends Component {
   constructor() {
@@ -201,22 +201,51 @@ class Home extends Component {
               </List>
             </Grid.Column>
           </Grid.Row>
-          <Grid.Row columns={1}>
+          <Grid.Row columns={2}>
+            <Grid.Column>
+              <Header as="h4" inverted={nightMode}>
+                Changelog
+              </Header>
+              <List inverted={nightMode}>
+                <List.Item>
+                  <Moment fromNow unix date={Changelog[0].timestamp} />
+                  <List.List>
+                    {Changelog[0].list.map((c, e) => (
+                      <List.Item key={e}>
+                        <List.Icon name={c.icon} />
+                        <List.Content>{c.desc}</List.Content>
+                      </List.Item>
+                    ))}
+                  </List.List>
+                </List.Item>
+              </List>
+              <Link to="/changelog">Ver más</Link>
+            </Grid.Column>
             <Grid.Column>
               <Header as="h4" inverted={nightMode}>
                 Blotter
               </Header>
               <List divided inverted={nightMode}>
-                {latestNews.map(n => (
-                  <List.Item key={n.timestamp}>
-                    <List.Content>
-                      <div dangerouslySetInnerHTML={{ __html: n.message }} />
-                      <small>
-                        <Moment fromNow unix locale="es" date={n.timestamp} />
-                      </small>
-                    </List.Content>
-                  </List.Item>
-                ))}
+                {latestNews.map(
+                  (n, i) =>
+                    i < 3 && (
+                      <List.Item key={n.timestamp}>
+                        <List.Content>
+                          <div
+                            dangerouslySetInnerHTML={{ __html: n.message }}
+                          />
+                          <small>
+                            <Moment
+                              fromNow
+                              unix
+                              locale="es"
+                              date={n.timestamp}
+                            />
+                          </small>
+                        </List.Content>
+                      </List.Item>
+                    )
+                )}
               </List>
             </Grid.Column>
           </Grid.Row>
diff --git a/src/Post.js b/src/Post.js
index a4c8a4a..18d81e0 100644
--- a/src/Post.js
+++ b/src/Post.js
@@ -99,7 +99,7 @@ class Post extends Component {
         return response.json();
       })
       .then(resource => {
-        console.log(resource);
+        // TODO: Reportar resultado
       });
   }