telus · PeterPavlatos · Nov 17, 2021 · Nov 18, 2021 · Nov 19, 2021 · Nov 19, 2021
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 node_modules
+/node_modules
diff --git a/__mocks__/fileMock.js b/__mocks__/fileMock.js
@@ -0,0 +1 @@
+module.exports = 'test-file-stub';
diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,17 +8,38 @@
     "unit": "jest"
   },
   "dependencies": {
+    "@tds/core-card": "^2.6.0",
+    "@tds/core-chevron-link": "^2.3.2",
+    "@tds/core-css-reset": "^3.0.1",
+    "@tds/core-display-heading": "^3.1.0",
     "@tds/core-heading": "^3.0.8",
+    "@tds/core-image": "^2.1.0",
+    "@tds/core-notification": "^3.2.0",
+    "@tds/core-paragraph": "^2.1.0",
+    "@tds/core-price-lockup": "^2.4.0",
+    "@tds/core-small": "^2.2.0",
+    "@tds/core-strong": "^2.2.0",
+    "@tds/core-terms-and-conditions": "^1.5.0",
+    "@tds/core-text": "^3.2.0",
+    "axios": "^0.24.0",
+    "cors": "^2.8.5",
     "enzyme": "^3.11.0",
     "express": "^4.17.1",
+    "file-loader": "^6.2.0",
+    "lodash": "^4.17.21",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "^5.2.0",
+    "sass": "^1.43.4",
+    "sass-loader": "^12.3.0",
+    "styled-components": "^5.3.3",
+    "url-loader": "^4.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.13",
     "@babel/preset-env": "^7.12.13",
     "@babel/preset-react": "^7.12.13",
+    "@testing-library/react": "^12.1.2",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
     "concurrently": "^5.3.0",
@@ -30,5 +51,6 @@
     "webpack": "^5.21.2",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2"
-  }
+  },
+  "proxy": "http://localhost:8081"
 }
diff --git a/public/index.html b/public/index.html
@@ -4,10 +4,17 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link
+      rel="preload"
+      as="script"
+      href="https://polyfill.io/v3/polyfill.min.js?features=es6%2CArray.prototype.includes%2CSet"
+    />
   <title>Apple Shopper</title>
 </head>
 <body>
   <div id="root"></div>
+
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6%2CArray.prototype.includes%2CSet"></script>
 </body>
 </html>
 
diff --git a/src/client.jsx b/src/client.jsx
@@ -1,9 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './ui/components/App';
+import CSSReset from '@tds/core-css-reset';
 
 ReactDOM.render(
-  <App />,
+  <>
+    <CSSReset />
+    <App />
+  </>,
   document.getElementById('root')
 );
 
+
diff --git a/src/server.js b/src/server.js
@@ -2,6 +2,9 @@ var express = require('express');
 var app = express();
 var router = express.Router();
 var PORT = 8081;
+var cors = require('cors');
+
+app.use(cors());
 
 router.get('/watches', function(req, res) {
   res.json({

diff --git a/src/ui/__tests__/page_heading.spec.jsx b/src/ui/__tests__/page_heading.spec.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import PageHeading from '../components/PageHeading';
+import { render } from '@testing-library/react';
+
+
+
+test("Should render a PageHeading component", () => {
+  render(<PageHeading/>);
+});
diff --git a/src/ui/__tests__/routes.spec.jsx b/src/ui/__tests__/routes.spec.jsx
@@ -3,16 +3,52 @@ import {MemoryRouter} from 'react-router-dom';
 import {mount, configure} from 'enzyme';
 import App from '../components/App';
 import Home from '../components/Home';
+import Watches from '../components/Watches';
+import Iphones from '../components/Iphones';
 import NotFound from '../components/NotFound';
+import PageProduct from '../components/PageProduct';
 
-describe('Application routes', () => {
+import {cleanup, fireEvent, render} from '@testing-library/react';
+
+
+describe('Application  1  routes', () => {
   it('should render a Home component', () => {
     const wrapper = mount(
       <MemoryRouter initialEntries={['/']}>
-        <App />
+        <Home />
       </MemoryRouter>
     );
-
     expect(wrapper.find(Home)).toHaveLength(1);
   });
-});
+
+  // it('should render a Watches component', () => {
+  //   const wrapper = mount(
+  //     <MemoryRouter initialEntries={['/watches']}>
+  //        <App />
+  //     </MemoryRouter>
+  //   );
+  //   expect(wrapper.find(Watches)).toHaveLength(1);
+  // });
+
+/*
+  it('should render a Iphones component', () => {
+    const wrapper = mount(
+      <MemoryRouter initialEntries={['/iphones']}>
+         <App />
+      </MemoryRouter>
+    );
+    expect(wrapper.find(Iphones)).toHaveLength(1);
+  });
+
+
+  it('should render a NotFound component', () => {
+    const wrapper = mount(
+      <MemoryRouter initialEntries={['/*']}>
+         <App />
+      </MemoryRouter>
+    );
+    expect(wrapper.find(NotFound)).toHaveLength(1);
+  });
+  */
+
+});  
diff --git a/src/ui/components/App/index.js b/src/ui/components/App/index.js
@@ -1,16 +1,35 @@
 import React from 'react';
-import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route, Redirect, Link } from 'react-router-dom';
 import Home from '../Home';
+import Watches from '../Watches';
+import Iphones from '../Iphones';
 import NotFound from '../NotFound';
+import HairlineDivider from '@tds/core-hairline-divider';
+import Nav from '../Nav';
+import WatchesContextProvider from "../../context/WatchesContext";
+import IphonesContextProvider from "../../context/IphonesContext";
 
 const App = () => (
-  <Router>
-    <Switch>
-      <Route path="/">
-        <Home />
-      </Route>
-    </Switch>
-  </Router>
+  <WatchesContextProvider>
+    <IphonesContextProvider>
+      <Router>
+        <Nav />
+        <HairlineDivider />
+        <Switch>
+          <Route exact path="/" component={Home} />
+          {/* <Route path="/watches">
+            <Watches/>
+          </Route>
+          <Route path="/iphones">
+            <Iphones/>
+          </Route> */}
+          <Route exact path="/watches" component={Watches} />
+          <Route exact path="/iphones" component={Iphones} />
+          <Route component={NotFound} />
+        </Switch>
+      </Router>
+    </IphonesContextProvider>
+  </WatchesContextProvider>
 );
 
 export default App;
diff --git a/src/ui/components/Home/index.js b/src/ui/components/Home/index.js
@@ -1,6 +1,11 @@
 import React from 'react';
-import Heading from '@tds/core-heading';
-
-const Home = () => <Heading level="h1">Device Catalogue</Heading>;
+import PageHeading from "../PageHeading";
 
+const Home = () => {
+    return (
+        <>
+            <PageHeading title="Device Catalogue" />
+        </>
+    )
+}
 export default Home;
diff --git a/src/ui/components/Iphones/index.js b/src/ui/components/Iphones/index.js
@@ -0,0 +1,27 @@
+import React, { useState, useContext, useEffect } from 'react';
+import FlexGrid from '@tds/core-flex-grid';
+import PageHeading from "../PageHeading";
+import PageProduct from "../PageProduct";
+import { IphonesContext } from "../../context/IphonesContext";
+
+
+export default function Iphones() {
+    const [iphoneState] = useContext(IphonesContext);
+    //console.log(`Iphones Component retrieving data from context: ${iphoneState}`);
+    const iPhones = iphoneState.data;
+    return (
+        <>
+            <PageHeading title="iPhones" />
+            <FlexGrid>
+                <FlexGrid.Row>
+                    {iPhones ?
+                        iPhones.map((item, index) => (
+                            <PageProduct key={`iphones-${index}`} product={item} index={index} type="iphones"/>
+                        ))
+                        : "No iPhones available at this moment. Come back soon!"
+                    }
+                </FlexGrid.Row>
+            </FlexGrid>
+        </>
+    )
+}
diff --git a/src/ui/components/Nav/Nav.scss b/src/ui/components/Nav/Nav.scss
@@ -0,0 +1,36 @@
+@import "../../styles/theme.scss";
+
+.NavComponent {
+    background: $TELUSPurple;
+    > div {
+        > div {
+            padding: 0;
+            a {
+                color: $TELUSWhite;
+                padding:20px;
+                 > i {
+                    position: relative;
+                    top: 4px;
+                    right: 5px;
+                    > svg {
+                        fill: $TELUSWhite;
+                    }
+                 }
+            }
+            a.active {
+                background: $TELUSWhite;
+                color: $TELUSPurple;
+                > i {
+                    > svg {
+                        fill: $TELUSPurple;
+                    }
+                 }
+            }
+
+        }
+    }
+
+
+
+}
+
diff --git a/src/ui/components/Nav/index.js b/src/ui/components/Nav/index.js
@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { Watch, Phone, Home } from '@tds/core-decorative-icon';
+import Box from '@tds/core-box';
+import "./Nav.scss";
+
+export default function Nav() {
+    const [activePage, setActivePage] = useState('Home')
+
+    // useEffect(() => {
+    //     console.log("+++++++++++++ activePage", activePage)
+    // }, [activePage])
+
+    return (
+        <div className="NavComponent">
+            <Box inline between={0} inset={0}>
+                <Box inline between={0} inset={3}>
+                    <Link className={activePage == 'Home' && 'active'} onClick={() => { setActivePage('Home') }} to="/"><Home variant="default" size={20} />Home</Link>
+                </Box>
+                <Box inline between={0} inset={3}>
+                    <Link className={activePage == 'Watches' && 'active'} onClick={() => { setActivePage('Watches') }} to="/watches"><Watch variant="default" size={20} />Watches</Link>
+                </Box>
+                <Box inline between={0} inset={3}>
+                    <Link className={activePage == 'iPhones' && 'active'} onClick={() => { setActivePage('iPhones') }} to="/iphones"><Phone variant="default" size={20} />iPhones</Link>
+                </Box>
+            </Box>
+            {/* <Link to="/asdadasdasd">404</Link> */}
+        </div>
+
+    )
+}
diff --git a/src/ui/components/PageHeading/index.js b/src/ui/components/PageHeading/index.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import DisplayHeading from '@tds/core-display-heading'
+import Box from '@tds/core-box'
+import FlexGrid from '@tds/core-flex-grid'
+
+export default function PageHeading(props) {
+    const title = props.title || "Heading";
+    return (
+        <FlexGrid>
+            <FlexGrid.Row>
+                <Box inset={5}>
+                    <DisplayHeading level="h1">{title}</DisplayHeading>
+                </Box>
+            </FlexGrid.Row>
+        </FlexGrid>
+    )
+}