ui created

CodHeK · Dec 13, 2018 · ab5af81 · ab5af81
1 parent ed668fe
commit ab5af81
Show file tree

Hide file tree

Showing 19 changed files with 13,433 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "search",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^3.6.2",
+    "@material-ui/icons": "^3.0.1",
+    "axios": "^0.18.0",
+    "cheerio": "latest",
+    "express": "latest",
+    "firebase": "^5.4.0",
+    "jquery": "^3.3.1",
+    "react": "^16.2.0",
+    "react-bootstrap": "^0.32.1",
+    "react-dom": "^16.2.0",
+    "react-loader": "^2.4.5",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "1.1.1",
+    "request": "latest"
+  },
+  "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,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags 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>pysoc.js</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <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` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,28 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.App-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.App-title {
+  font-size: 1.5em;
+}
+
+.App-intro {
+  font-size: large;
+}
+
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,86 @@
+import React, { Component } from 'react';
+import { DB_CONFIG } from './Config/config';
+import firebase from 'firebase/app';
+import 'firebase/database';
+import gsoc_logo from './imgs/gsoc.png';
+import OrgCard from './OrgCard';
+import Loader from 'react-loader';
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.app = firebase.initializeApp(DB_CONFIG);
+    this.database = this.app.database().ref().child('orgs');
+    this.state = {
+      keyword: '',
+      orgs_data: [],
+      filtered: [],
+      loaded: false,
+    }
+  }
+
+  componentDidMount() {
+    let { orgs_data } = this.state;
+    let temp = [];
+    this.database.on('child_added', snap => {
+      let data = {
+        id: snap.key,
+        year: snap.val().year,
+        org_name: snap.val().org_name,
+        org_def: snap.val().org_def,
+        org_link: snap.val().org_link,
+        org_tech_list: snap.val().org_tech_list,
+        org_selections: snap.val().org_selections
+      }
+      if(data.org_name.indexOf("AOSSIE") != -1) {
+        data.org_name = "AOSSIE";
+      }
+      temp.push(data);
+    })
+    this.setState({ orgs_data: temp, loaded: true });
+  }
+
+  keyword(e) {
+    let { orgs_data } = this.state;
+    var keyword = e.target.value;
+    let filtered = [];
+    for(let org of orgs_data) {
+      for(let tech of org.org_tech_list) {
+        if(tech.toLowerCase() == keyword) {
+          filtered.push(org);
+        }
+      }
+      if(String(org.org_name).match(keyword) || String(org.year).match(keyword)) {
+        filtered.push(org);
+      }
+    }
+    this.setState({ keyword: e.target.value, filtered: filtered })
+  }
+
+
+  render() {
+    let { filtered } = this.state;
+    const filtered_orgs = filtered.map(org => <OrgCard org={org} />)
+    return (
+      <div className="container">
+        <div className="main">
+          <div className="row form_part">
+            <div className="col-md-3">
+              <h3 className="title">PYSOC.JS</h3>
+            </div>
+            <div className="col-md-9">
+              <input placeholder="Search for any keyword ( org_name / year / technology )" className="search_bar form-control" onChange={this.keyword.bind(this)}/>
+            </div>
+          </div>
+        </div>
+        <Loader loaded={this.state.loaded}>
+          <div className="filtered">
+            {filtered_orgs}
+          </div>
+        </Loader>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/src/Config/config.js b/src/Config/config.js
@@ -0,0 +1,8 @@
+export const DB_CONFIG = {
+    apiKey: "AIzaSyDoQArPAODopH9D83GVq0sKUAYCLMpDJgQ",
+    authDomain: "pysoc-55cd4.firebaseapp.com",
+    databaseURL: "https://pysoc-55cd4.firebaseio.com",
+    projectId: "pysoc-55cd4",
+    storageBucket: "pysoc-55cd4.appspot.com",
+    messagingSenderId: "877937157139"
+};
diff --git a/src/OrgCard.js b/src/OrgCard.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+
+class OrgCard extends Component {
+  constructor(props) {
+    super(props);
+
+  }
+
+  render() {
+    let { org } = this.props;
+    let techs = org.org_tech_list;
+    let tech_box = techs.map(tech => <div className="tech_box">{tech}</div>);
+    return (
+      <a href={org.org_link} className="org_link">
+        <div className="org_card col-md-3">
+          <div className="content">
+            <div className="year_cont"><span className="year">{org.year}</span></div>
+            <h3 className="name">{org.org_name}</h3>
+            <h5 className="desp">{org.org_def}</h5>
+            <div className="techs">
+              {tech_box}
+            </div>
+            <div className="selections">
+              <div className="row">
+                <div className="col-md-9">
+                  <h4 className="title">SELECTIONS</h4>
+                </div>
+                <div className="col-md-3">
+                  <h4 className="selects">{org.org_selections}</h4>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a>
+    );
+  }
+}
+
+export default OrgCard;
diff --git a/src/TechBox.js b/src/TechBox.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+
+class TechBox extends Component {
+  constructor(props) {
+    super(props);
+
+  }
+
+  render() {
+    let { tech } = this.props;
+    return (
+      <div className="tech_box">
+        {props}
+      </div>
+    );
+  }
+}
+
+export default TechBox;
diff --git a/src/imgs/gsoc.png b/src/imgs/gsoc.png