App Finished

gabobaxx · Mar 30, 2021 · 9e9b127 · 9e9b127
commit 9e9b127
Show file tree

Hide file tree

Showing 11 changed files with 5,363 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+build/
+
diff --git a/package.json b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "react-open-library",
+  "version": "1.0.0",
+  "description": "List of books using react.",
+  "main": "index.js",
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "build": "webpack -p",
+    "dev": "webpack-dev-server -d --open -w"
+  },
+  "dependencies": {
+    "@babel/core": "7.1.6",
+    "@babel/polyfill": "7.0.0",
+    "@babel/preset-env": "7.1.6",
+    "@babel/preset-react": "7.0.0",
+    "babel-loader": "8.0.4",
+    "html-webpack-plugin": "3.2.0",
+    "react": "16.6.3",
+    "react-dom": "16.6.3",
+    "timeago.js": "^4.0.2",
+    "webpack": "4.26.0",
+    "webpack-cli": "3.1.2",
+    "webpack-dev-server": "3.1.10"
+  }
+}
diff --git a/src/app/App.jsx b/src/app/App.jsx
@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import * as timeago from 'timeago.js';
+// Components
+import Heading from './Heading.jsx';
+import Row from './Row.jsx';
+
+class Headings extends Component {
+  render() {
+    return (
+      <thead>
+        <tr>
+          {this.props.headings.map((heading, i) => {
+            return <Heading key={i} heading={heading} />;
+          })}
+        </tr>
+      </thead>
+    );
+  }
+}
+class Rows extends Component {
+  render() {
+    return (
+      <tbody>
+        {this.props.data.map((row, i) => {
+          return <Row key={i} change={row} />;
+        })}
+      </tbody>
+    );
+  }
+}
+class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      data: [],
+    };
+  }
+
+  componentDidMount() {
+    setInterval(async () => {
+      const uri = 'https://openlibrary.org/recentchanges.json?limit=10';
+      const res = await fetch(uri);
+      const data = await res.json();
+      const dataFormated = this.formatter(data);
+      this.setState({ data: dataFormated });
+    }, 1000);
+  }
+
+  formatter(data) {
+    return data.map((data, i) => {
+      return {
+        id: i,
+        when: timeago.format(data.timestamp),
+        who: data.author.key,
+        description: data.comment,
+      };
+    });
+  }
+
+  render() {
+    return (
+      <div className="container p-4">
+        <h1>{this.props.title}</h1>
+        <table className="table table-bordered">
+          <Headings headings={this.props.headings} />
+          <Rows data={this.state.data} />
+        </table>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/app/Heading.jsx b/src/app/Heading.jsx
@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+
+class Heading extends Component {
+  render() {
+    return <th>{this.props.heading}</th>;
+  }
+}
+
+export default Heading;
diff --git a/src/app/Row.jsx b/src/app/Row.jsx
@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+
+class Row extends Component {
+  render() {
+    return (
+      <tr>
+        <td>{this.props.change.when}</td>
+        <td>{this.props.change.who}</td>
+        <td>{this.props.change.description}</td>
+      </tr>
+    );
+  }
+}
+
+export default Row;
diff --git a/src/app/data.json b/src/app/data.json
@@ -0,0 +1,17 @@
+[
+  {
+    "when": "2 minutos ago",
+    "who": "Yosmer Garcia",
+    "description": "Created new account"
+  },
+  {
+    "when": "60 minutos ago",
+    "who": "Gabriel Bencomo",
+    "description": "Created new account"
+  },
+  {
+    "when": "10 minutos ago",
+    "who": "Jon Hollywood",
+    "description": "Created new account"
+  }
+]
diff --git a/src/app/index.jsx b/src/app/index.jsx
@@ -0,0 +1,14 @@
+import '@babel/polyfill';
+import React from 'react';
+import ReactDOM from 'react-dom';
+// Components
+import App from './App.jsx';
+// Test Data
+import data from './data.json';
+
+const headings = ['When', 'Who', 'Description'];
+
+ReactDOM.render(
+  <App data={data} title="React Open Library" headings={headings} />,
+  document.getElementById('root')
+);
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Open Library</title>
+    <!-- Bootstrap 5 -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,29 @@
+const path = require('path');
+// Config
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
+  template: './src/index.html',
+  filename: 'index.html',
+  inject: 'body',
+});
+
+module.exports = {
+  entry: './src/app/index.jsx',
+  output: {
+    path: path.join(__dirname, 'build'),
+    filename: 'bundle.js',
+  },
+  devServer: {
+    port: 4000,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  plugins: [HtmlWebpackPluginConfig],
+};