spt/Website
spt/Website
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of https://dev.sp-tarkov.com/SPT-AKI/Website
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Ereshkigal 2021-12-15 18:15:11 +01:00
commit 7b6c75d0e0
34 changed files with 909 additions and 570 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.ansible-items/inventory
View File

@ -1,2 +1,11 @@
[host]
{{ DEPLOYMENT_USER }}@{{ DEPLOY_HOSTNAME }} ansible_connection=ssh ansible_user={{ DEPLOYMENT_USER }}
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

8
.ansible-items/playbook.yml
View File

@ -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,9 +36,9 @@
- name: Reset files permissions
file:
path: "{{ lookup('env', 'SPT_ITEMS_PATH') }}"
owner: "{{ lookup('env', 'DEPLOYMENT_USER') }}"
group: "{{ lookup('env', 'DEPLOYMENT_USER_GROUP') }}"
mode: 0774
owner: "{{ lookup('env', 'DEPLOY_USER') }}"
group: "{{ lookup('env', 'DEPLOY_USER_GROUP') }}"
mode: 0775
recurse: yes
- name: Initialize database

148
.drone-docker.yml
View File

@ -8,66 +8,96 @@ concurrency:
trigger:
event:
- push
branch:
- master
- main
- development
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:
from_secret: deploy_username
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
- name: replace hosts and user variables
image: ubuntu:impish
environment:
SPT_ITEMS_HOSTNAME:
from_secret: spt_items_hostname
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
- 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
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend install
- yarn --cwd ./items/frontend build --pure-lockfile
- rm -rf ./items/api/public/static/*
- mv ./items/frontend/build/* ./items/api/public
- rm ./items/api/public/index.html
- name: install dependencies and build frontend
image: node:lts-alpine3.14
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend install
- yarn --cwd ./items/frontend build --pure-lockfile
- rm -rf ./items/api/public/static/*
- cp -r ./items/frontend/build/* ./items/api/public
- rm ./items/api/public/index.html
depends_on:
- replace hosts and user variables
- name: check ansible syntax
image: plugins/ansible:3
settings:
playbook: ./.ansible-items/playbook.yml
inventory: ./.ansible-items/inventory
galaxy: ./.ansible-items/requirements.yml
syntax_check: true
- 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
environment:
DEPLOY_HOSTNAME:
from_secret: deploy_hostname
SPT_ITEMS_HOSTNAME:
from_secret: spt_items_hostname
DEPLOYMENT_USER:
from_secret: deploy_username
DEPLOYMENT_USER_GROUP:
from_secret: deploy_user_group
SPT_ITEMS_PATH:
from_secret: deploy_path
when:
branch:
- master
- main
- name: frontend
image: nginx:1.21.4-alpine
commands:
- cp -r ./items/frontend/build/* /usr/share/nginx/html
- cp ./items/frontend/src/cypress/nginx_config/default.conf /etc/nginx/conf.d/default.conf
- nginx -g "daemon off;"
detach: true
depends_on:
- install dependencies and build frontend
- name: test frontend
image: cypress/browsers:node16.5.0-chrome94-ff93
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend cy:ci
depends_on:
- install dependencies and build frontend
- name: check ansible syntax
image: plugins/ansible:3
settings:
playbook: ./.ansible-items/playbook.yml
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
timeout: 60
verbose: 2
environment:
SPT_ITEMS_HOSTNAME:
from_secret: spt_items_hostname
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
depends_on:
- test frontend
when:
branch:
- master
- main

148
.drone-kubernetes.yml
View File

@ -8,66 +8,96 @@ concurrency:
trigger:
event:
- push
branch:
- master
- main
- development
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:
from_secret: deploy_username
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
- name: replace hosts and user variables
image: ubuntu:impish
environment:
SPT_ITEMS_HOSTNAME:
from_secret: spt_items_hostname
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
- 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
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend install
- yarn --cwd ./items/frontend build --pure-lockfile
- rm -rf ./items/api/public/static/*
- mv ./items/frontend/build/* ./items/api/public
- rm ./items/api/public/index.html
- name: install dependencies and build frontend
image: node:lts-alpine3.14
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend install
- yarn --cwd ./items/frontend build --pure-lockfile
- rm -rf ./items/api/public/static/*
- cp -r ./items/frontend/build/* ./items/api/public
- rm ./items/api/public/index.html
depends_on:
- replace hosts and user variables
- name: check ansible syntax
image: plugins/ansible:3
settings:
playbook: ./.ansible-items/playbook.yml
inventory: ./.ansible-items/inventory
galaxy: ./.ansible-items/requirements.yml
syntax_check: true
- 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
environment:
DEPLOY_HOSTNAME:
from_secret: deploy_hostname
SPT_ITEMS_HOSTNAME:
from_secret: spt_items_hostname
DEPLOYMENT_USER:
from_secret: deploy_username
DEPLOYMENT_USER_GROUP:
from_secret: deploy_user_group
SPT_ITEMS_PATH:
from_secret: deploy_path
when:
branch:
- master
- main
- name: frontend
image: nginx:1.21.4-alpine
commands:
- cp -r ./items/frontend/build/* /usr/share/nginx/html
- cp ./items/frontend/src/cypress/nginx_config/default.conf /etc/nginx/conf.d/default.conf
- nginx -g "daemon off;"
detach: true
depends_on:
- install dependencies and build frontend
- name: test frontend
image: cypress/browsers:node16.5.0-chrome94-ff93
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend cy:ci
depends_on:
- install dependencies and build frontend
- name: check ansible syntax
image: plugins/ansible:3
settings:
playbook: ./.ansible-items/playbook.yml
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
timeout: 60
verbose: 2
environment:
SPT_ITEMS_HOSTNAME:
from_secret: spt_items_hostname
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
depends_on:
- test frontend
when:
branch:
- master
- main

10
items/README.md
View File

@ -14,6 +14,7 @@
| deploy_username | The default username to use on the remote server <br> used by Ansible SSH | www-data |
| deploy_user_group | The default user group to use on the remote server <br> 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 <br> The key needs to be in RSA in "RSA PRIVATE KEY" format <br> The ssh publick key needs to already be in the user used in the remote server ~/.ssh/authorized_keys | -----BEGIN RSA PRIVATE KEY----- <br> The key <br> -----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
@ -31,9 +32,12 @@
## The pipeline summary
1. Each push will:
1. Builds the frontend
1. Move the build frontend in the backend `public` folder
1. IF Promoted to production, deploys to the server
1. Test the frontend
2. IF on `development` or `master`/`main` branch
1. Builds the frontend
3. IF pushed from `master` or `main` main branch
1. Move the build frontend in the backend `public` folder
2. Deploys to the server
## The pipeline walkthrough
see [Walkthrough.md](./docs/Walkthrough.md)

154
items/docs/Walkthrough.md
View File

@ -4,12 +4,12 @@
* [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)
* [Replace hosts and user variables](#replace-hosts-and-user-variables)
* [Build frontend](#build-frontend)
* [Install frontend dependencies and build it](#install-frontend-dependencies-and-build-it)
* [Run the frontend](#run-the-frontend)
* [Test frontend](#test-frontend)
* [Check ansible syntax](#check-ansible-syntax)
* [Apply ansible playbook](#apply-ansible-playbook)
* [Playbook definition](#playbook-definition)
@ -17,8 +17,8 @@
* [Copy the project](#copy-the-project)
* [Copy PHP env file](#copy-php-env-file)
* [Get JavaScript chunks name](#get-javascript-chunks-name)
* [Get file names from find output](#get-file-from-find-output)
* [Copy app.blade.php file](#copy-app-blade-php-file)
* [Get file names from find output](#get-file-names-from-find-output)
* [Copy app.blade.php file](#copy-appbladephp-file)
* [Download and install composer dependencies](#download-and-install-composer-dependencies)
## Overview
@ -26,10 +26,10 @@
* the backend is a [submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules) located in [api](../api) that points towards [https://dev.sp-tarkov.com/Rev/spt-items-api.git](https://dev.sp-tarkov.com/Rev/spt-items-api.git)
* the frontend is a [submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules) located in [frontend](../frontend) that points towards [https://dev.sp-tarkov.com/shirito/item-finder-website-frontend.git](https://dev.sp-tarkov.com/shirito/item-finder-website-frontend.git)
* There are two Ansible pipelines
* A docker pipeline [drone-docker.yml](../drone-docker.yml)
* A kubernetes pipeline [drone-kubernetes.yml](../drone-kubernetes.yml)
* All ansible playbook files are located in [.ansible](../.ansible)
* The documentation is located in [documentation](../documentation)
* A docker pipeline [drone-docker.yml](../../.drone-docker.yml)
* A kubernetes pipeline [drone-kubernetes.yml](../../.drone-kubernetes.yml)
* All ansible playbook files are located in [.ansible](../../.ansible-items)
* The documentation is located in [documentation](../docs)
## Pipeline definition
```yml
@ -46,54 +46,50 @@ 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:
event:
- push
branch:
- master
- main
- development
```
The pipeline is run on every push only on branches `master`, `main` and `development`. We want to check that every development on `development` branch is correct and deploy automatically when merged in `master`/`main`.
The pipeline is run on every push We want to check that every development on `development` branch is correct and deploy automatically when merged in `master`/`main`.
## Steps
### Replace hosts and user variables
```yml
- 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.
### Build frontend
### Install frontend dependencies and build it
```yml
- name: build frontend
- name: install dependencies and build frontend
image: node:lts-alpine3.14
commands:
- node -v
@ -102,15 +98,46 @@ The changes are never pushed and are discarded when the container/pod is termina
- yarn --cwd ./items/frontend install
- yarn --cwd ./items/frontend build --pure-lockfile
- rm -rf ./items/api/public/static/*
- mv ./items/frontend/build/* ./items/api/public
- cp -r ./items/frontend/build/* ./items/api/public
- rm ./items/api/public/index.html
depends_on:
- replace hosts and user variables
```
Executed on every push. \
Since the PHP backend serves the ReactJS frontend, the former is built and moved in the latter.
Notes:
* `yarn --cwd <path> <command>` executes the command in the specified file
* `rm -rf ./api/public/static/*` deletes the static files to make sure no old JavaScript files remain
* `rm ./api/public/index.html` ReactJS is bundled with a `index.html`. It is discarded to use [](https://dev.sp-tarkov.com/Rev/spt-items-api/raw/branch/master/resources/views/app.blade.php) instead.
* `yarn --cwd <path> <command>` executes the command in the specified file
* `rm -rf ./api/public/static/*` deletes the static files to make sure no old JavaScript files remain
* `rm ./api/public/invdex.html` ReactJS is bundled with a `index.html`. It is discarded to use [](https://dev.sp-tarkov.com/Rev/spt-items-api/raw/branch/master/resources/views/app.blade.php) instead.
### Run the frontend
```yaml
- name: frontend
image: nginx:1.21.4-alpine
commands:
- cp -r ./items/frontend/build/* /usr/share/nginx/html
- cp ./items/frontend/src/cypress/nginx_config/default.conf /etc/nginx/conf.d/default.conf
- nginx -g "daemon off;"
detach: true
depends_on:
- install dependencies and build frontend
```
Copies the frontend and the nginx conf in the container to be able to test it.
The frontend is run and `detach` is specified so the End-to-End tests (using cypress) can run on it
### Test frontend
```yaml
- name: test frontend
image: cypress/browsers:node16.5.0-chrome94-ff93
commands:
- node -v
- npm -v
- yarn --version
- yarn --cwd ./items/frontend cy:ci
depends_on:
- install dependencies and build frontend
```
Run frontend tests using Cypress
### Check ansible syntax
```yml
@ -121,9 +148,12 @@ Notes:
inventory: ./.ansible-items/inventory
galaxy: ./.ansible-items/requirements.yml
syntax_check: true
when:
branch:
- development
```
Executed on every push. \
Check the Ansible syntax in [playbook.yml](../.ansible/playbook.yml), [inventory](../.ansible/inventory) and [requirements.yml](../.ansible/requirements.yml). The check is executed on every push since we want to detect any error before validating the build using the promotion.
Check the Ansible syntax in [playbook.yml](../../.ansible-items/playbook.yml), [inventory](../../.ansible-items/inventory) and [requirements.yml](../../.ansible-items/requirements.yml). The check is executed on every push since we want to detect any error before validating the build using the promotion.
### Apply ansible playbook
```yml
@ -133,15 +163,21 @@ 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
depends_on:
- test frontend
when:
branch:
- master
@ -153,14 +189,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-items/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 +207,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
@ -188,8 +225,8 @@ Copies the whole project (frontend and backend) from the [api](../api) folder in
src: ./templates/.php-env.j2
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)). \
Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [template for the PHP .env file](../../.ansible-items/templates/.php-env.j2). \
`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
@ -199,8 +236,8 @@ Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [temp
cmd: find "{{ lookup('env', 'SPT_ITEMS_PATH') }}" -type f -name "*chunk.js" -printf "%f\n"
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)).
Prepare a find of all JavaScript chunk files for the [app.blade.php.j2](../../.ansible-items/templates/app.blade.php.j2) template. \
`SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook))
#### Get file names from find output
```yml
@ -208,7 +245,7 @@ Prepare a find of all JavaScript chunk files for the [app.blade.php.j2](../.ansi
set_fact:
chunk_list: "{{ find_output['stdout'].split('\n') }}"
```
Splits the string containing the list of all JavaScript chunk files for the [app.blade.php.j2](../.ansible/templates/app.blade.php.j2) template.
Splits the string containing the list of all JavaScript chunk files for the [app.blade.php.j2](../../.ansible-items/templates/app.blade.php.j2) template.
#### Copy app.blade.php file
```yml
@ -217,8 +254,8 @@ Splits the string containing the list of all JavaScript chunk files for the [app
src: ./templates/app.blade.php.j2
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)).
Uses [Jinja2](https://jinja2docs.readthedocs.io/en/stable/) to resolve the [template for the PHP app.blade.php file](../../.ansible-items/templates/app.blade.php.j2). \
`SPT_ITEMS_PATH` is injected in the environments properties (see [Apply ansible playbook](#apply-ansible-playbook)).
#### Download and install composer dependencies
```yml
@ -233,17 +270,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

1
items/frontend/cypress.json
View File

@ -1,5 +1,6 @@
{
"baseUrl": "http://localhost:3000",
"video": false,
"integrationFolder": "src/cypress/integration",
"fixtureFolder": "src/cypress/fixtures",
"supportFile": "src/cypress/support/index.js",

5
items/frontend/cypress/fixtures/example.json
View File

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

23
items/frontend/package.json
View File

@ -13,8 +13,10 @@
"@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",
"wait-on": "^6.0.0"
},
"dependencies": {
"@emotion/react": "^11.4.1",
@ -22,11 +24,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"
},
@ -36,8 +39,11 @@
"test:jest": "react-scripts test",
"cy:start:app": "cross-env BROWSER=none react-scripts -r @cypress/instrument-cra start",
"cy:start:wait": "start-server-and-test cy:start:app http://localhost:3000",
"cy:install": "cypress install",
"cy:verify": "cypress verify",
"cy:run:ci": "cross-env CYPRESS_BASE_URL=http://frontend cypress run --browser chrome",
"cy:open": "yarn run cy:start:wait -- \"cypress open\"",
"cy:run": "yarn run cy:start:wait -- \"cypress run\"",
"cy:ci": "yarn run wait-on http-get://frontend && yarn run cy:install && yarn run cy:verify && yarn run cy:run:ci",
"eject": "react-scripts eject"
},
"eslintConfig": {
@ -59,8 +65,13 @@
]
},
"nyc": {
"include":["src/**/*.ts", "src/**/*.tsx"],
"exclude": ["src/reportWebVitals.ts"],
"include": [
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"src/reportWebVitals.ts"
],
"excludeAfterRemap": true
}
}

BIN
items/frontend/public/favico.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

5
items/frontend/public/favico.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
items/frontend/public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

109
items/frontend/public/favicon.svg
View File

@ -1,109 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="512"
height="512"
viewBox="0 0 135.46666 135.46667"
version="1.1"
id="svg5"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
sodipodi:docname="Senko.svg"
inkscape:export-filename="G:\Official-SPT-Website\items\frontend\public\Senko.png"
inkscape:export-xdpi="6.5542703"
inkscape:export-ydpi="6.5542703"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:document-units="px"
showgrid="false"
units="px"
width="512px"
inkscape:zoom="2"
inkscape:cx="237.25"
inkscape:cy="308.25"
inkscape:window-width="1918"
inkscape:window-height="2071"
inkscape:window-x="1912"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="layer2" />
<defs
id="defs2" />
<g
inkscape:label="background"
inkscape:groupmode="layer"
id="layer1"
sodipodi:insensitive="true"
style="display:none;opacity:0.560261">
<image
width="135.46666"
height="135.46666"
preserveAspectRatio="none"
style="image-rendering:optimizeQuality"
xlink:href="file:///C:/Users/mangi/Downloads/cbimage.png"
id="image851"
x="2.7755576e-17"
y="0" />
</g>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Vectors">
<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 57.52693,14.843495 C 57.410877,12.661731 51.397926,11.268153 43.831419,8.2809548 45.338713,11.093505 47.068813,13.447161 44.596296,15.191748 38.636156,19.397174 29.955524,24.939364 15.868351,32.519676 26.725142,29.585137 55.838776,18.042907 57.52693,14.843495 Z"
id="path973"
sodipodi:nodetypes="ccscc" />
<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 6.7171919,59.288951 c 0,0 9.7889021,3.914164 12.6354121,3.564442 2.84651,-0.349722 24.019083,-6.879054 38.584354,-13.733298 0,0 -1.537979,-1.906423 -7.295931,-1.874468 -5.757953,0.03195 -20.211551,6.328008 -43.9238351,12.043324 z"
id="path973-69"
sodipodi:nodetypes="czczc" />
<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 48.122176,37.54381 c -1.232593,-1.803961 -6.907354,-3.051501 -14.924557,-1.673159 2.74906,1.620197 6.959357,3.657244 7.330694,6.817329 0.883551,7.519041 -3.70442,22.015324 -35.7508463,67.70939 C 30.583823,83.728004 50.961041,55.466892 48.122176,37.54381 Z"
id="path973-6"
sodipodi:nodetypes="ccscc" />
<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 46.036413,46.48147 c -1.232593,-1.803961 1.979358,4.244957 -6.037845,5.623299 0.223363,6.765135 0.503644,57.527511 -6.420323,69.679121 6.172239,6.35186 7.240267,5.73861 11.114865,8.58937 0.736474,-6.18316 3.15318,-65.968708 1.343303,-83.89179 z"
id="path973-6-0"
sodipodi:nodetypes="ccccc" />
<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 115.53919,30.415369 C 107.38986,24.808662 103.16969,52.222323 96.943881,65.21414 103.95471,56.4204 124.82782,36.805909 115.53919,30.415369 Z"
id="path973-9"
sodipodi:nodetypes="scs" />
<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 107.65215,125.52123 c 9.30104,0.3094 49.17635,3.11209 12.29815,-8.69842 -16.53053,-5.29402 -29.508741,-34.427468 -37.036766,-44.827756 0.75933,13.845435 18.534656,45.862106 24.738616,53.526176 z"
id="path973-9-6"
sodipodi:nodetypes="cscc" />
<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.23757px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 68.35759,73.019974 c 4.512042,-0.335257 8.147729,-24.553068 -3.641892,-33.568807 2.793719,8.335678 1.719792,16.407471 0.731829,19.226592 -0.845868,2.413656 -4.878742,14.920943 2.910063,14.342215 z"
id="path973-9-3"
sodipodi:nodetypes="scss" />
<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.23757px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 59.276543,85.32281 C 56.530494,88.91866 43.057416,72.918966 40.497215,69.39512 c 10.391021,2.965585 12.107326,5.273931 14.449451,6.853352 2.595558,1.750324 7.834568,4.485074 4.329877,9.074338 z"
id="path973-9-3-1"
sodipodi:nodetypes="scss" />
<path
style="fill:#000000;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
d="m 72.892707,6.7468749 c 7.980077,3.7070851 9.522752,3.9595281 10.517188,8.4997391 1.962552,8.960262 -2.931732,59.541875 -4.564063,65.782031 C 77.622774,85.704215 61.697785,111.71986 51.461458,126.33854 71.486723,113.82936 81.693839,86.666049 82.909268,83.971968 86.747627,75.463979 91.272126,13.970573 90.683182,11.835806 89.929245,9.1029796 81.563522,6.5477024 72.892707,6.7468749 Z"
id="path3332"
sodipodi:nodetypes="csscssc" />
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 5.8 KiB

6
items/frontend/public/index.html
View File

@ -3,8 +3,8 @@
<head>
<meta charset="utf-8" />
<!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
<link rel="icon" href="favicon.ico" />
<!-- <link rel="icon" href="%PUBLIC_URL%/favico.ico" /> -->
<link rel="icon" href="favico.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="item finder" />
@ -19,7 +19,7 @@
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
Unlike "/favico.ico" or "favico.ico", "%PUBLIC_URL%/favico.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`.
-->

4
items/frontend/public/manifest.json
View File

@ -3,12 +3,12 @@
"name": "Items Website for sp-tarkov",
"icons": [
{
"src": "favicon.ico",
"src": "favico.ico",
"sizes": "32x32",
"type": "image/x-icon"
},
{
"src": "favicon.svg",
"src": "favico.svg",
"type": "image/svg+xml",
"sizes": "64x64 96x96 128x128 160x160 192x192 512x512"
}

34
items/frontend/src/components/Footer.tsx
View File

@ -1,23 +1,23 @@
import { Box, Theme, Typography } from '@mui/material'
import { makeStyles } from '@mui/styles'
import {Box, Typography} from '@mui/material'
import {makeStyles} from '@mui/styles'
const useStyles = makeStyles((theme: Theme) => ({
footerHolder: {
display: 'flex',
flex: '0 1 3vh',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
padding: '0 10vw 0 10vw'
}
const useStyles = makeStyles(() => ({
footerHolder: {
display: 'flex',
flex: '0 1 3vh',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
padding: '0 10vw 0 10vw'
}
}))
export const Footer = () => {
const classes = useStyles()
const classes = useStyles()
return (
<Box className={classes.footerHolder}>
<Typography>SPT-Aki ©2021 Created by Rev and Shirito</Typography>
</Box>
)
return (
<Box className={classes.footerHolder}>
<Typography id={"footer"}>SPT-Aki ©2021 Created by Rev and Shirito</Typography>
</Box>
)
}

84
items/frontend/src/cypress/fixtures/condensed_milk.json Normal file
View File

@ -0,0 +1,84 @@
{
"item": {
"_id": "5734773724597737fd047c14",
"_name": "condensed_milk",
"_parent": "5448e8d04bdc2ddf718b4569",
"_props": {
"AllowSpawnOnLocations": [],
"AnimationVariantsNumber": 0,
"BackgroundColor": "orange",
"CanRequireOnRagfair": true,
"CanSellOnRagfair": true,
"ChangePriceCoef": 1,
"ConflictingItems": [],
"CreditsPrice": 24943,
"Description": "Condensed milk",
"DiscardingBlock": false,
"ExamineExperience": 20,
"ExamineTime": 1,
"ExaminedByDefault": false,
"ExtraSizeDown": 0,
"ExtraSizeForceAdd": false,
"ExtraSizeLeft": 0,
"ExtraSizeRight": 0,
"ExtraSizeUp": 0,
"FixedPrice": false,
"Height": 1,
"HideEntrails": false,
"IsAlwaysAvailableForInsurance": false,
"IsLockedafterEquip": false,
"IsUnbuyable": false,
"IsUndiscardable": false,
"IsUngivable": false,
"IsUnsaleable": false,
"ItemSound": "food_tin_can",
"LootExperience": 50,
"MaxResource": 1,
"MergesWithChildren": false,
"Name": "Condensed milk",
"NotShownInSlot": false,
"Prefab": {
"path": "assets/content/weapons/usable_items/item_food_condensed_milk/item_food_condensed_milk_loot.bundle",
"rcid": ""
},
"QuestItem": false,
"RagFairCommissionModifier": 1,
"Rarity": "Rare",
"RepairCost": 0,
"RepairSpeed": 0,
"SendToClient": false,
"ShortName": "Condensed milk",
"SpawnChance": 9,
"StackMaxSize": 1,
"StackObjectsCount": 1,
"StimulatorBuffs": "Buffs_food_condensed_milk",
"Unlootable": false,
"UnlootableFromSide": [],
"UnlootableFromSlot": "FirstPrimaryWeapon",
"UsePrefab": {
"path": "assets/content/weapons/usable_items/item_food_condensed_milk/item_food_condensed_milk_container.bundle",
"rcid": ""
},
"Weight": 0.4,
"Width": 1,
"effects_damage": [],
"effects_health": {
"Energy": {
"value": 75
},
"Hydration": {
"value": -65
}
},
"foodEffectType": "afterUse",
"foodUseTime": 4
},
"_proto": "5734770f24597738025ee254",
"_type": "Item"
},
"locale": {
"Description": "Condensed milk, also called \"Sguschyonka\" in Russia, once was a part of field ration for the Union soldiers in Civil War, but later reached unprecedented popularity in post-Soviet countries, becoming almost a staple product. Canned, it can be stored for decades and remain just as sweet, tasty and nutritious.",
"Name": "Condensed milk",
"ShortName": "Cond. milk"
}
}

12
items/frontend/src/cypress/integration/dark-mode-toggle.spec.tsx
View File

@ -4,7 +4,7 @@ describe('Dark Mode Toggle', () => {
beforeEach(() => {
cy.window()
.its("sessionStorage")
.invoke("removeItem", "items.sp-tarkov.com-locales");
.invoke("removeItem", "db.sp-tarkov.com-locales");
cy.intercept(
'**/api/locales',
@ -35,7 +35,7 @@ describe('Dark Mode Toggle', () => {
before(() => {
cy.visit('/', {
onBeforeLoad: function (window) {
window.localStorage.removeItem('items.sp-tarkov.com-prefered-color-scheme')
window.localStorage.removeItem('db.sp-tarkov.com-prefered-color-scheme')
}
})
})
@ -55,7 +55,7 @@ describe('Dark Mode Toggle', () => {
before(() => {
cy.visit('/', {
onBeforeLoad: function (window) {
window.localStorage.setItem('items.sp-tarkov.com-prefered-color-scheme', 'light')
window.localStorage.setItem('db.sp-tarkov.com-prefered-color-scheme', 'light')
}
})
})
@ -74,7 +74,7 @@ describe('Dark Mode Toggle', () => {
before(() => {
cy.visit('/', {
onBeforeLoad: function (window) {
window.localStorage.setItem('items.sp-tarkov.com-prefered-color-scheme', 'dark')
window.localStorage.setItem('db.sp-tarkov.com-prefered-color-scheme', 'dark')
}
})
})
@ -94,7 +94,7 @@ describe('Dark Mode Toggle', () => {
before(() => {
cy.visit('/', {
onBeforeLoad: function (window) {
window.localStorage.setItem('items.sp-tarkov.com-prefered-color-scheme', 'light')
window.localStorage.setItem('db.sp-tarkov.com-prefered-color-scheme', 'light')
}
})
})
@ -123,7 +123,7 @@ describe('Dark Mode Toggle', () => {
before(() => {
cy.visit('/', {
onBeforeLoad: function (window) {
window.localStorage.setItem('items.sp-tarkov.com-prefered-color-scheme', 'dark')
window.localStorage.setItem('db.sp-tarkov.com-prefered-color-scheme', 'dark')
}
})
})

4
items/frontend/src/cypress/integration/footer.spec.tsx
View File

@ -4,7 +4,7 @@ describe('Footer', () => {
it('footer should be visible', () => {
cy.visit('/');
cy.get('.makeStyles-footerHolder-63 > .MuiTypography-root').should('be.visible')
cy.get('.makeStyles-footerHolder-63 > .MuiTypography-root').should('have.text', 'SPT-Aki ©2021 Created by Rev and Shirito');
cy.get('#footer').should('be.visible')
cy.get('#footer').should('have.text', 'SPT-Aki ©2021 Created by Rev and Shirito');
})
})

2
items/frontend/src/cypress/integration/header.spec.tsx
View File

@ -4,7 +4,7 @@ describe('Header', () => {
beforeEach(() => {
cy.window()
.its("sessionStorage")
.invoke("removeItem", "items.sp-tarkov.com-locales");
.invoke("removeItem", "db.sp-tarkov.com-locales");
cy.intercept(
'**/api/locales',

6
items/frontend/src/cypress/integration/json-theme.spec.tsx
View File

@ -4,7 +4,7 @@ describe('Json Theme', () => {
beforeEach(() => {
cy.window()
.its("sessionStorage")
.invoke("removeItem", "items.sp-tarkov.com-locales");
.invoke("removeItem", "db.sp-tarkov.com-locales");
cy.intercept(
'**/api/locales',
@ -35,7 +35,7 @@ describe('Json Theme', () => {
before(() => {
cy.visit('/', {
onBeforeLoad: function (window) {
window.localStorage.removeItem('items.sp-tarkov.com-prefered-json-theme')
window.localStorage.removeItem('db.sp-tarkov.com-prefered-json-theme')
}
});
})
@ -54,7 +54,7 @@ describe('Json Theme', () => {
before(() => {
cy.visit('/', {
onBeforeLoad: function (window) {
window.localStorage.setItem('items.sp-tarkov.com-prefered-json-theme', 'eighties')
window.localStorage.setItem('db.sp-tarkov.com-prefered-json-theme', 'eighties')
}
});
})

8
items/frontend/src/cypress/integration/locale-select.spec.tsx
View File

@ -4,7 +4,7 @@ describe('Locale select', () => {
beforeEach(() => {
cy.window()
.its("sessionStorage")
.invoke("removeItem", "items.sp-tarkov.com-locales");
.invoke("removeItem", "db.sp-tarkov.com-locales");
cy.intercept(
'**/api/locales',
@ -31,7 +31,7 @@ describe('Locale select', () => {
[]).as('getLocalesWithoutData');
cy.visit('/', {
onBeforeLoad: function (window) {
window.localStorage.removeItem('items.sp-tarkov.com-prefered-locale')
window.localStorage.removeItem('db.sp-tarkov.com-prefered-locale')
}
})
})
@ -60,7 +60,7 @@ describe('Locale select', () => {
before(() => {
cy.visit('/', {
onBeforeLoad: function (window) {
window.localStorage.removeItem('items.sp-tarkov.com-prefered-locale')
window.localStorage.removeItem('db.sp-tarkov.com-prefered-locale')
}
})
})
@ -77,7 +77,7 @@ describe('Locale select', () => {
before(() => {
cy.visit('/', {
onBeforeLoad: function (window) {
window.localStorage.setItem('items.sp-tarkov.com-prefered-locale', 'locale2')
window.localStorage.setItem('db.sp-tarkov.com-prefered-locale', 'locale2')
}
})
})

48
items/frontend/src/cypress/integration/search.spec.tsx
View File

@ -1,11 +1,40 @@
import condensedMilk from "../fixtures/condensed_milk.json";
export {};
describe('Search area', ()=>{
beforeEach(() => {
cy.intercept('GET','**/api/locales', {
cy.intercept({
method: 'GET',
url: '**/api/locales'
}, {
statusCode: 200,
body: ['locale1', 'locale2']
});
}).as('getLocalesWithoutData');
cy.intercept({
method: 'GET',
url: '**/api/item?*'
}, {
statusCode: 200,
body: condensedMilk
})
cy.intercept({
method: 'POST',
url: '**/api/search*'
}, {
statusCode: 200,
body: []
})
cy.intercept({
method: 'GET',
url: '**/api/item/hierarchy*'
}, {
statusCode: 200,
body: condensedMilk
})
cy.visit('/');
})
@ -31,4 +60,19 @@ describe('Search area', ()=>{
.should('be.visible')
.contains('p', 'No data to display');
})
describe('Searching', () => {
it('Search using ID displays the json with locale', () => {
cy.get('#search-autocomplete')
.type(condensedMilk.item._id)
.type('{ENTER}')
.should('have.value', condensedMilk.locale.Name)
cy.get(`.react-json-view .object-key-val > .pushed-content > .object-content > .variable-row > .variable-value > div > .string-value:contains("${condensedMilk.item._id}")`)
.should('have.length', 1)
.invoke('text')
.should('eq', `"${condensedMilk.item._id}"`);
cy.get(`.react-json-view .object-key-val > .pushed-content > .object-content > .variable-row > .variable-value > div > .string-value:contains("${condensedMilk.locale.Name}")`)
.should('have.length.above', 0);
})
})
})

82
items/frontend/src/cypress/integration/url-check.spec.tsx Normal file
View File

@ -0,0 +1,82 @@
import condensedMilk from '../fixtures/condensed_milk.json'
export {};
describe('Url check', () => {
beforeEach(() => {
cy.window()
.its("sessionStorage")
.invoke("removeItem", "db.sp-tarkov.com-locales");
cy.intercept({
method: 'GET',
url: '**/api/locales'
}, {
statusCode: 200,
body: []
}).as('getLocalesWithoutData');
cy.intercept({
method: 'GET',
url: '**/api/item?*'
}, {
statusCode: 200,
body: condensedMilk
})
cy.intercept({
method: 'POST',
url: '**/api/search*'
}, {
statusCode: 200,
body: []
})
cy.intercept({
method: 'GET',
url: '**/api/item/hierarchy*'
}, {
statusCode: 200,
body: condensedMilk
})
})
afterEach(() => {
cy.clearLocalStorage();
})
describe('Check page not found', () => {
it('Invalid url should redirect to page not found', () => {
cy.visit('/ABC')
cy.get('#not-found-message').contains("This page does not exist !");
})
})
describe('Check root redirection', () => {
it('Root should redirect to search', () => {
cy.visit('/')
cy.url().should("include", "/search");
})
})
describe('Check url changes with search input', () => {
it('ID in url applies search', () => {
cy.visit(`/search/${condensedMilk.item._id}`);
cy.get('#search-autocomplete').should('have.value', condensedMilk.locale.Name)
})
it('Search reflects in url', () => {
cy.visit(`/`);
cy.get('#search-autocomplete')
.type(condensedMilk.item._id)
.type('{ENTER}')
.should('have.value', condensedMilk.locale.Name);
cy.url().should("include", `/search/${condensedMilk.item._id}`);
cy.get(`.react-json-view .object-key-val > .pushed-content > .object-content > .variable-row > .variable-value > div > .string-value:contains("${condensedMilk.item._id}")`)
.should('have.length', 1)
.invoke('text')
.should('eq', `"${condensedMilk.item._id}"`);
})
})
})

15
items/frontend/src/cypress/nginx_config/default.conf Normal file
View File

@ -0,0 +1,15 @@
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}

16
items/frontend/src/dataaccess/ItemBackend.ts
View File

@ -4,12 +4,16 @@ import { ItemData } from '../dto/ItemData';
import { useGlobalState } from '../state/GlobalState';
const handleFetch = async (url: string, init?: RequestInit | undefined): Promise<any | null> => {
const resp = await fetch(url, { ...init, mode: 'cors' })
if (resp.status === 200) {
const jsonResponse = await resp.json();
return jsonResponse !== undefined ? jsonResponse : null;
} else if (resp.status >= 400) {
console.error(resp)
try {
const resp = await fetch(url, { ...init, mode: 'cors' })
if (resp.status === 200) {
const jsonResponse = await resp.json();
return jsonResponse !== undefined ? jsonResponse : null;
} else if (resp.status >= 400) {
console.warn(resp)
}
}catch (e) {
console.warn(e)
}
return null;
}

10
items/frontend/src/dataaccess/SaveKeys.ts
View File

@ -1,10 +1,10 @@
export enum LocalStorageKeys {
PREFERED_COLOR_SCHEME = 'items.sp-tarkov.com-prefered-color-scheme',
PREFERED_JSON_THEME = 'items.sp-tarkov.com-prefered-json-theme',
PREFERED_LOCALE = 'items.sp-tarkov.com-prefered-locale'
PREFERED_COLOR_SCHEME = 'db.sp-tarkov.com-prefered-color-scheme',
PREFERED_JSON_THEME = 'db.sp-tarkov.com-prefered-json-theme',
PREFERED_LOCALE = 'db.sp-tarkov.com-prefered-locale'
}
export enum SessionStorageKeys {
LOCALES = 'items.sp-tarkov.com-locales',
ITEMS_HIERARCHY = 'items.sp-tarkov.com-items-hierarchy',
LOCALES = 'db.sp-tarkov.com-locales',
ITEMS_HIERARCHY = 'db.sp-tarkov.com-items-hierarchy',
}

8
items/frontend/src/index.tsx
View File

@ -4,10 +4,10 @@ import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function

26
items/frontend/src/pages/InteractiveArea.tsx Normal file
View File

@ -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 (
<>
<NavigationBreadcrumb/>
<Box className={classes.searchContainer}>
<SearchArea/>
</Box>
</>
)
}

29
items/frontend/src/pages/MainPage.tsx
View File

@ -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 = () => {
<>
<Box className={classes.container}>
<Header/>
<NavigationBreadcrumb/>
<Box className={classes.searchContainer}>
<SearchArea/>
</Box>
<BrowserRouter>
<Routes>
<Route path="/search" element={<InteractiveArea/>}/>
<Route path="/search/:id" element={<InteractiveArea/>}/>
<Route path="/404" element={<PageNotFound />}/>
<Route path="/" element={<Navigate replace to="/search"/>}/>
<Route path="*" element={<Navigate replace to="/404" />} />
</Routes>
</BrowserRouter>
<Footer/>
</Box>
</>

44
items/frontend/src/pages/PageNotFound.tsx Normal file
View File

@ -0,0 +1,44 @@
import {Box, Theme, Typography} from '@mui/material'
import {NavigationBreadcrumb} from './mainPageComponents/NavigationBreadcrumb'
import {makeStyles} from "@mui/styles";
import React from "react";
const useStyles = makeStyles((theme: Theme) => ({
searchContainer: {
display: 'flex',
flexDirection: 'row',
flexGrow: 1,
padding: '2vh 2vw 1vh 2vw'
},
notFoundAreaHolder: {
display: 'flex',
flexGrow: 1,
flexDirection: 'column',
background: theme.palette.background.paper,
padding: '2vh 2vw 2vh 2vw',
},
notFoundContainer: {
display: 'flex',
flexGrow: 1,
flexDirection: 'column',
width: "100%",
alignItems: "center",
paddingTop: "10vh"
},
}))
export const PageNotFound = () => {
const classes = useStyles();
return (
<>
<NavigationBreadcrumb/>
<Box className={classes.searchContainer}>
<Box className={classes.notFoundAreaHolder}>
<Box className={classes.notFoundContainer}>
<Typography id={'not-found-message'} variant={"h3"}>This page does not exist !</Typography>
</Box>
</Box>
</Box>
</>
)
}

355
items/frontend/src/pages/mainPageComponents/SearchArea.tsx
View File

@ -1,197 +1,202 @@
import { SyntheticEvent, useCallback, useEffect, useState } from 'react'
import {
Autocomplete,
Box,
CircularProgress,
Theme,
Typography,
} from '@mui/material'
import { makeStyles } from '@mui/styles'
import {SyntheticEvent, useCallback, useEffect, useState} from 'react'
import {Autocomplete, Box, CircularProgress, Theme, Typography,} from '@mui/material'
import {makeStyles} from '@mui/styles'
import TextField from '@mui/material/TextField'
import ReactJson from 'react-json-view'
import {
getItem,
getItemHierarchy,
searchItem,
} from '../../dataaccess/ItemBackend'
import { ItemOption } from '../../dto/ItemOption'
import { useGlobalState } from '../../state/GlobalState'
import {getItem, getItemHierarchy, searchItem,} from '../../dataaccess/ItemBackend'
import {ItemOption} from '../../dto/ItemOption'
import {useGlobalState} from '../../state/GlobalState'
import {useNavigate, useParams} from "react-router-dom";
interface IItemOption {
id?: string
name?: string
shortName?: string
id?: string
name?: string
shortName?: string
}
const useStyles = makeStyles((theme: Theme) => ({
searchAreaHolder: {
display: 'flex',
flexGrow: 1,
flexDirection: 'column',
background: theme.palette.background.paper,
padding: '2vh 2vw 2vh 2vw',
},
jsonHolder: {
display: 'flex',
flexGrow: 1,
alignItems: 'center',
flexDirection: 'column',
background: theme.palette.background.paper,
maxHeight: '80vh',
},
autocomplete: {},
searchAreaHolder: {
display: 'flex',
flexGrow: 1,
flexDirection: 'column',
background: theme.palette.background.paper,
padding: '2vh 2vw 2vh 2vw',
},
jsonHolder: {
display: 'flex',
flexGrow: 1,
alignItems: 'center',
flexDirection: 'column',
background: theme.palette.background.paper,
maxHeight: '80vh',
},
autocomplete: {},
}))
export const SearchArea = () => {
const classes = useStyles()
const preferedLocale = useGlobalState((state) => state.preferedLocale)
const preferedJsonViewerTheme = useGlobalState(
useCallback((state) => state.preferedJsonViewerTheme, []),
)
const [searchInputState, setSearchInput] = useGlobalState((state) => [
state.searchInput,
state.setSearchInput,
])
const [setHierarchy, initHierarchy] = useGlobalState((state) => [state.setHierarchy, state.initHierarchy])
const [selectedItem, setSelectedItem] = useGlobalState((state) => [
state.selectedItem,
state.setSelectedItem,
])
const [selectOptions, setSelecteOptions] = useState<ItemOption[]>([])
const [isbusy, setIsBusy] = useState<boolean>(false)
const searchThreshold = 3
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
}))
setSelecteOptions(options ? options : [])
}
const handleIDInput = useCallback(async (input: string) => {
const itemJson = await getItem(input, preferedLocale)
if (!itemJson) {
setSelectedItem(undefined)
setSearchInput('')
return;
}
setSelectedItem(itemJson)
const itemObj = {
id: itemJson.item._id,
name: itemJson.locale.Name ? itemJson.locale.Name : itemJson.item._name,
shortName: itemJson.locale.ShortName
}
setSelecteOptions([itemObj])
setSearchInput(itemObj.name)
// Update hierachy
const itemHierarchy = await getItemHierarchy(
itemJson.item,
preferedLocale,
const classes = useStyles()
const params = useParams();
const navigate = useNavigate();
const preferedLocale = useGlobalState((state) => state.preferedLocale)
const preferedJsonViewerTheme = useGlobalState(
useCallback((state) => state.preferedJsonViewerTheme, []),
)
setHierarchy(itemHierarchy ? itemHierarchy : {})
// eslint-disable-next-line
}, []) // Need to only be created on startup
const [searchInputState, setSearchInput] = useGlobalState((state) => [
state.searchInput,
state.setSearchInput,
])
const [setHierarchy, initHierarchy] = useGlobalState((state) => [state.setHierarchy, state.initHierarchy])
const [selectedItem, setSelectedItem] = useGlobalState((state) => [
state.selectedItem,
state.setSelectedItem,
])
const [selectOptions, setSelecteOptions] = useState<ItemOption[]>([])
const [isbusy, setIsBusy] = useState<boolean>(false)
const searchThreshold = 3
useEffect(() => initHierarchy(), [initHierarchy])
const handleNameInput = useCallback(async (input: string) => {
const searchResults = await searchItem(input, preferedLocale)
const options = searchResults?.map((res) => ({
id: res.item._id,
name: res.locale.Name ? res.locale.Name : res.item._name,
shortName: JSON.stringify(res.locale.ShortName)
}))
setSelecteOptions(options ? options : [])
}, [preferedLocale])
useEffect(() => {
if (searchInputState && searchInputState.match(/([a-z0-9]{24})/)) {
handleIDInput(searchInputState)
}
}, [handleIDInput, searchInputState])
const handleIDInput = useCallback(async (input: string) => {
const itemJson = await getItem(input, preferedLocale)
if (!itemJson) {
setSelectedItem(undefined)
setSearchInput('')
return;
}
const handleInput = async (input: string) => {
if (!input || input.length < searchThreshold || isbusy) {
setSelectedItem(undefined)
setSelecteOptions([])
setIsBusy(false)
return
}
setIsBusy(true)
setSelectedItem(itemJson)
const itemObj = {
id: itemJson.item._id,
name: itemJson.locale.Name ? itemJson.locale.Name : itemJson.item._name,
shortName: itemJson.locale.ShortName
}
setSelecteOptions([itemObj])
setSearchInput(itemObj.name)
if (input.match(/([a-z0-9]{24})/)) await handleIDInput(input)
else await handleNameInput(input)
// Update hierachy
const itemHierarchy = await getItemHierarchy(
itemJson.item,
preferedLocale,
)
setHierarchy(itemHierarchy ? itemHierarchy : {})
// eslint-disable-next-line
}, []) // Need to only be created on startup
setIsBusy(false)
}
useEffect(() => initHierarchy(), [initHierarchy])
const formatDisplayItems = () => {
// If loading
if (isbusy) return <CircularProgress size={100} />
useEffect(()=>{
if (selectedItem){
navigate(`/search/${selectedItem.item._id}`)
}
},[selectedItem, navigate])
// If finished loading
if (selectedItem){
return (
<ReactJson
src={selectedItem}
theme={preferedJsonViewerTheme}
style={{
marginTop: '2vh',
width: '100%',
overflowY: 'auto',
display: 'flex',
}}
/>
)
}
else return <Typography id='search-no-data'>No data to display</Typography>
}
useEffect(() => {
if (searchInputState && searchInputState.match(/([a-z0-9]{24})/)) {
handleIDInput(searchInputState)
}
}, [handleIDInput, searchInputState])
const findOptionValue = (option: ItemOption, value: ItemOption): boolean => {
return option.name?.toLocaleLowerCase() === value.name?.toLocaleLowerCase()
|| option.id?.toLocaleLowerCase() === value.id?.toLocaleLowerCase()
|| option.shortName?.toLocaleLowerCase() === value.shortName?.toLocaleLowerCase()
}
const handleInput = useCallback(async (input: string) => {
if (!input || input.length < searchThreshold || isbusy) {
setSelectedItem(undefined)
setSelecteOptions([])
setIsBusy(false)
return
}
setIsBusy(true)
return (
<Box className={classes.searchAreaHolder}>
<Autocomplete
id='search-autocomplete'
options={selectOptions.map((elt) => ({name: elt.name, shortName: elt.shortName, id: elt.id}))}
getOptionLabel={(option)=> option.name ? option.name : option.id}
isOptionEqualToValue={(option, value) => findOptionValue(option, value)}
open={!isbusy && searchInputState.length >= searchThreshold && (searchInputState !== selectedItem?.locale.Name && searchInputState !== selectedItem?.item._name)}
className={classes.autocomplete}
inputValue={searchInputState ? searchInputState : ''}
onInputChange={async (evt: SyntheticEvent, newValue: string) => {
if (!evt) return
setSelectedItem(undefined)
setSearchInput(newValue)
await handleInput(newValue.trim())
}}
value={(()=>{
const selectedOption = selectOptions.find(elt => elt.id === searchInputState || elt.name === searchInputState);
return selectedOption ? selectedOption : null;
})()}
onChange={async (event: SyntheticEvent, newValue: IItemOption | null) => {
if (newValue) {
const selectedOption = selectOptions.find(
(elt) => elt.name === newValue.name,
if (input.match(/([a-z0-9]{24})/)) await handleIDInput(input)
else await handleNameInput(input)
setIsBusy(false)
}, [handleIDInput, handleNameInput, isbusy, setSelectedItem])
useEffect(() => {
if (!searchInputState && params.id) {
const newId = params.id.trim();
console.log(newId);
setSearchInput(newId);
(async () => await handleInput(newId))();
}
}, [params, searchInputState, setSearchInput, handleInput, navigate])
const formatDisplayItems = () => {
// If loading
if (isbusy) return <CircularProgress size={100}/>
// If finished loading
if (selectedItem) {
return (
<ReactJson
src={selectedItem}
theme={preferedJsonViewerTheme}
style={{
marginTop: '2vh',
width: '100%',
overflowY: 'auto',
display: 'flex',
}}
/>
)
if (selectedOption) await handleIDInput(selectedOption.id)
}
}}
renderInput={(params) =>(
<TextField {...params} label="Search by name or ID" />
)}
renderOption={(props, option, state) => (
<li {...props} key={option.id}><Typography>{option.name}</Typography></li>
)}
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()))
})}
filterSelectedOptions
/>
<Box className={classes.jsonHolder}>{formatDisplayItems()}</Box>
</Box>
)
} else return <Typography id='search-no-data'>No data to display</Typography>
}
const findOptionValue = (option: ItemOption, value: ItemOption): boolean => {
return option.name?.toLocaleLowerCase() === value.name?.toLocaleLowerCase()
|| option.id?.toLocaleLowerCase() === value.id?.toLocaleLowerCase()
|| option.shortName?.toLocaleLowerCase() === value.shortName?.toLocaleLowerCase()
}
return (
<Box className={classes.searchAreaHolder}>
<Autocomplete
id='search-autocomplete'
options={selectOptions.map((elt) => ({name: elt.name, shortName: elt.shortName, id: elt.id}))}
getOptionLabel={(option) => option.name ? option.name : option.id}
isOptionEqualToValue={(option, value) => findOptionValue(option, value)}
open={!isbusy && searchInputState.length >= searchThreshold && (searchInputState !== selectedItem?.locale.Name && searchInputState !== selectedItem?.item._name)}
className={classes.autocomplete}
inputValue={searchInputState ? searchInputState : ''}
onInputChange={async (evt: SyntheticEvent, newValue: string) => {
if (!evt) return
setSelectedItem(undefined)
setSearchInput(newValue)
await handleInput(newValue.trim())
}}
value={(() => {
const selectedOption = selectOptions.find(elt => elt.id === searchInputState || elt.name === searchInputState);
return selectedOption ? selectedOption : null;
})()}
onChange={async (event: SyntheticEvent, newValue: IItemOption | null) => {
if (newValue) {
const selectedOption = selectOptions.find(
(elt) => elt.name === newValue.name,
)
if (selectedOption) await handleIDInput(selectedOption.id)
}
}}
renderInput={(params) => (
<TextField {...params} label="Search by name or ID"/>
)}
renderOption={(props, option ) => (
<li {...props} key={option.id}><Typography>{option.name}</Typography></li>
)}
filterOptions={(options, state) => options.filter(elt => {
return (elt.name?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase())
|| elt.id?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase())
|| elt.shortName?.toLocaleLowerCase().includes(state.inputValue.toLocaleLowerCase()))
})}
filterSelectedOptions
/>
<Box className={classes.jsonHolder}>{formatDisplayItems()}</Box>
</Box>
)
}

3
items/frontend/src/state/GlobalState.ts
View File

@ -57,8 +57,7 @@ export const useGlobalState = create<GlobalState>((set) => ({
localesList: [],
refreshLocalesList: async () => {
const locales = sessionStorage.getItem(SessionStorageKeys.LOCALES);
const localesList = locales !== null && locales !== undefined && locales !== 'undefined' ? JSON.parse(locales) : await getLocaleList()
console.log(localesList)
const localesList = locales !== null && locales !== undefined && locales !== 'undefined' && locales !== 'null' ? JSON.parse(locales) : await getLocaleList()
if (!locales) sessionStorage.setItem(SessionStorageKeys.LOCALES, JSON.stringify(localesList ? localesList : null))
set((_state) => ({ localesList: localesList ? localesList : [] }))
},

55
items/frontend/yarn.lock
View File

@ -1282,6 +1282,13 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.7.6":
version "7.16.3"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/template@^7.10.4", "@babel/template@^7.15.4", "@babel/template@^7.3.3", "@babel/template@^7.4.4":
version "7.15.4"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.15.4.tgz#51898d35dcf3faa670c4ee6afcfd517ee139f194"
@ -1385,10 +1392,10 @@
debug "4.2.0"
find-yarn-workspace-root "^2.0.0"
"@cypress/request@^2.88.6":
version "2.88.6"
resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.6.tgz#a970dd675befc6bdf8a8921576c01f51cc5798e9"
integrity sha512-z0UxBE/+qaESAHY9p9sM2h8Y4XqtsbDCt0/DPOrqA/RZgKi4PkxdpXyK4wCCnSk1xHqWHZZAE+gV6aDAR6+caQ==
"@cypress/request@^2.88.7":
version "2.88.7"
resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.7.tgz#386d960ab845a96953723348088525d5a75aaac4"
integrity sha512-FTULIP2rnDJvZDT9t6B4nSfYR40ue19tVmv3wUcY05R9/FPCoMl1nAPJkzWzBCo7ltVn5ThQTbxiMoGBN7k0ig==
dependencies:
aws-sign2 "~0.7.0"
aws4 "^1.8.0"
@ -4876,12 +4883,12 @@ cyclist@^1.0.1:
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
cypress@^8.6.0:
version "8.6.0"
resolved "https://registry.yarnpkg.com/cypress/-/cypress-8.6.0.tgz#8d02fa58878b37cfc45bbfce393aa974fa8a8e22"
integrity sha512-F7qEK/6Go5FsqTueR+0wEw2vOVKNgk5847Mys8vsWkzPoEKdxs+7N9Y1dit+zhaZCLtMPyrMwjfA53ZFy+lSww==
cypress@9.0.0:
version "9.0.0"
resolved "https://registry.yarnpkg.com/cypress/-/cypress-9.0.0.tgz#8c496f7f350e611604cc2f77b663fb81d0c235d2"
integrity sha512-/93SWBZTw7BjFZ+I9S8SqkFYZx7VhedDjTtRBmXO0VzTeDbmxgK/snMJm/VFjrqk/caWbI+XY4Qr80myDMQvYg==
dependencies:
"@cypress/request" "^2.88.6"
"@cypress/request" "^2.88.7"
"@cypress/xvfb" "^1.2.4"
"@types/node" "^14.14.31"
"@types/sinonjs__fake-timers" "^6.0.2"
@ -4916,7 +4923,6 @@ cypress@^8.6.0:
ospath "^1.2.2"
pretty-bytes "^5.6.0"
proxy-from-env "1.0.0"
ramda "~0.27.1"
request-progress "^3.0.0"
supports-color "^8.1.1"
tmp "~0.2.1"
@ -6802,6 +6808,13 @@ hex-color-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
history@5, history@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/history/-/history-5.1.0.tgz#2e93c09c064194d38d52ed62afd0afc9d9b01ece"
integrity sha512-zPuQgPacm2vH2xdORvGGz1wQMuHSIB56yNAy5FnLuwOwgSYyPKptJtcMm6Ev+hRGeS+GzhbmRacHzvlESbFwDg==
dependencies:
"@babel/runtime" "^7.7.6"
hmac-drbg@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@ -10838,11 +10851,6 @@ raf@^3.4.1:
dependencies:
performance-now "^2.1.0"
ramda@~0.27.1:
version "0.27.1"
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.1.tgz#66fc2df3ef873874ffc2da6aa8984658abacf5c9"
integrity sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw==
randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@ -10969,6 +10977,21 @@ react-refresh@^0.8.3:
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
react-router-dom@6:
version "6.0.2"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.0.2.tgz#860cefa697b9d4965eced3f91e82cdbc5995f3ad"
integrity sha512-cOpJ4B6raFutr0EG8O/M2fEoyQmwvZWomf1c6W2YXBZuFBx8oTk/zqjXghwScyhfrtnt0lANXV2182NQblRxFA==
dependencies:
history "^5.1.0"
react-router "6.0.2"
react-router@6.0.2:
version "6.0.2"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.0.2.tgz#bd2b0fa84fd1d152671e9f654d9c0b1f5a7c86da"
integrity sha512-8/Wm3Ed8t7TuedXjAvV39+c8j0vwrI5qVsYqjFr5WkJjsJpEvNSoLRUbtqSEYzqaTUj1IV+sbPJxvO+accvU0Q==
dependencies:
history "^5.1.0"
react-scripts@4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"
@ -13172,7 +13195,7 @@ w3c-xmlserializer@^2.0.0:
dependencies:
xml-name-validator "^3.0.0"
wait-on@6.0.0:
wait-on@6.0.0, wait-on@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-6.0.0.tgz#7e9bf8e3d7fe2daecbb7a570ac8ca41e9311c7e7"
integrity sha512-tnUJr9p5r+bEYXPUdRseolmz5XqJTTj98JgOsfBn7Oz2dxfE2g3zw1jE+Mo8lopM3j3et/Mq1yW7kKX6qw7RVw==