add files

hysan · Jul 13, 2017 · 010ea79 · 010ea79
1 parent 48e3271
commit 010ea79
Show file tree

Hide file tree

Showing 13 changed files with 250 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "immersive-assessment-react-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "semantic-ui-css": "^2.2.10"
+  },
+  "devDependencies": {
+    "react-scripts": "0.9.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
diff --git a/react-challenge.gif b/react-challenge.gif
diff --git a/src/components/AccountContainer.js b/src/components/AccountContainer.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react'
+import TransactionsList from './TransactionsList'
+import Search from './Search'
+
+class AccountContainer extends Component {
+
+  constructor() {
+    super()
+
+    // we have provided this default state for you,
+    // use this to get the functionality working
+    // and then replace the default transactions with a call to the API
+
+    this.state = {
+      searchTerm: '',
+      transactions: [
+        {
+          id: 1,
+          posted_at: "2017-02-28 11:00:00",
+          description: "Leather Pants, Gap co.",
+          category: "Fashion",
+          amount: -20000
+        },
+        {
+          id: 2,
+          posted_at: "2017-02-29 10:30:00",
+          description: "Paycheck from Bob's Burgers",
+          category: "Income",
+          amount: 100000
+        },
+        {
+          id: 3,
+          posted_at: "2017-05-24 10:53:00",
+          description: "'Pair Programming Illuminated' by Laurie Williams and Robert Kessler",
+          category: "Book",
+          amount: 1498
+        },
+        {
+          id: 4,
+          posted_at: "2017-05-24 08:52:00",
+          description: "Medium Iced Cold Brew, Gregory's Coffee",
+          category: "Coffee",
+          amount: 365
+        }
+      ]
+    }
+  }
+
+  handleChange(event) {
+    // your code here
+  }
+
+  render() {
+
+    return (
+      <div>
+        <Search searchTerm={this.state.searchTerm} handleChange={"...add code here..."} />
+        <TransactionsList transactions={this.state.transactions} searchTerm={this.state.searchTerm} />
+      </div>
+    )
+  }
+}
+
+export default AccountContainer
diff --git a/src/components/App.js b/src/components/App.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import AccountContainer from './AccountContainer'
+
+import '../stylesheets/App.css'
+
+class App extends Component {
+  render() {
+    return (
+      <div className="ui raised segment">
+        <div className="ui segment violet inverted">
+          <h2>The Royal Bank of Flatiron</h2>
+        </div>
+
+        <AccountContainer />
+
+      </div>
+    )
+  }
+}
+
+export default App
diff --git a/src/components/Search.js b/src/components/Search.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Search = () => {
+  return (
+    <div className="ui huge fluid icon input">
+      <input
+        type="text"
+        placeholder={"Search your Recent Transactions"}
+      />
+      <i className="circular search link icon"></i>
+    </div>
+  )
+}
+
+export default Search
diff --git a/src/components/Transaction.js b/src/components/Transaction.js
@@ -0,0 +1,14 @@
+import React from 'react'
+
+const Transaction = () => {
+  return (
+    <tr>
+      <td>{"...your code here"}</td>
+      <td>{"...your code here"}</td>
+      <td>{"...your code here"}</td>
+      <td>{"...your code here"}</td>
+    </tr>
+  )
+}
+
+export default Transaction
diff --git a/src/components/TransactionsList.js b/src/components/TransactionsList.js
@@ -0,0 +1,38 @@
+import React from 'react'
+
+const TransactionsList = () => {
+
+  return (
+    <table className="ui celled striped padded table">
+      <tbody>
+        <tr>
+          <th>
+            <h3 className="ui center aligned header">
+              Posted At
+            </h3>
+          </th>
+          <th>
+            <h3 className="ui center aligned header">
+              Description
+            </h3>
+          </th>
+          <th>
+            <h3 className="ui center aligned header">
+              Category
+            </h3>
+          </th>
+          <th>
+            <h3 className="ui center aligned header">
+              Amount
+            </h3>
+          </th>
+        </tr>
+
+        {"... your code here..."}
+
+      </tbody>
+    </table>
+  )
+}
+
+export default TransactionsList
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App';
+import './stylesheets/index.css';
+import 'semantic-ui-css/semantic.min.css'
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);
diff --git a/src/stylesheets/App.css b/src/stylesheets/App.css
@@ -0,0 +1,15 @@
+* {
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.App {
+  text-align: center;
+}
+
+
+.App-header {
+  background-color: #222;
+  padding: 20px;
+  color: white;
+}
diff --git a/src/stylesheets/index.css b/src/stylesheets/index.css
@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}