From bdae2c47fb8a98519768ddb44794cb8cde78724c Mon Sep 17 00:00:00 2001 From: Mangiang Date: Tue, 2 Nov 2021 23:05:32 -0400 Subject: [PATCH 01/37] fix: Fix errors raised by ShortName not being strings --- items/frontend/src/pages/mainPageComponents/SearchArea.tsx | 4 +--- items/frontend/src/state/GlobalState.ts | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/items/frontend/src/pages/mainPageComponents/SearchArea.tsx b/items/frontend/src/pages/mainPageComponents/SearchArea.tsx index bb4e61c..d1711ff 100644 --- a/items/frontend/src/pages/mainPageComponents/SearchArea.tsx +++ b/items/frontend/src/pages/mainPageComponents/SearchArea.tsx @@ -63,11 +63,10 @@ export const SearchArea = () => { const handleNameInput = async (input: string) => { const searchResults = await searchItem(input, preferedLocale) - console.log(searchResults) const options = searchResults?.map((res) => ({ id: res.item._id, name: res.locale.Name ? res.locale.Name : res.item._name, - shortName: res.locale.ShortName + shortName: JSON.stringify(res.locale.ShortName) })) setSelecteOptions(options ? options : []) } @@ -184,7 +183,6 @@ export const SearchArea = () => {
  • {option.name}
    • )} filterOptions={(options, state) => options.filter(elt =>{ - console.log(elt.shortName?.toLocaleLowerCase(), state.inputValue.toLocaleLowerCase(), elt.shortName?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase())) return (elt.name?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase()) || elt.id?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase()) || elt.shortName?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase())) diff --git a/items/frontend/src/state/GlobalState.ts b/items/frontend/src/state/GlobalState.ts index 0c1b4c4..6f2abe7 100644 --- a/items/frontend/src/state/GlobalState.ts +++ b/items/frontend/src/state/GlobalState.ts @@ -58,7 +58,6 @@ export const useGlobalState = create((set) => ({ refreshLocalesList: async () => { const locales = sessionStorage.getItem(SessionStorageKeys.LOCALES); const localesList = locales !== null && locales !== undefined && locales !== 'undefined' ? JSON.parse(locales) : await getLocaleList() - console.log(localesList) if (!locales) sessionStorage.setItem(SessionStorageKeys.LOCALES, JSON.stringify(localesList ? localesList : null)) set((_state) => ({ localesList: localesList ? localesList : [] })) }, From 4bb11f731c7cc7ee745cb0e275bfed76271dfc55 Mon Sep 17 00:00:00 2001 From: shirito Date: Thu, 4 Nov 2021 01:21:44 +0000 Subject: [PATCH 02/37] feat: Add passphrase capabilities for SSH key (#11) We can now use encrypted SSH keys in the pipeline. The new secret is `deploy_ssh_key_passphrase` The documentation has been updated accordingly Co-authored-by: Ereshkigal Reviewed-on: https://dev.sp-tarkov.com/SPT-AKI/Website/pulls/11 Co-authored-by: shirito Co-committed-by: shirito --- .ansible-items/inventory | 13 ++++++- .ansible-items/playbook.yml | 6 +-- .drone-docker.yml | 28 +++++++++----- .drone-kubernetes.yml | 36 +++++++++++------- items/README.md | 1 + items/docs/Walkthrough.md | 73 +++++++++++++++++++------------------ 6 files changed, 95 insertions(+), 62 deletions(-) diff --git a/.ansible-items/inventory b/.ansible-items/inventory index 32090d7..5301913 100644 --- a/.ansible-items/inventory +++ b/.ansible-items/inventory @@ -1,2 +1,11 @@ -[host] -{{ DEPLOYMENT_USER }}@{{ DEPLOY_HOSTNAME }} ansible_connection=ssh ansible_user={{ DEPLOYMENT_USER }} \ No newline at end of file +all: + children: + sptarkov: + hosts: + sp-tarkov: + ansible_host: {{ DEPLOY_HOSTNAME }} + ansible_user: {{ DEPLOY_USER }} + ansible_connection: paramiko_ssh + ansible_ssh_pass: {{ DEPLOY_SSH_KEY_PASSPHRASE }} + ansible_ssh_user: {{ DEPLOY_USER }} + ansible_ssh_private_key_file: /drone/src/private.key # Hardcoded because created by the Drone plugin \ No newline at end of file diff --git a/.ansible-items/playbook.yml b/.ansible-items/playbook.yml index dea7313..a727a10 100644 --- a/.ansible-items/playbook.yml +++ b/.ansible-items/playbook.yml @@ -1,6 +1,6 @@ --- - name: install and configure PHP8 and composer - hosts: host + hosts: sptarkov tasks: - name: Delete spt-items-api before adding everything again @@ -36,8 +36,8 @@ - name: Reset files permissions file: path: "{{ lookup('env', 'SPT_ITEMS_PATH') }}" - owner: "{{ lookup('env', 'DEPLOYMENT_USER') }}" - group: "{{ lookup('env', 'DEPLOYMENT_USER_GROUP') }}" + owner: "{{ lookup('env', 'DEPLOY_USER') }}" + group: "{{ lookup('env', 'DEPLOY_USER_GROUP') }}" mode: 0774 recurse: yes diff --git a/.drone-docker.yml b/.drone-docker.yml index 4785f9e..b8a1747 100644 --- a/.drone-docker.yml +++ b/.drone-docker.yml @@ -21,13 +21,19 @@ steps: from_secret: deploy_hostname SPT_ITEMS_HOSTNAME: from_secret: spt_items_hostname - DEPLOYMENT_USER: + DEPLOY_USER: from_secret: deploy_username + DEPLOY_SSH_KEY_PASSPHRASE: + from_secret: deploy_ssh_key_passphrase + DEPLOY_PRIVATE_KEY: + from_secret: deploy_ssh_key commands: - - sed -i 's/{{ SPT_ITEMS_HOSTNAME }}/'"$SPT_ITEMS_HOSTNAME"'/g' ./items/frontend/.env.example - - mv ./items/frontend/.env.example ./items/frontend/.env - - sed -i 's/{{ DEPLOY_HOSTNAME }}/'"$DEPLOY_HOSTNAME"'/g' ./.ansible-items/inventory - - sed -i 's/{{ DEPLOYMENT_USER }}/'"$DEPLOYMENT_USER"'/g' ./.ansible-items/inventory + - sed -i 's/{{ SPT_ITEMS_HOSTNAME }}/'"$SPT_ITEMS_HOSTNAME"'/g' ./items/frontend/.env.example + - mv ./items/frontend/.env.example ./items/frontend/.env + - echo "$DEPLOY_PRIVATE_KEY" > private.key && chmod 600 private.key + - sed -i 's/{{ DEPLOY_HOSTNAME }}/'"$DEPLOY_HOSTNAME"'/g' ./.ansible-items/inventory + - sed -i 's/{{ DEPLOY_SSH_KEY_PASSPHRASE }}/'"$DEPLOY_SSH_KEY_PASSPHRASE"'/g' ./.ansible-items/inventory + - sed -i 's/{{ DEPLOY_USER }}/'"$DEPLOY_USER"'/g' ./.ansible-items/inventory - name: build frontend image: node:lts-alpine3.14 @@ -48,22 +54,26 @@ steps: inventory: ./.ansible-items/inventory galaxy: ./.ansible-items/requirements.yml syntax_check: true + when: + branch: + - development + - name: apply ansible playbook image: plugins/ansible:3 settings: playbook: ./.ansible-items/playbook.yml inventory: ./.ansible-items/inventory galaxy: ./.ansible-items/requirements.yml - private_key: - from_secret: deploy_ssh_key + timeout: 60 + verbose: 2 environment: DEPLOY_HOSTNAME: from_secret: deploy_hostname SPT_ITEMS_HOSTNAME: from_secret: spt_items_hostname - DEPLOYMENT_USER: + DEPLOY_USER: from_secret: deploy_username - DEPLOYMENT_USER_GROUP: + DEPLOY_USER_GROUP: from_secret: deploy_user_group SPT_ITEMS_PATH: from_secret: deploy_path diff --git a/.drone-kubernetes.yml b/.drone-kubernetes.yml index 3d09772..d2f8b75 100644 --- a/.drone-kubernetes.yml +++ b/.drone-kubernetes.yml @@ -17,17 +17,23 @@ steps: - name: replace hosts and user variables image: ubuntu:impish environment: - DEPLOY_HOSTNAME: - from_secret: deploy_hostname SPT_ITEMS_HOSTNAME: from_secret: spt_items_hostname - DEPLOYMENT_USER: + DEPLOY_HOSTNAME: + from_secret: deploy_hostname + DEPLOY_USER: from_secret: deploy_username + DEPLOY_PRIVATE_KEY: + from_secret: deploy_ssh_key + DEPLOY_SSH_KEY_PASSPHRASE: + from_secret: deploy_ssh_key_passphrase commands: - - sed -i 's/{{ SPT_ITEMS_HOSTNAME }}/'"$SPT_ITEMS_HOSTNAME"'/g' ./items/frontend/.env.example - - mv ./items/frontend/.env.example ./items/frontend/.env - - sed -i 's/{{ DEPLOY_HOSTNAME }}/'"$DEPLOY_HOSTNAME"'/g' ./.ansible-items/inventory - - sed -i 's/{{ DEPLOYMENT_USER }}/'"$DEPLOYMENT_USER"'/g' ./.ansible-items/inventory + - sed -i 's/{{ SPT_ITEMS_HOSTNAME }}/'"$SPT_ITEMS_HOSTNAME"'/g' ./items/frontend/.env.example + - mv ./items/frontend/.env.example ./items/frontend/.env + - echo "$DEPLOY_PRIVATE_KEY" > private.key && chmod 600 private.key + - sed -i 's/{{ DEPLOY_HOSTNAME }}/'"$DEPLOY_HOSTNAME"'/g' ./.ansible-items/inventory + - sed -i 's/{{ DEPLOY_SSH_KEY_PASSPHRASE }}/'"$DEPLOY_SSH_KEY_PASSPHRASE"'/g' ./.ansible-items/inventory + - sed -i 's/{{ DEPLOY_USER }}/'"$DEPLOY_USER"'/g' ./.ansible-items/inventory - name: build frontend image: node:lts-alpine3.14 @@ -48,22 +54,26 @@ steps: inventory: ./.ansible-items/inventory galaxy: ./.ansible-items/requirements.yml syntax_check: true + when: + branch: + - development + - name: apply ansible playbook image: plugins/ansible:3 settings: playbook: ./.ansible-items/playbook.yml inventory: ./.ansible-items/inventory galaxy: ./.ansible-items/requirements.yml - private_key: - from_secret: deploy_ssh_key + timeout: 60 + verbose: 2 environment: - DEPLOY_HOSTNAME: - from_secret: deploy_hostname SPT_ITEMS_HOSTNAME: from_secret: spt_items_hostname - DEPLOYMENT_USER: + DEPLOY_HOSTNAME: + from_secret: deploy_hostname + DEPLOY_USER: from_secret: deploy_username - DEPLOYMENT_USER_GROUP: + DEPLOY_USER_GROUP: from_secret: deploy_user_group SPT_ITEMS_PATH: from_secret: deploy_path diff --git a/items/README.md b/items/README.md index 9b22418..181e465 100644 --- a/items/README.md +++ b/items/README.md @@ -14,6 +14,7 @@ | deploy_username | The default username to use on the remote server
    used by Ansible SSH | www-data | | deploy_user_group | The default user group to use on the remote server
    used to set permission on the website folder | www-data | | deploy_ssh_key | The **content** of the ssh private key used to connect to the remote server
    The key needs to be in RSA in "RSA PRIVATE KEY" format
    The ssh publick key needs to already be in the user used in the remote server ~/.ssh/authorized_keys | -----BEGIN RSA PRIVATE KEY-----
    The key
    -----END RSA PRIVATE KEY----- | +| deploy_ssh_key_passphrase | The passphrase to decrypt the SSH private key | test | ## ⚠ Important notes for the deployment ⚠ * Add all required secrets in Drone diff --git a/items/docs/Walkthrough.md b/items/docs/Walkthrough.md index ce56bac..85ef636 100644 --- a/items/docs/Walkthrough.md +++ b/items/docs/Walkthrough.md @@ -4,7 +4,6 @@ * [Overview](#overview) * [Pipeline definition](#pipeline-definition) * [Pipeline concurrency](#pipeline-concurrency) -* [Environment variables](#environment-variables) * [Triggers](#triggers) * [Steps](#steps) * [Fetch and update submodules](#Fetch-and-update-submodules) @@ -46,13 +45,6 @@ concurrency: ``` The pipeline is set to only one build at a time (every subsequent build with be pending). -## Environment variables -```yml -environment: - SPT_ITEMS_PATH: /var/www/html/aki/spt-items-api -``` -Here are the environment variables. They are automatically injected in every step. - ## Triggers ```yml trigger: @@ -70,24 +62,31 @@ The pipeline is run on every push only on branches `master`, `main` and `develop - name: replace hosts and user variables image: ubuntu:impish environment: - DEPLOY_HOSTNAME: - from_secret: deploy_hostname SPT_ITEMS_HOSTNAME: from_secret: spt_items_hostname - DEPLOYMENT_USER: + DEPLOY_HOSTNAME: + from_secret: deploy_hostname + DEPLOY_USER: from_secret: deploy_username + DEPLOY_PRIVATE_KEY: + from_secret: deploy_ssh_key + DEPLOY_SSH_KEY_PASSPHRASE: + from_secret: deploy_ssh_key_passphrase commands: - - sed -i 's/{{ SPT_ITEMS_HOSTNAME }}/'"$SPT_ITEMS_HOSTNAME"'/g' ./items/frontend/.env.example - - mv ./items/frontend/.env.example ./items/frontend/.env - - sed -i 's/{{ DEPLOY_HOSTNAME }}/'"$DEPLOY_HOSTNAME"'/g' ./.ansible-items/inventory - - sed -i 's/{{ DEPLOYMENT_USER }}/'"$DEPLOYMENT_USER"'/g' ./.ansible-items/inventory + - sed -i 's/{{ SPT_ITEMS_HOSTNAME }}/'"$SPT_ITEMS_HOSTNAME"'/g' ./items/frontend/.env.example + - mv ./items/frontend/.env.example ./items/frontend/.env + - echo "$DEPLOY_PRIVATE_KEY" > private.key && chmod 600 private.key + - sed -i 's/{{ DEPLOY_HOSTNAME }}/'"$DEPLOY_HOSTNAME"'/g' ./.ansible-items/inventory + - sed -i 's/{{ DEPLOY_SSH_KEY_PASSPHRASE }}/'"$DEPLOY_SSH_KEY_PASSPHRASE"'/g' ./.ansible-items/inventory + - sed -i 's/{{ DEPLOY_USER }}/'"$DEPLOY_USER"'/g' ./.ansible-items/inventory ``` Executed on every push. \ The following environment variables are injected using Drone secrets: * `SPT_ITEMS_HOSTNAME` is used by the frontend to call the backend. * `DEPLOY_HOSTNAME` is used by Ansible to connect to the remote server via SSH. - * `DEPLOYMENT_USER` is used by Ansible to connect to the remote server via SSH. - * all environment variables at the pipeline level (see [Environment variables](#environment-variables)) + * `DEPLOY_USER` is used by Ansible to connect to the remote server via SSH. + * `DEPLOY_PRIVATE_KEY` is the SSH key used to connect to the remote server via SSH + * `DEPLOY_SSH_KEY_PASSPHRASE` is the SSH key passphrase Using `sed` makes temporary changes in the container/pod instead of commiting secrets in the repo in plain text. \ The changes are never pushed and are discarded when the container/pod is terminated. @@ -133,15 +132,19 @@ Check the Ansible syntax in [playbook.yml](../.ansible/playbook.yml), [inventory playbook: ./.ansible-items/playbook.yml inventory: ./.ansible-items/inventory galaxy: ./.ansible-items/requirements.yml - private_key: - from_secret: deploy_ssh_key + timeout: 60 + verbose: 2 environment: - DEPLOY_HOSTNAME: - from_secret: deploy_hostname SPT_ITEMS_HOSTNAME: from_secret: spt_items_hostname - DEPLOYMENT_USER: + DEPLOY_HOSTNAME: + from_secret: deploy_hostname + DEPLOY_USER: from_secret: deploy_username + DEPLOY_USER_GROUP: + from_secret: deploy_user_group + SPT_ITEMS_PATH: + from_secret: deploy_path when: branch: - master @@ -153,14 +156,15 @@ This step is [idempotent](https://en.wikipedia.org/wiki/Idempotence). \ The following environment variables are injected using Drone secrets: * `SPT_ITEMS_HOSTNAME` is used by the PHP env file. * `DEPLOY_HOSTNAME` is used to connect to the remote server via SSH. - * `DEPLOYMENT_USER` is used to connect to the remote server via SSH. - * all environment variables at the pipeline level (see [Environment variables](#environment-variables)) + * `DEPLOY_USER` is used to connect to the remote server via SSH. + * `DEPLOY_USER_GROUP` is the user group, used to give read/write/execute permissions to the whole group. It must be the same as Nginx's user. + * `SPT_ITEMS_PATH` is the path on the remote server where the files will be copyed to. #### Playbook definition ```yml -hosts: host +hosts: sptarkov ``` -Uses the host defined in [inventory](../.ansible/inventory). Remember, the step [Replace hosts and user variables](#replace-hosts-and-user-variables) already replaced the variables at this point. The playbook will be executed as `root` user using `sudo`. +Uses the host defined in [inventory](../.ansible/inventory). Remember, the step [Replace hosts and user variables](#replace-hosts-and-user-variables) already replaced the variables at this point. #### Delete old spt-items-api ```yml @@ -170,7 +174,7 @@ Uses the host defined in [inventory](../.ansible/inventory). Remember, the step path: "{{ lookup('env', 'SPT_ITEMS_PATH') }}" ``` Since the copy does not override the folder, this step takes care of it. \ -`SPT_ITEMS_PATH` is injected thanks to the pipeline level environment variables (see [Environment variables](#environment-variables)) +`SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook)) #### Copy the project ```yml @@ -189,7 +193,7 @@ Copies the whole project (frontend and backend) from the [api](../api) folder in dest: "{{ lookup('env', 'SPT_ITEMS_PATH') }}/.env" ``` Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [template for the PHP .env file](../.ansible/templates/.php_env.j2). \ -`SPT_ITEMS_PATH` is injected thanks to the pipeline level environment variables (see [Environment variables](#environment-variables)). \ +`SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook)) \ `SPT_ITEMS_HOSTNAME` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook)) #### Get JavaScript chunks name @@ -200,7 +204,7 @@ Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [temp register: find_output ``` Prepare a find of all JavaScript chunk files for the [app.blade.php.j2](../.ansible/templates/app.blade.php.j2) template. \ -`SPT_ITEMS_PATH` is injected thanks to the pipeline level environment variables (see [Environment variables](#environment-variables)). +`SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook)) #### Get file names from find output ```yml @@ -218,7 +222,7 @@ Splits the string containing the list of all JavaScript chunk files for the [app dest: "{{ lookup('env', 'SPT_ITEMS_PATH') }}/resources/views/app.blade.php" ``` Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [template for the PHP app.blade.php file](../.ansible/templates/app.blade.php.j2). \ -`SPT_ITEMS_PATH` is injected thanks to the pipeline level environment variables (see [Environment variables](#environment-variables)). +`SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook)). #### Download and install composer dependencies ```yml @@ -233,17 +237,16 @@ Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [temp - name: Reset files permissions file: path: "{{ lookup('env', 'SPT_ITEMS_PATH') }}" - owner: "{{ lookup('env', 'DEPLOYMENT_USER') }}" - group: www-data + owner: "{{ lookup('env', 'DEPLOY_USER') }}" + group: "{{ lookup('env', 'DEPLOY_USER_GROUP') }}" mode: 0774 recurse: yes ``` Permissions 0644: * user: read/write/execute - * group: read + * group: read/write/execute (for Nginx to execute the php as well as write in the Laravel logs) * other: read -`www-data` is hardcoded here but it should be the standard user for Apache and Nginx. \ -`SPT_ITEMS_PATH` is injected thanks to the pipeline level environment variables (see [Environment variables](#environment-variables)). +`SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook)). #### Initialize database ```yml From 67857b6b408d6435c388757d4670401f7f83d7c6 Mon Sep 17 00:00:00 2001 From: shirito Date: Thu, 4 Nov 2021 21:23:02 +0000 Subject: [PATCH 03/37] fix: Change items website hierarchy permissions (from 774 to 775) --- .ansible-items/playbook.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.ansible-items/playbook.yml b/.ansible-items/playbook.yml index a727a10..61212b4 100644 --- a/.ansible-items/playbook.yml +++ b/.ansible-items/playbook.yml @@ -38,7 +38,7 @@ path: "{{ lookup('env', 'SPT_ITEMS_PATH') }}" owner: "{{ lookup('env', 'DEPLOY_USER') }}" group: "{{ lookup('env', 'DEPLOY_USER_GROUP') }}" - mode: 0774 + mode: 0775 recurse: yes - name: Initialize database From a045a6010ffacc28ff04d3f9cd4c513e5bb55177 Mon Sep 17 00:00:00 2001 From: Mangiang Date: Sun, 14 Nov 2021 14:26:37 -0500 Subject: [PATCH 04/37] feat: Include item ID in url --- items/frontend/package.json | 17 +- items/frontend/src/index.tsx | 10 +- items/frontend/src/pages/InteractiveArea.tsx | 26 ++ items/frontend/src/pages/MainPage.tsx | 29 +- items/frontend/src/pages/PageNotFound.tsx | 44 +++ .../pages/mainPageComponents/SearchArea.tsx | 353 +++++++++--------- items/frontend/yarn.lock | 53 ++- 7 files changed, 320 insertions(+), 212 deletions(-) create mode 100644 items/frontend/src/pages/InteractiveArea.tsx create mode 100644 items/frontend/src/pages/PageNotFound.tsx diff --git a/items/frontend/package.json b/items/frontend/package.json index 70df6b5..32d3d53 100644 --- a/items/frontend/package.json +++ b/items/frontend/package.json @@ -13,8 +13,9 @@ "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", "cross-env": "^7.0.3", - "cypress": "^8.6.0", - "start-server-and-test": "^1.14.0" + "cypress": "9.0.0", + "start-server-and-test": "^1.14.0", + "typescript": "^4.1.2" }, "dependencies": { "@emotion/react": "^11.4.1", @@ -22,11 +23,12 @@ "@mui/icons-material": "^5.0.3", "@mui/material": "^5.0.3", "@mui/styles": "^5.0.1", + "history": "5", "react": "^17.0.2", "react-dom": "^17.0.2", "react-json-view": "^1.21.3", + "react-router-dom": "6", "react-scripts": "4.0.3", - "typescript": "^4.1.2", "web-vitals": "^1.0.1", "zustand": "^3.5.13" }, @@ -59,8 +61,13 @@ ] }, "nyc": { - "include":["src/**/*.ts", "src/**/*.tsx"], - "exclude": ["src/reportWebVitals.ts"], + "include": [ + "src/**/*.ts", + "src/**/*.tsx" + ], + "exclude": [ + "src/reportWebVitals.ts" + ], "excludeAfterRemap": true } } diff --git a/items/frontend/src/index.tsx b/items/frontend/src/index.tsx index 7998135..6031b20 100644 --- a/items/frontend/src/index.tsx +++ b/items/frontend/src/index.tsx @@ -4,13 +4,13 @@ import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( - - - , - document.getElementById('root') + + + , + document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); +reportWebVitals(); \ No newline at end of file diff --git a/items/frontend/src/pages/InteractiveArea.tsx b/items/frontend/src/pages/InteractiveArea.tsx new file mode 100644 index 0000000..34a79d7 --- /dev/null +++ b/items/frontend/src/pages/InteractiveArea.tsx @@ -0,0 +1,26 @@ +import {Box} from '@mui/material' +import {NavigationBreadcrumb} from './mainPageComponents/NavigationBreadcrumb' +import {SearchArea} from './mainPageComponents/SearchArea' +import {makeStyles} from "@mui/styles"; +import React from "react"; + +const useStyles = makeStyles(() => ({ + searchContainer: { + display: 'flex', + flexDirection: 'row', + flexGrow: 1, + padding: '2vh 2vw 1vh 2vw' + } +})) + +export const InteractiveArea = () => { + const classes = useStyles(); + return ( + <> + + + + + + ) +} diff --git a/items/frontend/src/pages/MainPage.tsx b/items/frontend/src/pages/MainPage.tsx index a5c3b33..4d92486 100644 --- a/items/frontend/src/pages/MainPage.tsx +++ b/items/frontend/src/pages/MainPage.tsx @@ -1,11 +1,13 @@ -import {Box, Theme} from '@mui/material' +import {Box} from '@mui/material' import {Footer} from '../components/Footer' import {Header} from '../components/Header' -import {NavigationBreadcrumb} from './mainPageComponents/NavigationBreadcrumb' -import {SearchArea} from './mainPageComponents/SearchArea' import {makeStyles} from "@mui/styles"; +import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom"; +import React from "react"; +import {InteractiveArea} from "./InteractiveArea"; +import {PageNotFound} from "./PageNotFound"; -const useStyles = makeStyles((theme: Theme) => ({ +const useStyles = makeStyles(() => ({ container: { background: 'background.default', display: 'flex', @@ -13,12 +15,6 @@ const useStyles = makeStyles((theme: Theme) => ({ flexGrow: 1, height: '100vh', maxheight: '100vh', - }, - searchContainer: { - display: 'flex', - flexDirection: 'row', - flexGrow: 1, - padding: '2vh 2vw 1vh 2vw' } })) @@ -28,10 +24,15 @@ export const MainPage = () => { <>
    - - - - + + + }> + }/> + + }/> + }/> + +