Feature Added Sidebar.

.eslintrc

@@ -1,39 +1,46 @@
 {
-    "env": {
-      "browser": true,
-      "commonjs": true,
-      "es6": true,
-      "node": true,
-      "jest": true
-    },
-    "plugins": [
-      "react",
-      "react-hooks",
-      "jest",
-      "better-styled-components"
-    ],
-    "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
-    "parserOptions": {
-      "sourceType": "module",
-      "ecmaVersion": 12
-    },
-    "settings": {
-      "react": {
-        "version": "detect"
-      }
-    },
-    "rules": {
-      "linebreak-style": ["warn", "unix"],
-      "no-unused-vars" : "warn",
-      "react-hooks/rules-of-hooks": "error",
-      "react-hooks/exhaustive-deps": "warn",
-      "react/react-in-jsx-scope": "off",
-      "react/prop-types": "off",
-      "jest/no-disabled-tests": "warn",
-      "jest/no-focused-tests": "error",
-      "jest/no-identical-title": "error",
-      "jest/prefer-to-have-length": "warn",
-      "jest/valid-expect": "error",
-      "better-styled-components/sort-declarations-alphabetically": "warn"
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "node": true,
+    "jest": true
+  },
+  "plugins": [
+    "react",
+    "react-hooks",
+    "jest",
+    "better-styled-components",
+    "cypress"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:cypress/recommended"
+  ],
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 12
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
     }
-  }
+  },
+  "rules": {
+    "linebreak-style": ["warn", "unix"],
+    "no-unused-vars": "warn",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off",
+    "jest/no-disabled-tests": "warn",
+    "jest/no-focused-tests": "error",
+    "jest/no-identical-title": "error",
+    "jest/prefer-to-have-length": "warn",
+    "jest/valid-expect": "error",
+    "better-styled-components/sort-declarations-alphabetically": "warn",
+    "react/no-unknown-property": "warn"
+  }
+}

.github/workflows/node.js.yml

@@ -24,5 +24,5 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm ci
-    - run: npm run build
+    - run: yarn install --frozen-lockfile
+    - run: yarn build

.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # vercel
 .vercel
 
+cypress/videos
+cypress/screenshots

CONTRIBUTING.md

@@ -5,7 +5,6 @@
 - **Comment** on the issue that you would like to get assigned to you. (Remember: Do not work on issues assigned to someone else and do not work on any issue without having it assigned to you.)
 - Create issue if you see any bug and then once you get approved from the admins, you can assign yourself and start working on it.
 
-
 # File Structure
 
 ```
@@ -153,6 +152,7 @@ Once we're in our branch, we **rebase** our branch on top of the current develop
 ```
 git rebase develop
 ```
+
 You should solve the merge conflicts, if any.
 
 8. **Pushing your code**

README.md

@@ -25,9 +25,10 @@ Visit our site at https://crypto.realdevsquad.com
 
 - `git clone<repository-url>` this repository
 - `cd website-crypto`
-- `npm install`
+- `yarn`
+
+## Installation 0.1
 
-## Installation 0.1 
 [Why Volta?](https://docs.volta.sh/guide/#why-volta)
 
 To install Volta, please follow the [process](https://docs.volta.sh/guide/getting-started)
@@ -36,10 +37,7 @@ To install Volta, please follow the [process](https://docs.volta.sh/guide/gettin
 
 Setup `dev.realdevsquad.com` for development by following the instructions here - [Avoiding CORS during development](https://github.com/Real-Dev-Squad/docs/tree/main/docs/dev/https-dev-url-cors)
 
-- For development: `npm run dev`
+- For development: `yarn run dev`
 - Visit your app at https://dev.realdevsquad.com.
-- To build: `npm run build`
-- To serve the production build: `npm run start`
-
-
-
+- To build: `yarn run build`
+- To serve the production build: `yarn run start`

__mocks__/axios.js

@@ -0,0 +1,2 @@
+import mockAxios from 'jest-mock-axios';
+export default mockAxios;

__mocks__/browser.js

@@ -0,0 +1,4 @@
+import { setupWorker } from 'msw';
+import handlers from './handlers';
+
+export const worker = setupWorker(...handlers);

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

__mocks__/handlers.js

@@ -0,0 +1,5 @@
+import testHandlers from './handlers/test.handler';
+
+const handlers = [...testHandlers];
+
+export default handlers;

__mocks__/handlers/test.handler.js

@@ -0,0 +1,15 @@
+import { rest } from 'msw';
+const URL = process.env.NEXT_PUBLIC_BASE_URL;
+
+const testHandlers = [
+  rest.get(`${URL}/test`, (_, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        message: 'Test returned successfully!',
+      })
+    );
+  }),
+];
+
+export default testHandlers;

__mocks__/index.js

@@ -0,0 +1,11 @@
+async function initMocks() {
+  if (typeof window === 'undefined') {
+    const { server } = await import('./server');
+    server.listen();
+  } else {
+    const { worker } = await import('./browser');
+    worker.start();
+  }
+}
+
+initMocks();

__mocks__/server.js

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import handlers from './handlers';
+
+export const server = setupServer(...handlers);

__tests__/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

__tests__/integration/example.spec.js

@@ -0,0 +1,6 @@
+describe('Navigation', () => {
+  it('should navigate to the about page', () => {
+    // Start from the index page
+    cy.visit('/');
+  });
+});

__tests__/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

__tests__/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

components/NavBar/index.js

@@ -17,6 +17,12 @@ const NavBar = () => {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [mountedComponent, setMountedComponent] = useState(false);
   const navbarRef = useRef();
+
+  let authUrl = LOGIN_URL;
+  if (typeof window !== 'undefined') {
+    authUrl = `${LOGIN_URL}&state=${window.location.href}`;
+  }
+
   GenericClosePopUp(navbarRef, () => {
     setToggle(false);
   });
@@ -68,7 +74,7 @@ const NavBar = () => {
             mountedComponent ? '' : 'd-none'
           }`}
         >
-          <Link href={LOGIN_URL}>
+          <Link href={authUrl}>
             <a className={`${styles.btnLogin} ${isLoggedIn ? 'd-none' : ''}`}>
               <button className={styles.btnLoginText}>
                 Sign In
@@ -137,7 +143,7 @@ const NavBar = () => {
               mountedComponent ? '' : 'd-none'
             }`}
           >
-            <Link href={LOGIN_URL}>
+            <Link href={authUrl}>
               <a className={`${styles.btnLogin} ${isLoggedIn ? 'd-none' : ''}`}>
                 <button className={styles.btnLoginText}>
                   Sign In With GitHub

components/Sidebar/index.jsx

@@ -0,0 +1,81 @@
+import styles from './sidebar.module.css';
+import { useRouter } from 'next/router';
+import Image from 'next/image';
+import sidebarMenuOptions from 'constants/sidebarMenuOptions';
+import { useState } from 'react';
+
+const Sidebar = () => {
+  const [mobileToggle, setMobileToggle] = useState(false);
+  const router = useRouter();
+  const navigateTo = (url) => router.push(url);
+
+  const basePath = router.pathname;
+  const pagePath = router.pathname.split('/')[1];
+
+  const activeOptionClass = (optionURL) =>
+    pagePath === optionURL || (basePath === '/' && '/' === optionURL)
+      ? ' ' + styles.option_active
+      : '';
+
+  return (
+    <div className={styles.wrapper} data-testid="sidebar-notification">
+      <div
+        className={
+          styles.mobileToggle +
+          ` ${mobileToggle ? styles['mobileToggle--active'] : ''}`
+        }
+        onClick={() => setMobileToggle((prev) => !prev)}
+      >
+        <h3>Menu</h3>
+        <Image src="/assets/MenuArrow.svg" width={25} height={25} />
+      </div>
+
+      <aside className={styles.sidebar}>
+        <span className={styles.heading}>
+          <Image src={'/assets/Real-Dev-Squad1x.png'} width={50} height={50} />
+          <h3>RealDevSquad</h3>
+        </span>
+        <div className={styles.options}>
+          {sidebarMenuOptions.map((option, index) => {
+            const optionPath = option.urlPath;
+            return (
+              <span
+                key={index}
+                // this code below insure even if we are in nested path like currency-exchange/**/
+                //even then the link is active
+                className={styles.option + activeOptionClass(optionPath)}
+                onClick={() => navigateTo(optionPath)}
+              >
+                <Image
+                  src={option.iconPath}
+                  className={styles.option_image}
+                  width={25}
+                  height={25}
+                />
+                <p>{option.name}</p>
+                <span className={styles.option_bar}></span>
+              </span>
+            );
+          })}
+        </div>
+
+        <div className={styles.buttonWrapper}>
+          {router.pathname !== '/currency-exchange' && (
+            <button className={styles.button}>
+              <Image src="/assets/InfoSquare.svg" width={25} height={25} />
+              Trade Now
+            </button>
+          )}
+          <button className={styles.button}>
+            <Image src="/assets/InfoSquare.svg" width={25} height={25} />
+            Guide
+          </button>
+        </div>
+      </aside>
+    </div>
+  );
+};
+
+export default Sidebar;
+
+//pure TDD