Team-Tomato · viswamvs · Sep 1, 2020 · Sep 6, 2020 · Sep 7, 2020 · Sep 8, 2020
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
@@ -11,7 +12,10 @@
     "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
     "react-reveal": "^1.2.2",
-    "react-scripts": "3.4.1"
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "reactstrap": "^8.5.1",
+    "styled-components": "^5.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -34,6 +34,16 @@
     <script src="https://kit.fontawesome.com/aa7ba787e4.js" crossorigin="anonymous"></script>
 
     <title>Team Tomato</title>
+    <head>
+      <script async src="https://www.googletagmanager.com/gtag/js?id=G-9P1N4S2307"></script>
+      <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-9P1N4S2307');
+      </script>
+      </head>
   </head>
   <body style="background-color: #f5f8fd" >
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -36,8 +36,3 @@
     transform: rotate(360deg);
   }
 }
-
-.heading {
-  font-size: 49px;
-  font-family: 'Bebas Neue', cursive;
-}
diff --git a/src/App.js b/src/App.js
@@ -1,17 +1,43 @@
 import React from 'react';
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import NavbarT from './components/Navbar.js';
-import Footer from './components/Footer.js';
-import Cards from './components/Cards';
+import {Switch, Route} from 'react-router-dom';
+import MainArticlePage from './components/articles-page/MainArticlePage';
+import MainSolutionPage from './components/solution-page/MainSolutionPage';
+import MainContact from './components/contact-page/MainContact.js';
+import Form from './components/article-submission-form/Form'
+
+<head>
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-9P1N4S2307"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-9P1N4S2307');
+</script>
+</head>
 
 function App() {
   return (
     <div className="App">
-      <NavbarT />
-      <h1 class="heading">Projects</h1>
-      <Cards />
-      <Footer />
+      <Switch>
+        <Route exact path="/solutions">
+          <MainSolutionPage />
+        </Route>
+        <Route exact path="/articles">
+          <MainArticlePage />
+        </Route>
+        <Route exact path="/contact">
+          <MainContact />
+        </Route>
+        <Route exact path="/admin/add_article">
+          <Form />
+        </Route>
+        <Route>
+          <h1>Error 404</h1>
+        </Route>
+      </Switch>
     </div>
   );
 }

diff --git a/src/App.test.js b/src/App.test.js
@@ -2,6 +2,17 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import App from './App';
 
+<head>
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-9P1N4S2307"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-9P1N4S2307');
+</script>
+</head>
+
 test('renders learn react link', () => {
   const { getByText } = render(<App />);
   const linkElement = getByText(/learn react/i);

diff --git a/src/components/Cards.css b/src/components/Cards.css
diff --git a/src/components/Cards.js b/src/components/Cards.js
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
diff --git a/src/components/article-submission-form/Form.css b/src/components/article-submission-form/Form.css
@@ -0,0 +1,34 @@
+.Form{
+    position: absolute;
+    top: 25vh;
+    background: white;
+    padding: 15px 0;
+    border-radius: 10px;
+    border: 1px solid lightgray;
+    box-shadow: 0 0 10px #C0C0C0;
+}
+
+.Form-input {
+    height: 38px;
+    width: 97%;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    background-color: #f5f6f7;
+    border: 1px solid lightgray;
+    border-radius: 4px;
+    padding-left: 20px;
+}
+
+.Form-submit {
+    background-color: lightskyblue;
+    height: 38px;
+    width: 30%;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    border: none;
+    border-radius: 5px;
+}
+
+.Form-submit:hover{
+    background-color: #34aeeb;
+}
diff --git a/src/components/article-submission-form/Form.js b/src/components/article-submission-form/Form.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import {Container, Row, Col} from 'react-bootstrap';
+import './Form.css';
+
+<head>
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-9P1N4S2307"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-9P1N4S2307');
+</script>
+</head>
+
+class Form extends React.Component{
+    render(){
+        return(
+            <div>
+                <Container fluid>
+                    <Row>
+                        <Col xs={4}></Col>
+                        <Col xs={4}>
+                            <form className="Form">
+                                <Container fluid>
+                                    <Row>
+                                        <Col xs={12}><input className="Form-input" type="text" name="articleName" placeholder="Name of Article" autoComplete="off"/></Col>
+                                        <Col xs={12}><input className="Form-input" type="text" name="category" placeholder="Category" autoComplete="off"/></Col>
+                                        <Col xs={12}><input className="Form-input" type="text" name="authorName" placeholder="Name of Author" autoComplete="off"/></Col>
+                                        <Col xs={12}><input className="Form-input" type="text" name="articleLink" placeholder="Link to Article" autoComplete="off"/></Col>
+                                        <Col xs={12}><input className="Form-submit" type="submit" value="Add Article"></input></Col>
+                                    </Row>
+                                </Container>
+                            </form>
+                        </Col>
+                        <Col xs={4}></Col>
+                    </Row>
+                </Container>
+            </div>
+        );
+    }
+}
+
+export default Form;
diff --git a/src/components/articles-page/ArticleTable.css b/src/components/articles-page/ArticleTable.css
@@ -0,0 +1,10 @@
+.ArticleTable {
+    margin-top: 40px;
+    margin-bottom: 40px;
+}
+
+.ArticleTable-table {
+    background-color: white;
+    box-shadow: 0 0 10px #C0C0C0;
+}
+
diff --git a/src/components/articles-page/ArticleTable.js b/src/components/articles-page/ArticleTable.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import Articles from './articles.json'
+import './ArticleTable.css';
+import {Container, Row, Col, Table} from 'react-bootstrap';
+
+<head>
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-9P1N4S2307"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-9P1N4S2307');
+</script>
+</head>
+
+class ArticleTable extends React.Component{
+    render(){
+        return(
+            <div className="ArticleTable">
+                <Container fluid>
+                <Row>
+                <Col></Col>
+                <Col xs={11}>
+                    <Table bordered striped className="ArticleTable-table">
+                        <thead>
+                            <tr>
+                                <th>#</th>
+                                <th>Article Name</th>
+                                <th>Category</th>
+                                <th>Author</th>
+                                <th>Link</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                        {
+                            Articles.map((article, index) => {
+                                return( 
+                                    <tr>
+                                        <td>{index+1}</td>
+                                        <td>{article.name}</td>
+                                        <td>{article.category}</td>
+                                        <td>{article.author}</td>
+                                        <td><a href={article.link} target="_blank"><i className="fas fa-external-link-alt"></i></a></td>
+                                    </tr>
+                                )
+                            })
+                        }
+                        </tbody>
+                    </Table>
+                </Col>
+                <Col></Col>
+                </Row>
+                </Container>
+            </div>
+        );
+    }
+}
+
+export default ArticleTable;
diff --git a/src/components/articles-page/MainArticlePage.js b/src/components/articles-page/MainArticlePage.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import NavbarT from '../common-components/Navbar';
+import Footer from '../common-components/Footer';
+import ArticleTable from './ArticleTable';
+
+<head>
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-9P1N4S2307"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-9P1N4S2307');
+</script>
+</head>
+
+class ArticlePage extends React.Component {
+    render(){
+        return(
+            <div>
+                <NavbarT />
+                <ArticleTable />
+                <Footer />
+            </div>
+        );
+    }
+}
+
+export default ArticlePage;