Compare commits
1 Commits
frontend-b
...
inf-799
| Author | SHA1 | Date | |
|---|---|---|---|
|
07ec3486a0 |
5
.env
5
.env
@@ -20,5 +20,6 @@ SEGMENT_KEY=''
|
||||
SITE_NAME=''
|
||||
USER_INFO_COOKIE_NAME=''
|
||||
SUPPORT_URL=''
|
||||
LEARNER_FEEDBACK_URL=''
|
||||
STAFF_FEEDBACK_URL=''
|
||||
TA_FEEDBACK_FORM= ''
|
||||
STAFF_FEEDBACK_FORM= ''
|
||||
DISPLAY_FEEDBACK_BANNER='false'
|
||||
|
||||
@@ -21,5 +21,6 @@ SEGMENT_KEY=''
|
||||
SITE_NAME=localhost
|
||||
USER_INFO_COOKIE_NAME='edx-user-info'
|
||||
SUPPORT_URL='https://support.edx.org'
|
||||
LEARNER_FEEDBACK_URL=''
|
||||
STAFF_FEEDBACK_URL=''
|
||||
TA_FEEDBACK_FORM='https://learner-form.test'
|
||||
STAFF_FEEDBACK_FORM='https://staff-form.test'
|
||||
DISPLAY_FEEDBACK_BANNER='false'
|
||||
|
||||
@@ -19,5 +19,6 @@ SEGMENT_KEY=''
|
||||
SITE_NAME='localhost'
|
||||
USER_INFO_COOKIE_NAME='edx-user-info'
|
||||
SUPPORT_URL='https://support.edx.org'
|
||||
LEARNER_FEEDBACK_URL=''
|
||||
STAFF_FEEDBACK_URL=''
|
||||
TA_FEEDBACK_FORM='https://learner-form.test'
|
||||
STAFF_FEEDBACK_FORM='https://staff-form.test'
|
||||
DISPLAY_FEEDBACK_BANNER='false'
|
||||
|
||||
@@ -2,4 +2,3 @@ coverage/*
|
||||
dist/
|
||||
node_modules/
|
||||
jest.config.js
|
||||
src/i18n/messages/
|
||||
|
||||
16
.eslintrc.js
16
.eslintrc.js
@@ -1,10 +1,9 @@
|
||||
const { createConfig } = require('@openedx/frontend-build');
|
||||
const { createConfig } = require('@edx/frontend-build');
|
||||
|
||||
module.exports = createConfig(
|
||||
'eslint',
|
||||
{
|
||||
plugins: ['simple-import-sort'],
|
||||
rules: {
|
||||
module.exports = createConfig('eslint',
|
||||
{
|
||||
"plugins": ["simple-import-sort"],
|
||||
"rules": {
|
||||
'import/no-extraneous-dependencies': 'off',
|
||||
'react-hooks/exhaustive-deps': 'off',
|
||||
'jsx-a11y/no-noninteractive-element-interactions': 'off',
|
||||
@@ -26,6 +25,7 @@ module.exports = createConfig(
|
||||
},
|
||||
],
|
||||
'simple-import-sort/exports': 'error',
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
15
.github/workflows/ci.yml
vendored
15
.github/workflows/ci.yml
vendored
@@ -9,16 +9,18 @@ on:
|
||||
jobs:
|
||||
tests:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node: [16]
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 0
|
||||
- name: Setup Nodejs
|
||||
uses: actions/setup-node@v4
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version-file: '.nvmrc'
|
||||
node-version: ${{ matrix.node }}
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
- name: Validate package-lock.json changes
|
||||
@@ -32,7 +34,4 @@ jobs:
|
||||
- name: i18n_extract
|
||||
run: npm run i18n_extract
|
||||
- name: Coverage
|
||||
uses: codecov/codecov-action@v4
|
||||
with:
|
||||
token: ${{ secrets.CODECOV_TOKEN }}
|
||||
fail_ci_if_error: true
|
||||
uses: codecov/codecov-action@v3
|
||||
|
||||
2
.github/workflows/lockfileversion-check.yml
vendored
2
.github/workflows/lockfileversion-check.yml
vendored
@@ -10,4 +10,4 @@ on:
|
||||
|
||||
jobs:
|
||||
version-check:
|
||||
uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
|
||||
uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -6,7 +6,6 @@ node_modules
|
||||
npm-debug.log
|
||||
coverage
|
||||
module.config.js
|
||||
env.config.*
|
||||
|
||||
dist/
|
||||
src/i18n/transifex_input.json
|
||||
|
||||
2
.jest/setEnvVars.js
Normal file
2
.jest/setEnvVars.js
Normal file
@@ -0,0 +1,2 @@
|
||||
process.env.TA_FEEDBACK_FORM= 'https://learner-form.test';
|
||||
process.env.STAFF_FEEDBACK_FORM= 'https://staff-form.test';
|
||||
8
.tx/config
Normal file
8
.tx/config
Normal file
@@ -0,0 +1,8 @@
|
||||
[main]
|
||||
host = https://www.transifex.com
|
||||
|
||||
[o:open-edx:p:edx-platform:r:frontend-app-discussions]
|
||||
file_filter = src/i18n/messages/<lang>.json
|
||||
source_file = src/i18n/transifex_input.json
|
||||
source_lang = en
|
||||
type = KEYVALUEJSON
|
||||
25
Makefile
25
Makefile
@@ -1,10 +1,15 @@
|
||||
intl_imports = ./node_modules/.bin/intl-imports.js
|
||||
export TRANSIFEX_RESOURCE = frontend-app-discussions
|
||||
transifex_resource = frontend-app-discussions
|
||||
transifex_langs = "ar,fr,es_419,zh_CN,tr_TR,pl,fr_CA,fr_FR,de_DE,it_IT"
|
||||
|
||||
transifex_utils = ./node_modules/.bin/transifex-utils.js
|
||||
i18n = ./src/i18n
|
||||
transifex_input = $(i18n)/transifex_input.json
|
||||
tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
|
||||
tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
|
||||
|
||||
# This directory must match .babelrc .
|
||||
transifex_temp = ./temp/babel-plugin-formatjs
|
||||
transifex_temp = ./temp/babel-plugin-react-intl
|
||||
|
||||
NPM_TESTS=build i18n_extract lint test
|
||||
|
||||
@@ -52,21 +57,11 @@ push_translations:
|
||||
# Pushing comments to Transifex...
|
||||
./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
|
||||
|
||||
# Pulls translations from Transifex.
|
||||
pull_translations:
|
||||
rm -rf src/i18n/messages
|
||||
mkdir src/i18n/messages
|
||||
cd src/i18n/messages \
|
||||
&& atlas pull $(ATLAS_OPTIONS) \
|
||||
translations/frontend-component-header/src/i18n/messages:frontend-component-header \
|
||||
translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
|
||||
translations/frontend-platform/src/i18n/messages:frontend-platform \
|
||||
translations/paragon/src/i18n/messages:paragon \
|
||||
translations/frontend-app-discussions/src/i18n/messages:frontend-app-discussions
|
||||
|
||||
$(intl_imports) frontend-component-header frontend-component-footer frontend-platform paragon frontend-app-discussions
|
||||
# endif
|
||||
tx pull -t -f --mode reviewed --languages=$(transifex_langs)
|
||||
|
||||
# This target is used by Travis.
|
||||
validate-no-uncommitted-package-lock-changes:
|
||||
# Checking for package-lock.json changes...
|
||||
git diff --exit-code package-lock.json
|
||||
git diff --exit-code package-lock.json
|
||||
78
README.rst
78
README.rst
@@ -1,42 +1,15 @@
|
||||
########################
|
||||
frontend-app-discussions
|
||||
########################
|
||||
========================
|
||||
|
||||
|Codecov| |license|
|
||||
|Build Status| |Codecov| |license|
|
||||
|
||||
.. |Codecov| image:: https://codecov.io/gh/openedx/frontend-app-discussions/branch/master/graph/badge.svg?token=3z7XvuzTq3
|
||||
:target: https://codecov.io/gh/openedx/frontend-app-discussions
|
||||
.. |license| image:: https://img.shields.io/badge/license-AGPL-informational
|
||||
:target: https://github.com/openedx/frontend-app-discussions/blob/master/LICENSE
|
||||
|
||||
********
|
||||
Purpose
|
||||
********
|
||||
-------
|
||||
|
||||
This repository is a React-based micro frontend for the Open edX discussion forums.
|
||||
|
||||
***************
|
||||
Getting Started
|
||||
***************
|
||||
|
||||
Prerequisites
|
||||
=============
|
||||
|
||||
The `devstack`_ is currently recommended as a development environment for your
|
||||
new MFE. If you start it with ``make dev.up.lms`` that should give you
|
||||
everything you need as a companion to this frontend.
|
||||
|
||||
Note that it is also possible to use `Tutor`_ to develop an MFE. You can refer
|
||||
to the `relevant tutor-mfe documentation`_ to get started using it.
|
||||
|
||||
.. _Devstack: https://github.com/openedx/devstack
|
||||
|
||||
.. _Tutor: https://github.com/overhangio/tutor
|
||||
|
||||
.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
|
||||
|
||||
Cloning and Startup
|
||||
===================
|
||||
---------------
|
||||
|
||||
1. Clone your new repo:
|
||||
|
||||
@@ -52,14 +25,8 @@ Cloning and Startup
|
||||
|
||||
The dev server is running at `http://localhost:2002 <http://localhost:2002>`_.
|
||||
|
||||
Plugins
|
||||
=======
|
||||
This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
|
||||
|
||||
The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
|
||||
|
||||
Getting Help
|
||||
============
|
||||
------------
|
||||
Please tag **@openedx/edx-infinity ** on any PRs or issues. Thanks.
|
||||
|
||||
If you're having trouble, we have discussion forums at https://discuss.openedx.org where you can connect with others in the community.
|
||||
@@ -72,11 +39,10 @@ For more information about these options, see the `Getting Help`_ page.
|
||||
.. _Getting Help: https://openedx.org/getting-help
|
||||
|
||||
How to Contribute
|
||||
=================
|
||||
|
||||
-----------------
|
||||
Details about how to become a contributor to the Open edX project may be found in the wiki at `How to contribute`_
|
||||
|
||||
.. _How to contribute: https://docs.openedx.org/en/latest/developers/references/developer_guide/process/index.html
|
||||
.. _How to contribute: https://edx.readthedocs.io/projects/edx-developer-guide/en/latest/process/index.html
|
||||
|
||||
PR description template should be automatically applied if you are sending PR from github interface; otherwise you
|
||||
can find it it at `PULL_REQUEST_TEMPLATE.md <https://github.com/openedx/frontend-app-discussions/blob/master/.github/pull_request_template.md>`_
|
||||
@@ -84,45 +50,39 @@ can find it it at `PULL_REQUEST_TEMPLATE.md <https://github.com/openedx/frontend
|
||||
This project is currently accepting all types of contributions, bug fixes and security fixes
|
||||
|
||||
The Open edX Code of Conduct
|
||||
============================
|
||||
----------------------------
|
||||
All community members should familiarize themselves with the `Open edX Code of Conduct`_.
|
||||
|
||||
.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
|
||||
|
||||
People
|
||||
======
|
||||
------
|
||||
The assigned maintainers for this component and other project details may be found in Backstage or from inspecting catalog-info.yaml.
|
||||
|
||||
Reporting Security Issues
|
||||
-------------------------
|
||||
Please do not report security issues in public. Please email security@openedx.org.
|
||||
Please do not report security issues in public. Please email security@edx.org.
|
||||
|
||||
Project Structure
|
||||
=================
|
||||
-----------------
|
||||
|
||||
The source for this project is organized into nested submodules according to the ADR `Feature-based Application Organization <https://github.com/openedx/frontend-app-discussions/blob/master/docs/decisions/0002-feature-based-application-organization.rst>`_.
|
||||
|
||||
Build Process Notes
|
||||
===================
|
||||
-------------------
|
||||
|
||||
**Production Build**
|
||||
|
||||
The production build is created with ``npm run build``.
|
||||
|
||||
License
|
||||
=======
|
||||
|
||||
The code in this repository is licensed under the AGPLv3 unless otherwise
|
||||
noted.
|
||||
|
||||
Please see `LICENSE <LICENSE>`_ for details.
|
||||
|
||||
Internationalization
|
||||
====================
|
||||
--------------------
|
||||
|
||||
Please see `edx/frontend-platform's i18n module <https://edx.github.io/frontend-platform/module-Internationalization.html>`_ for documentation on internationalization. The documentation explains how to use it, and the `How To <https://github.com/openedx/frontend-i18n/blob/master/docs/how_tos/i18n.rst>`_ has more detail.
|
||||
|
||||
Reporting Security Issues
|
||||
=========================
|
||||
|
||||
Please do not report security issues in public. Please email security@openedx.org.
|
||||
.. |Build Status| image:: https://api.travis-ci.org/edx/frontend-app-discussions.svg?branch=master
|
||||
:target: https://travis-ci.org/edx/frontend-app-discussions
|
||||
.. |Codecov| image:: https://codecov.io/gh/edx/frontend-app-discussions/branch/master/graph/badge.svg
|
||||
:target: https://codecov.io/gh/edx/frontend-app-discussions
|
||||
.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-discussions.svg
|
||||
:target: @edx/frontend-app-discussions
|
||||
@@ -12,7 +12,6 @@ metadata:
|
||||
icon: "Web"
|
||||
annotations:
|
||||
openedx.org/arch-interest-groups: ""
|
||||
openedx.org/release: "master"
|
||||
spec:
|
||||
owner: group:edx-infinity
|
||||
type: 'website'
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
const { createConfig } = require('@openedx/frontend-build');
|
||||
const { createConfig } = require('@edx/frontend-build');
|
||||
|
||||
module.exports = createConfig('jest', {
|
||||
// setupFilesAfterEnv is used after the jest environment has been loaded. In general this is what you want.
|
||||
// setupFilesAfterEnv is used after the jest environment has been loaded. In general this is what you want.
|
||||
// If you want to add config BEFORE jest loads, use setupFiles instead.
|
||||
setupFiles: ['<rootDir>/.env.test'],
|
||||
setupFiles: ['<rootDir>/.jest/setEnvVars.js'],
|
||||
setupFilesAfterEnv: [
|
||||
'<rootDir>/src/setupTest.jsx',
|
||||
'<rootDir>/src/setupTest.js',
|
||||
],
|
||||
coveragePathIgnorePatterns: [
|
||||
'src/setupTest.jsx',
|
||||
'src/setupTest.js',
|
||||
'src/i18n',
|
||||
],
|
||||
});
|
||||
|
||||
11
openedx.yaml
Normal file
11
openedx.yaml
Normal file
@@ -0,0 +1,11 @@
|
||||
# This file describes this Open edX repo, as described in OEP-2:
|
||||
# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
|
||||
|
||||
nick: tmpa
|
||||
oeps: {}
|
||||
owner: edx/arch-team
|
||||
openedx-release:
|
||||
# The openedx-release key is described in OEP-10:
|
||||
# https://open-edx-proposals.readthedocs.io/en/latest/oep-0010-proc-openedx-releases.html
|
||||
# The FAQ might also be helpful: https://openedx.atlassian.net/wiki/spaces/COMM/pages/1331268879/Open+edX+Release+FAQ
|
||||
ref: master
|
||||
49443
package-lock.json
generated
49443
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
64
package.json
64
package.json
@@ -11,14 +11,18 @@
|
||||
],
|
||||
"scripts": {
|
||||
"build": "fedx-scripts webpack",
|
||||
"i18n_extract": "fedx-scripts formatjs extract",
|
||||
"i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
|
||||
"lint": "fedx-scripts eslint --ext .js --ext .jsx .",
|
||||
"lint:fix": "fedx-scripts eslint --ext .js --ext .jsx . --fix",
|
||||
"snapshot": "fedx-scripts jest --updateSnapshot",
|
||||
"start": "fedx-scripts webpack-dev-server --progress",
|
||||
"dev": "PUBLIC_PATH=/discussions/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
|
||||
"test": "fedx-scripts jest --coverage --passWithNoTests"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "npm run lint"
|
||||
}
|
||||
},
|
||||
"author": "edX",
|
||||
"license": "AGPL-3.0",
|
||||
"homepage": "https://github.com/openedx/frontend-app-discussions#readme",
|
||||
@@ -29,47 +33,45 @@
|
||||
"url": "https://github.com/openedx/frontend-app-discussions/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
|
||||
"@edx/frontend-component-footer": "^14.6.0",
|
||||
"@edx/frontend-component-header": "^6.2.0",
|
||||
"@edx/frontend-platform": "^8.3.3",
|
||||
"@edx/openedx-atlas": "^0.6.0",
|
||||
"@openedx/paragon": "^22.16.0",
|
||||
"@reduxjs/toolkit": "1.9.7",
|
||||
"@tinymce/tinymce-react": "5.1.1",
|
||||
"@edx/brand": "npm:@edx/brand-openedx@1.1.0",
|
||||
"@edx/frontend-component-footer": "11.2.0",
|
||||
"@edx/frontend-component-header": "3.2.0",
|
||||
"@edx/frontend-platform": "2.6.1",
|
||||
"@edx/paragon": "20.15.0",
|
||||
"@reduxjs/toolkit": "1.8.0",
|
||||
"@tinymce/tinymce-react": "3.13.1",
|
||||
"babel-polyfill": "6.26.0",
|
||||
"classnames": "2.5.1",
|
||||
"classnames": "2.3.1",
|
||||
"core-js": "3.21.1",
|
||||
"dompurify": "^2.4.3",
|
||||
"formik": "2.4.5",
|
||||
"formik": "2.2.9",
|
||||
"lodash.snakecase": "4.1.1",
|
||||
"prop-types": "15.8.1",
|
||||
"raw-loader": "4.0.2",
|
||||
"react": "18.3.1",
|
||||
"react-dom": "18.3.1",
|
||||
"react-helmet": "6.1.0",
|
||||
"react-redux": "7.2.9",
|
||||
"react-router": "6.18.0",
|
||||
"react-router-dom": "6.18.0",
|
||||
"redux": "4.2.1",
|
||||
"regenerator-runtime": "0.14.1",
|
||||
"react": "16.14.0",
|
||||
"react-dom": "16.14.0",
|
||||
"react-redux": "7.2.6",
|
||||
"react-router": "5.2.1",
|
||||
"react-router-dom": "5.3.0",
|
||||
"redux": "4.1.2",
|
||||
"regenerator-runtime": "0.13.9",
|
||||
"timeago.js": "4.0.2",
|
||||
"tinymce": "5.10.7",
|
||||
"yup": "0.32.11"
|
||||
"tinymce": "5.10.2",
|
||||
"yup": "0.31.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@edx/browserslist-config": "1.2.0",
|
||||
"@edx/reactifex": "1.1.0",
|
||||
"@openedx/frontend-build": "^14.3.3",
|
||||
"@testing-library/jest-dom": "5.17.0",
|
||||
"@testing-library/react": "14.3.1",
|
||||
"@edx/browserslist-config": "1.1.0",
|
||||
"@edx/frontend-build": "11.0.1",
|
||||
"@edx/reactifex": "1.0.3",
|
||||
"@testing-library/jest-dom": "5.16.2",
|
||||
"@testing-library/react": "12.1.4",
|
||||
"@testing-library/user-event": "13.5.0",
|
||||
"axios": "^0.28.0",
|
||||
"axios-mock-adapter": "1.22.0",
|
||||
"axios-mock-adapter": "1.20.0",
|
||||
"babel-plugin-react-intl": "8.2.25",
|
||||
"eslint-plugin-simple-import-sort": "7.0.0",
|
||||
"glob": "7.2.0",
|
||||
"jest": "29.7.0",
|
||||
"rosie": "2.1.1"
|
||||
"husky": "7.0.4",
|
||||
"jest": "27.5.1",
|
||||
"rosie": "2.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
href="<%=htmlWebpackPlugin.options.FAVICON_URL%>"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
<script defer>
|
||||
<script>
|
||||
window.MathJax = {
|
||||
tex: {
|
||||
inlineMath: [
|
||||
@@ -180,6 +180,10 @@
|
||||
var r = (window.lightningjs = t(e));
|
||||
(r.require = t), (r.modules = n);
|
||||
})({});
|
||||
window.usabilla_live = lightningjs.require(
|
||||
"usabilla_live",
|
||||
"//w.usabilla.com/9e6036348fa1.js"
|
||||
);
|
||||
</script>
|
||||
<!-- end usabilla live embed code -->
|
||||
</body>
|
||||
|
||||
@@ -1,33 +1,9 @@
|
||||
{
|
||||
"extends": [
|
||||
"config:base",
|
||||
"schedule:weekly",
|
||||
":automergeLinters",
|
||||
":automergeMinor",
|
||||
":automergeTesters",
|
||||
":enableVulnerabilityAlerts",
|
||||
":rebaseStalePrs",
|
||||
":semanticCommits",
|
||||
":updateNotScheduled"
|
||||
"config:base"
|
||||
],
|
||||
"packageRules": [
|
||||
{
|
||||
"matchDepTypes": [
|
||||
"devDependencies"
|
||||
],
|
||||
"matchUpdateTypes": [
|
||||
"lockFileMaintenance",
|
||||
"minor",
|
||||
"patch",
|
||||
"pin"
|
||||
],
|
||||
"automerge": true
|
||||
},
|
||||
{
|
||||
"matchPackagePatterns": ["@edx", "@openedx"],
|
||||
"matchUpdateTypes": ["minor", "patch"],
|
||||
"automerge": true
|
||||
}
|
||||
],
|
||||
"timezone": "America/New_York"
|
||||
"patch": {
|
||||
"automerge": true
|
||||
},
|
||||
"rebaseStalePrs": true
|
||||
}
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
const ContentUnavailable = () => (
|
||||
<svg width="229" height="167" viewBox="0 0 229 167" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.9664 67.649C1.9299 88.4776 -5.31519 112.805 4.55784 135.123C22.5467 175.788 120.573 164.359 163.26 148.39C283.487 103.415 225.675 -14.6 95.6636 14.5816C59.2626 22.7519 30.003 46.8204 15.9664 67.649Z" fill="#E1DDDB" fillOpacity="0.3" />
|
||||
<path d="M101.264 120.672L101.13 120.486H100.9H58.4969C54.0932 120.486 50.45 116.531 50.45 111.548V60.3944C50.45 55.4164 54.0937 51.45 58.4969 51.45H170.468C174.872 51.45 178.522 55.4171 178.55 60.3969V111.548C178.55 116.531 174.901 120.486 170.497 120.486H126.838H126.636L126.502 120.637L112.568 136.283L101.264 120.672Z" fill="white" stroke="#454545" strokeWidth="0.9" />
|
||||
<path d="M99.363 99.6098L93.9175 94.6162L82.0459 107.565L87.4913 112.558L99.363 99.6098Z" fill="#002121" />
|
||||
<path d="M87.3976 112.877C87.3486 112.862 87.3041 112.836 87.268 112.8L81.7927 107.803C81.76 107.774 81.7334 107.739 81.7145 107.7C81.6956 107.661 81.6848 107.619 81.6828 107.575C81.6807 107.532 81.6874 107.488 81.7025 107.447C81.7175 107.407 81.7407 107.369 81.7705 107.338L93.645 94.3885C93.6737 94.3558 93.7088 94.3292 93.7481 94.3106C93.7875 94.292 93.8302 94.2817 93.8737 94.2803C93.9601 94.2699 94.047 94.2939 94.1158 94.3472L99.5894 99.3501C99.6214 99.3792 99.6472 99.4144 99.6654 99.4537C99.6835 99.4929 99.6937 99.5354 99.6951 99.5786C99.6966 99.6219 99.6894 99.665 99.6739 99.7054C99.6585 99.7458 99.6351 99.7827 99.6052 99.8139L87.7445 112.787C87.6839 112.848 87.6031 112.884 87.5175 112.889C87.4771 112.894 87.4361 112.89 87.3976 112.877ZM82.5076 107.548L87.4698 112.094L98.9201 99.6383L93.966 95.0875L82.5076 107.548Z" fill="#002121" />
|
||||
<path d="M90.5786 108.62L85.6982 104.144C85.0283 103.53 83.9874 103.575 83.3732 104.245L62.9753 126.494C62.3611 127.164 62.4062 128.205 63.076 128.819L67.9565 133.294C68.6263 133.909 69.6672 133.863 70.2814 133.193L90.6793 110.945C91.2935 110.275 91.2484 109.234 90.5786 108.62Z" fill="#03C7E8" />
|
||||
<path d="M68.543 133.99C68.2434 133.908 67.9682 133.754 67.7412 133.542L62.8495 129.063C62.4689 128.709 62.2426 128.22 62.2195 127.7C62.1963 127.181 62.3781 126.673 62.7256 126.286L83.1283 104.037C83.4824 103.656 83.9719 103.43 84.4913 103.407C85.0107 103.384 85.5184 103.565 85.905 103.913L90.7904 108.39C91.171 108.744 91.3972 109.234 91.4204 109.753C91.4435 110.273 91.2618 110.78 90.9142 111.167L70.5243 133.42C70.2781 133.687 69.963 133.882 69.6136 133.983C69.2641 134.083 68.8938 134.086 68.543 133.99ZM84.937 104.091C84.8052 104.054 84.6678 104.039 84.5309 104.048C84.3574 104.056 84.1873 104.099 84.0304 104.173C83.8734 104.247 83.7325 104.352 83.616 104.48L63.2151 126.723C62.9827 126.981 62.8613 127.321 62.8771 127.668C62.8928 128.015 63.0444 128.341 63.2992 128.577L68.1845 133.054C68.4417 133.287 68.78 133.409 69.1265 133.395C69.473 133.38 69.7998 133.23 70.0366 132.976L90.434 110.746C90.6663 110.488 90.7878 110.149 90.772 109.802C90.7563 109.455 90.6046 109.128 90.3499 108.892L85.4645 104.415C85.3185 104.265 85.1372 104.154 84.937 104.091Z" fill="#002121" />
|
||||
<path d="M119.367 71.6959C116.6 69.1548 113.141 67.492 109.428 66.9178C105.715 66.3436 101.916 66.8839 98.51 68.4703C95.1043 70.0567 92.2457 72.6179 90.296 75.8298C88.3463 79.0416 87.3932 82.7597 87.5572 86.5134C87.7212 90.2671 88.9951 93.8877 91.2175 96.9169C93.44 99.9461 96.5111 102.248 100.042 103.531C103.573 104.813 107.406 105.02 111.054 104.123C114.702 103.227 118.003 101.268 120.538 98.4946C123.931 94.7829 125.713 89.8768 125.494 84.8527C125.274 79.8287 123.071 75.097 119.367 71.6959ZM96.9839 96.0996C94.9233 94.2099 93.4694 91.7515 92.8059 89.0353C92.1424 86.3191 92.2992 83.467 93.2565 80.8399C94.2138 78.2127 95.9285 75.9283 98.1839 74.2757C100.439 72.6231 103.134 71.6765 105.927 71.5556C108.72 71.4346 111.487 72.1447 113.876 73.5962C116.266 75.0477 118.171 77.1752 119.352 79.7098C120.532 82.2445 120.934 85.0723 120.508 87.8357C120.081 90.5991 118.845 93.174 116.955 95.2348C114.421 97.9979 110.893 99.6412 107.148 99.8034C103.403 99.9656 99.7468 98.6333 96.9839 96.0996Z" fill="white" />
|
||||
<path d="M101.371 104.313C96.6651 103.025 92.6175 100.01 90.0365 95.8695C87.4556 91.7285 86.5312 86.7663 87.4479 81.9735C88.3647 77.1806 91.055 72.9097 94.982 70.0134C98.9089 67.117 103.784 65.8084 108.633 66.3486C113.482 66.8888 117.949 69.2382 121.142 72.9277C124.335 76.6173 126.019 81.3755 125.858 86.2526C125.697 91.1296 123.703 95.7667 120.273 99.2381C116.844 102.709 112.232 104.76 107.358 104.98C105.34 105.074 103.319 104.848 101.371 104.313ZM111.529 67.7055C109.642 67.1867 107.687 66.9654 105.732 67.0496C101.063 67.2601 96.6449 69.2229 93.3586 72.5465C90.0724 75.8701 88.1594 80.3103 88.0012 84.9817C87.843 89.653 89.4512 94.2123 92.505 97.7502C95.5589 101.288 99.834 103.545 104.478 104.07C109.122 104.596 113.793 103.351 117.56 100.585C121.328 97.8185 123.914 93.7337 124.804 89.1451C125.694 84.5565 124.821 79.8012 122.361 75.8275C119.9 71.8538 116.033 68.9537 111.529 67.7055ZM102.661 99.6222C100.464 99.0148 98.4423 97.8945 96.7628 96.3534C94.1466 93.9593 92.5 90.6882 92.1352 87.1605C91.7704 83.6327 92.7128 80.0937 94.7836 77.2145C96.8544 74.3353 99.9096 72.3161 103.37 71.54C106.83 70.7638 110.455 71.2847 113.556 73.0037C116.658 74.7227 119.021 77.5203 120.197 80.8661C121.373 84.2118 121.281 87.873 119.937 91.1553C118.594 94.4375 116.093 97.1126 112.908 98.6733C109.724 100.234 106.077 100.572 102.661 99.6222ZM97.2188 95.8692C99.2303 97.7107 101.742 98.9152 104.437 99.3306C107.133 99.746 109.89 99.3537 112.363 98.2033C114.836 97.0529 116.912 95.1958 118.331 92.8664C119.75 90.5371 120.447 87.8397 120.334 85.1146C120.215 82.3875 119.291 79.7568 117.678 77.5551C116.064 75.3534 113.835 73.6794 111.27 72.7447C108.706 71.81 105.922 71.6565 103.27 72.3037C100.618 72.9509 98.2181 74.3696 96.3723 76.3807C93.9071 79.0806 92.612 82.6474 92.7707 86.3C92.9294 89.9527 94.5288 93.3936 97.2188 95.8692Z" fill="#002121" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default ContentUnavailable;
|
||||
@@ -1,48 +0,0 @@
|
||||
const Empty = () => (
|
||||
<svg width="246" height="204" viewBox="0 0 246 204" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.966 80.706C1.93 101.534-5.315 125.86 4.558 148.18c17.989 40.665 116.015 29.236 158.702 13.267 120.227-44.976 62.415-162.99-67.596-133.809-36.401 8.17-65.661 32.239-79.698 53.068Z" fill="#D7D3D1" fillOpacity="0.3" />
|
||||
<path d="M95.6307 23.4976C101.102 13.3476 109.932 6.31365 123.036 10.536C124.191 11.0005 125.403 11.311 126.639 11.4597C127.895 11.386 129.146 11.2369 130.384 11.0131C136.292 10.5259 140.656 16.2505 143.529 21.427C148.867 31.0796 158.622 44.1833 156.724 55.7847C155.252 64.7776 146.797 71.0097 138.261 74.1562C128.636 77.7063 118.244 78.655 108.136 76.9069C103.061 76.034 97.813 74.3288 94.159 70.6443C89.084 65.5084 88.069 57.6016 88.4547 50.3443C88.9926 42.2345 91.1749 31.8104 95.6307 23.4976Z" fill="#EEEAE9" />
|
||||
<path d="M117.991 78.2569C114.66 78.2567 111.336 77.9715 108.054 77.4043C101.649 76.3081 97.0006 74.2172 93.8439 71.0098C89.4084 66.554 87.4393 59.652 87.9772 50.3952C88.5558 40.7933 91.2557 30.6534 95.2142 23.2845C99.8528 14.657 108.46 5.35964 123.137 10.0895L123.837 10.3331C124.73 10.6795 125.665 10.9015 126.618 10.9929C127.348 10.9968 128.077 10.9219 128.79 10.7696C129.278 10.6884 129.805 10.597 130.303 10.5564C135.165 10.1403 139.752 13.7334 143.894 21.2038C144.848 22.9293 145.924 24.7563 147.091 26.6949C152.278 35.3732 158.733 46.1728 157.139 55.866C155.871 63.712 148.877 70.7155 138.392 74.5928C131.864 77.0187 124.955 78.2596 117.991 78.2569ZM96.0972 23.721C92.1996 30.9782 89.5302 40.976 88.9922 50.4459C88.4543 59.3982 90.332 66.0972 94.5544 70.3602C97.5994 73.4053 102.076 75.4352 108.277 76.4502C118.3 78.1754 128.602 77.223 138.139 73.6894C148.289 69.9238 155.079 63.1842 156.307 55.6732C157.84 46.325 151.486 35.6777 146.38 27.1212C145.223 25.1826 144.127 23.3556 143.163 21.6199C139.214 14.5149 134.941 11.0741 130.465 11.4699C129.988 11.4699 129.521 11.5917 129.034 11.6729C128.218 11.8545 127.384 11.9464 126.547 11.947C125.503 11.8549 124.477 11.6122 123.502 11.2263L122.812 10.9929C108.744 6.45585 100.482 15.4284 95.9957 23.7413L96.0972 23.721Z" fill="#454545" />
|
||||
<path d="M182.845 167.75C182.845 167.75 178.596 94.152 167.857 84.3978C152.409 70.4314 97.5788 67.5184 86.4443 70.3909C66.7533 75.4659 53.0508 106.22 53.0508 106.22L85.7135 115.985C85.7845 141.248 88.3119 167.75 88.3119 167.75H182.845Z" fill="#B5AFAB" />
|
||||
<path d="M84.2307 146.058C84.1627 146.053 84.0963 146.035 84.0354 146.004C83.9746 145.973 83.9204 145.93 83.8761 145.878C83.8317 145.827 83.7981 145.766 83.7771 145.702C83.7561 145.637 83.7481 145.568 83.7537 145.5L88.1689 87.6451C88.1741 87.5757 88.1928 87.5081 88.2242 87.446C88.2556 87.3839 88.299 87.3286 88.3518 87.2833C88.4046 87.238 88.4659 87.2037 88.532 87.1821C88.5982 87.1606 88.668 87.1524 88.7373 87.1579C88.8063 87.163 88.8736 87.1819 88.9352 87.2134C88.9967 87.2449 89.0514 87.2884 89.0959 87.3414C89.1403 87.3944 89.1737 87.4557 89.1941 87.5219C89.2144 87.588 89.2213 87.6575 89.2144 87.7263L84.7991 145.581C84.794 145.65 84.7752 145.718 84.7437 145.779C84.7122 145.841 84.6686 145.895 84.6156 145.94C84.5627 145.984 84.5013 146.018 84.4352 146.038C84.3691 146.058 84.2995 146.065 84.2307 146.058Z" fill="#5C524D" />
|
||||
<path d="M114.163 90.7217C117.828 95.279 123.298 98.527 129.196 98.6184C129.959 98.6607 130.724 98.5574 131.449 98.3139C132.442 97.8894 133.288 97.1838 133.885 96.2839C136.544 92.6299 136.656 87.7071 135.986 83.2411C135.509 80.1048 134.595 76.8162 132.22 74.7151C129.429 72.2487 125.379 72.0152 121.654 71.9137C117.929 71.8122 109.291 70.7262 107.911 75.314C106.622 79.5059 111.707 87.6665 114.163 90.7217Z" fill="#5C524D" />
|
||||
<path d="M129.42 99.0646H129.187C123.553 98.9732 117.809 95.9587 113.82 91.0055C111.17 87.7169 106.146 79.536 107.476 75.1816C108.805 70.8273 115.9 71.1216 120.123 71.3855L121.676 71.4566C125.786 71.5784 129.704 71.8829 132.516 74.3696C135.327 76.8564 136.028 80.5307 136.424 83.1697C137.286 88.874 136.556 93.3197 134.252 96.5372C133.611 97.5159 132.692 98.2797 131.613 98.7296C130.908 98.9745 130.165 99.0881 129.42 99.0646ZM116.662 72.1671C113.089 72.1671 109.181 72.6847 108.339 75.4455C107.11 79.4142 112.064 87.4022 114.51 90.4472C118.336 95.1974 123.827 98.08 129.197 98.1714C129.908 98.2085 130.62 98.1157 131.298 97.8973C132.211 97.5007 132.988 96.8442 133.531 96.0094C135.683 93.0456 136.363 88.7623 135.561 83.3016C135.185 80.7946 134.404 77.2116 131.947 75.0395C129.491 72.8674 125.604 72.4614 121.666 72.3498C121.209 72.3498 120.65 72.3498 120.102 72.2787C119.067 72.228 117.88 72.1671 116.662 72.1671Z" fill="#454545" />
|
||||
<path d="M137.874 43.808C138.249 42.5429 138.885 41.3706 139.742 40.3671C140.181 39.8733 140.761 39.5266 141.404 39.374C142.047 39.2215 142.721 39.2706 143.335 39.5145C143.762 39.7688 144.12 40.1237 144.379 40.5484C144.637 40.973 144.787 41.4544 144.817 41.9505C144.867 42.9487 144.701 43.9458 144.33 44.8737C143.765 46.6382 142.787 48.2423 141.477 49.5529C140.827 50.204 140.05 50.7154 139.195 51.0558C138.34 51.3961 137.424 51.5582 136.504 51.5321" fill="#EEEAE9" />
|
||||
<path d="M136.89 51.9282H136.474C136.367 51.9179 136.268 51.8667 136.198 51.7854C136.128 51.7041 136.093 51.5989 136.098 51.4917C136.101 51.4379 136.114 51.3851 136.138 51.3366C136.161 51.2881 136.195 51.245 136.235 51.2098C136.276 51.1747 136.324 51.1482 136.375 51.1321C136.427 51.116 136.481 51.1106 136.535 51.1162C137.403 51.1458 138.268 50.9971 139.076 50.6794C139.884 50.3617 140.619 49.8816 141.234 49.2689C142.496 48.0042 143.436 46.4553 143.975 44.7521C144.329 43.8802 144.488 42.9414 144.442 42.0015C144.417 41.5693 144.287 41.1497 144.062 40.7798C143.837 40.4098 143.525 40.1009 143.152 39.8801C142.615 39.6774 142.028 39.6427 141.47 39.7804C140.911 39.9181 140.408 40.2218 140.026 40.6515C139.218 41.6241 138.614 42.7494 138.25 43.9604C138.232 44.0102 138.204 44.0559 138.168 44.0947C138.132 44.1336 138.089 44.1648 138.041 44.1866C137.992 44.2083 137.94 44.2202 137.887 44.2214C137.834 44.2227 137.782 44.2133 137.732 44.1939C137.632 44.1572 137.55 44.0822 137.504 43.9852C137.458 43.8883 137.453 43.7772 137.489 43.6762C137.886 42.3539 138.557 41.1298 139.458 40.0831C139.958 39.5304 140.615 39.1452 141.342 38.9799C142.069 38.8146 142.828 38.8773 143.518 39.1595C144.012 39.44 144.429 39.8394 144.73 40.3214C145.031 40.8034 145.208 41.353 145.243 41.9203C145.299 42.9602 145.126 43.9997 144.736 44.9653C144.16 46.8097 143.143 48.4856 141.772 49.8474C140.468 51.1359 138.723 51.8799 136.89 51.9282Z" fill="#454545" />
|
||||
<path d="M130.902 61.4082L132.475 77.0595C132.475 77.0595 131.714 85.961 121.929 84.1645C119.055 83.6096 116.34 82.4241 113.979 80.6936C111.619 78.963 109.671 76.7304 108.277 74.1566L108.643 46.0715C108.582 44.9246 110.967 40.9965 109.84 31.0698C113.195 30.7268 116.441 29.6886 119.371 28.0214C122.302 26.3542 124.853 24.0946 126.862 21.3867C126.862 21.3867 131.399 26.9895 133.307 28.7252C134.839 30.0073 136.203 31.477 137.367 33.0998C140.412 37.6673 140.28 45.1174 139.549 50.3548C138.839 54.6584 136.342 61.5198 130.902 61.4082Z" fill="#EEEAE9" />
|
||||
<path d="M124.375 84.8953C123.527 84.8897 122.681 84.8082 121.847 84.6517C118.893 84.0752 116.102 82.8527 113.676 81.0717C111.249 79.2906 109.246 76.9951 107.81 74.3495C107.795 74.2826 107.795 74.2133 107.81 74.1465C107.81 74.1465 108.175 46.2441 108.175 46.0716C108.218 45.5697 108.323 45.0751 108.49 44.5998C109.058 42.651 110.226 38.591 109.383 31.1206C109.377 31.0608 109.382 31.0004 109.4 30.9428C109.417 30.8852 109.446 30.8318 109.485 30.7857C109.519 30.736 109.565 30.6948 109.617 30.6649C109.67 30.6351 109.729 30.6174 109.789 30.6131C113.072 30.2679 116.248 29.2475 119.118 27.6161C121.988 25.9847 124.49 23.7774 126.466 21.133C126.507 21.0737 126.562 21.0246 126.625 20.9894C126.688 20.9542 126.759 20.9339 126.831 20.93C126.904 20.9272 126.977 20.9414 127.044 20.9713C127.111 21.0012 127.17 21.0461 127.217 21.1026C127.217 21.1026 131.754 26.6952 133.621 28.3801C135.158 29.6918 136.522 31.1924 137.681 32.8461C141.193 38.1647 140.422 46.8836 139.935 50.3853C139.346 54.5773 136.89 61.5503 131.439 61.865L132.952 77.0189C132.709 79.4527 131.521 81.6941 129.643 83.2612C128.121 84.3844 126.265 84.9603 124.375 84.8953ZM108.693 74.045C110.072 76.5357 111.98 78.6941 114.282 80.3687C116.585 82.0433 119.226 83.1935 122.02 83.7382C124.943 84.266 127.308 83.86 129.054 82.5304C130.698 81.131 131.753 79.1626 132.008 77.0189L130.444 61.459C130.439 61.393 130.447 61.3266 130.468 61.2637C130.489 61.2009 130.522 61.143 130.566 61.0936C130.611 61.0479 130.665 61.0118 130.724 60.9874C130.784 60.963 130.847 60.9508 130.911 60.9515H131.033C136.108 60.9515 138.433 54.2423 138.991 50.2534C139.478 46.8531 140.229 38.4185 136.89 33.3638C135.757 31.7708 134.431 30.3252 132.941 29.0602C130.797 26.8597 128.764 24.5527 126.851 22.148C122.766 27.2984 116.828 30.6462 110.307 31.4759C111.068 38.8346 109.901 42.8845 109.292 44.8536C109.159 45.2422 109.067 45.6436 109.018 46.0513C109.018 46.0513 109.058 46.0817 108.693 74.045Z" fill="#454545" />
|
||||
<path d="M131.438 66.5538C128.868 67.0035 126.223 66.7221 123.805 65.7418C118.233 63.7828 117.908 59.9766 117.908 59.9766C117.908 59.9766 122.597 62.9201 130.9 61.3773L131.438 66.5538Z" fill="#5C524D" />
|
||||
<path d="M129.176 67.2139C127.292 67.1821 125.427 66.8391 123.655 66.1989C117.879 64.1689 117.483 60.2206 117.463 60.1089C117.455 60.025 117.471 59.9405 117.508 59.8652C117.546 59.7899 117.605 59.7268 117.677 59.6833C117.749 59.6397 117.832 59.6175 117.916 59.6192C118.001 59.6209 118.083 59.6464 118.153 59.6928C118.153 59.6928 122.812 62.5246 130.82 61.0326C130.945 61.0116 131.073 61.0408 131.176 61.1138C131.226 61.15 131.268 61.1971 131.298 61.2516C131.327 61.306 131.345 61.3664 131.348 61.4284L131.876 66.5034C131.898 66.5877 131.895 66.6764 131.868 66.7591C131.841 66.8418 131.791 66.9151 131.724 66.9703C131.68 67.0105 131.629 67.0411 131.573 67.0603C131.517 67.0795 131.458 67.0869 131.399 67.082C130.664 67.1971 129.92 67.2413 129.176 67.2139ZM118.59 60.86C119.036 62.0273 120.315 64.0674 123.959 65.3463C126.186 66.196 128.589 66.4786 130.952 66.1685L130.516 61.9359C124.406 62.9611 120.315 61.6822 118.59 60.86Z" fill="#454545" />
|
||||
<path d="M124.061 36.0742C124.061 36.0742 129.846 43.0879 128.78 44.519C127.715 45.9502 124.284 45.4122 124.284 45.4122" fill="#EEEAE9" />
|
||||
<path d="M125.714 45.9592C125.211 45.9586 124.71 45.9247 124.212 45.8577C124.106 45.8253 124.017 45.7561 123.958 45.6627C123.9 45.5693 123.878 45.4581 123.895 45.3494C123.912 45.2408 123.968 45.142 124.052 45.0713C124.137 45.0006 124.244 44.9627 124.354 44.9645C125.237 45.1066 127.683 45.2385 128.414 44.2438C128.87 43.6348 126.668 39.9504 123.694 36.3573C123.657 36.312 123.628 36.2598 123.611 36.2036C123.594 36.1475 123.588 36.0885 123.594 36.03C123.6 35.9716 123.617 35.9148 123.644 35.863C123.672 35.8112 123.709 35.7653 123.755 35.728C123.849 35.6544 123.968 35.6197 124.087 35.631C124.206 35.6423 124.316 35.6988 124.394 35.7889C126.201 37.9813 130.281 43.239 129.134 44.7818C128.414 45.7562 126.881 45.9592 125.714 45.9592Z" fill="#454545" />
|
||||
<path d="M131.302 37.6836C131.774 37.6204 132.06 36.8441 131.941 35.9495C131.821 35.055 131.341 34.381 130.869 34.4442C130.397 34.5074 130.111 35.2838 130.23 36.1783C130.35 37.0729 130.83 37.7468 131.302 37.6836Z" fill="#454545" />
|
||||
<path d="M117.067 37.7043C117.543 37.6987 117.921 36.9626 117.911 36.0602C117.9 35.1577 117.505 34.4306 117.029 34.4362C116.552 34.4418 116.175 35.1779 116.185 36.0803C116.196 36.9828 116.59 37.7099 117.067 37.7043Z" fill="#454545" />
|
||||
<path d="M111.798 41.8686C111.449 40.5288 110.853 39.2657 110.042 38.1436C109.575 37.5067 108.964 36.9903 108.258 36.6373C107.551 36.2842 106.771 36.1047 105.982 36.1136C105.494 36.1326 105.016 36.2622 104.586 36.4925C104.155 36.7228 103.782 37.0479 103.495 37.4432C103.153 38.0128 102.938 38.6501 102.866 39.3108C102.348 42.7923 103.515 47.3293 106.794 49.1259C107.347 49.4737 107.988 49.6582 108.641 49.6582C109.295 49.6582 109.935 49.4737 110.488 49.1259" fill="#" />
|
||||
<path d="M108.865 50.0604C108.072 50.0422 107.296 49.8333 106.601 49.4514C103.171 47.5635 101.932 42.8844 102.47 39.2202C102.547 38.5008 102.783 37.8074 103.161 37.1902C103.481 36.7428 103.898 36.3741 104.382 36.1121C104.865 35.8501 105.402 35.7016 105.952 35.6779C106.81 35.6717 107.657 35.8702 108.423 36.2567C109.189 36.6433 109.852 37.2069 110.357 37.9007C111.203 39.0603 111.823 40.3687 112.184 41.7577C112.212 41.86 112.2 41.9693 112.148 42.0623C112.097 42.1552 112.012 42.2244 111.91 42.2551C111.86 42.2722 111.807 42.2789 111.754 42.2747C111.702 42.2706 111.651 42.2557 111.604 42.2309C111.557 42.2062 111.516 42.1721 111.483 42.1309C111.45 42.0897 111.426 42.0421 111.413 41.9912C111.077 40.6998 110.506 39.4817 109.728 38.3981C109.306 37.8037 108.747 37.3198 108.099 36.9876C107.45 36.6554 106.731 36.4847 106.003 36.4899C105.578 36.5057 105.162 36.617 104.786 36.8156C104.41 37.0141 104.083 37.2948 103.83 37.6368C103.52 38.1565 103.329 38.7391 103.272 39.342C102.765 42.722 103.881 47.0357 106.987 48.7409C107.466 49.0597 108.025 49.2365 108.599 49.2509C109.174 49.2653 109.741 49.1166 110.235 48.8221C110.321 48.7589 110.428 48.7311 110.534 48.7443C110.639 48.7575 110.736 48.8108 110.804 48.8932C110.869 48.9781 110.899 49.0855 110.885 49.192C110.872 49.2986 110.817 49.3955 110.732 49.4616C110.193 49.8617 109.536 50.0722 108.865 50.0604Z" fill="#454545" />
|
||||
<path d="M166.029 161.964C165.906 161.964 165.786 161.92 165.691 161.84C165.597 161.76 165.533 161.65 165.512 161.528C162.03 139.797 155.362 98.3744 155.057 97.1158C155.023 96.9813 155.043 96.8387 155.114 96.719C155.184 96.5994 155.299 96.5122 155.433 96.4764C155.568 96.4454 155.711 96.4683 155.83 96.5402C155.95 96.6121 156.036 96.7275 156.072 96.8621C156.468 98.4759 166.131 158.777 166.547 161.355C166.567 161.492 166.533 161.632 166.451 161.744C166.37 161.856 166.247 161.932 166.11 161.954L166.029 161.964Z" fill="#454545" />
|
||||
<path d="M103.112 184.842L102.977 184.655H102.747H55.0401C50.0527 184.655 45.9305 180.138 45.9305 174.453V116.416C45.9305 110.737 50.0532 106.208 55.0401 106.208H181.016C186.003 106.208 190.134 110.738 190.165 116.419V174.453C190.165 180.138 186.037 184.655 181.049 184.655H131.929H131.726L131.592 184.807L115.869 202.609L103.112 184.842Z" fill="#EEEAE9" stroke="#454545" strokeWidth="0.9" />
|
||||
<path d="M126.486 55.034C118.985 55.034 116.59 45.1377 116.488 44.7114C116.464 44.5944 116.486 44.4726 116.551 44.372C116.615 44.2715 116.717 44.2002 116.833 44.1735C116.89 44.1599 116.95 44.1579 117.008 44.1674C117.066 44.1769 117.122 44.1979 117.172 44.229C117.222 44.2601 117.265 44.3009 117.299 44.3488C117.334 44.3968 117.358 44.451 117.371 44.5084C117.371 44.5998 119.695 54.1408 126.506 54.1408C127.212 54.168 127.916 54.0394 128.567 53.764C129.217 53.4885 129.8 53.0731 130.272 52.5472C132.616 49.8778 131.987 44.7013 131.977 44.6505C131.968 44.5918 131.972 44.532 131.986 44.4745C132.001 44.417 132.027 44.3631 132.063 44.3158C132.099 44.2686 132.144 44.229 132.196 44.1993C132.247 44.1696 132.304 44.1505 132.363 44.143C132.48 44.131 132.598 44.1642 132.692 44.2358C132.787 44.3074 132.85 44.4121 132.87 44.5287C132.87 44.7622 133.57 50.162 130.952 53.1359C130.395 53.7634 129.705 54.2592 128.932 54.5875C128.16 54.9157 127.324 55.0682 126.486 55.034Z" fill="#454545" />
|
||||
<path d="M70.1771 103.176C73.7637 101.377 78.12 99.9134 81.6644 101.817C83.3455 102.866 84.7632 104.287 85.8078 105.971C88.0669 109.136 90.1082 112.451 91.9175 115.893C92.3914 116.848 92.7954 118.019 92.0581 118.706C91.16 119.551 89.7377 118.638 88.9482 117.701C87.5236 116.028 86.3296 114.173 85.3981 112.183C87.2805 114.936 88.7735 117.936 89.8348 121.097C90.0177 121.471 90.0817 121.891 90.0181 122.302C89.8722 122.667 89.588 122.96 89.2274 123.116C88.8667 123.273 88.4587 123.281 88.0922 123.139C87.3497 122.858 86.7046 122.367 86.2347 121.728C84.1638 119.239 82.3741 116.53 80.8983 113.649C82.3828 116.657 83.8796 119.745 84.2431 123.078C84.3088 123.353 84.3162 123.639 84.2649 123.917C84.2135 124.196 84.1045 124.46 83.9449 124.694C83.7065 124.904 83.4062 125.031 83.0894 125.055C82.7726 125.079 82.4565 124.999 82.1891 124.828C81.6793 124.464 81.2568 123.992 80.952 123.445L75.6783 115.778C77.0141 118.725 77.9793 121.827 78.5518 125.012C78.6234 125.274 78.623 125.551 78.5505 125.813C78.2358 126.713 76.8342 126.341 76.1662 125.662C75.1107 124.468 74.2905 123.084 73.7489 121.585C72.0643 117.734 70.4974 113.712 68.6538 109.896C67.1293 106.761 66.4761 105.033 70.1771 103.176Z" fill="#EEEAE9" />
|
||||
<path d="M77.958 126.765L78.0684 126.749C78.2758 126.704 78.4681 126.606 78.6266 126.465C78.785 126.324 78.9042 126.144 78.9726 125.944C79.0614 125.607 79.0675 125.254 78.9905 124.914C78.6521 123.052 78.1839 121.216 77.5894 119.419L80.5096 123.697C80.8645 124.309 81.3549 124.832 81.9432 125.225C82.3005 125.453 82.7244 125.554 83.1464 125.512C83.5684 125.471 83.964 125.288 84.2695 124.994C84.4767 124.712 84.621 124.389 84.6929 124.047C84.7648 123.705 84.7626 123.352 84.6863 123.01C84.5274 121.793 84.252 120.594 83.864 119.429C84.4984 120.359 85.1577 121.183 85.8586 122.011C86.357 122.728 87.0556 123.282 87.867 123.604C88.1454 123.691 88.4383 123.721 88.7284 123.693C89.0186 123.665 89.3002 123.578 89.5565 123.44C89.7497 123.337 89.9205 123.198 90.0587 123.029C90.197 122.859 90.2999 122.664 90.3614 122.455C90.4574 121.958 90.4043 121.445 90.2087 120.979C89.9753 120.255 89.7117 119.535 89.4297 118.828C89.9032 119.214 90.4782 119.455 91.0854 119.521C91.3167 119.539 91.5492 119.507 91.7672 119.428C91.9853 119.348 92.184 119.224 92.3501 119.062C92.871 118.572 93.2855 117.585 92.2992 115.692C90.4856 112.233 88.4385 108.901 86.1719 105.721C85.0837 103.975 83.6092 102.503 81.8619 101.418C78.8572 99.8217 74.971 100.259 69.9541 102.778C65.9002 104.812 66.657 106.884 68.2137 110.097C69.4397 112.62 70.5521 115.275 71.623 117.791C72.1819 119.102 72.7308 120.415 73.2481 121.722C73.8155 123.272 74.6668 124.702 75.7585 125.94C76.0393 126.234 76.3829 126.461 76.7638 126.604C77.1447 126.747 77.5529 126.802 77.958 126.765ZM75.6082 115.306C75.5536 115.304 75.4993 115.313 75.4476 115.33C75.3469 115.387 75.271 115.48 75.2346 115.59C75.1982 115.7 75.2039 115.819 75.2507 115.925C76.5744 118.833 77.527 121.896 78.0858 125.042C78.1393 125.224 78.1475 125.416 78.1096 125.603C78.0928 125.657 78.061 125.706 78.0176 125.744C77.9743 125.781 77.9213 125.806 77.8647 125.814C77.6113 125.827 77.3581 125.786 77.1214 125.695C76.8847 125.604 76.6697 125.464 76.4903 125.284C75.481 124.129 74.6936 122.798 74.1677 121.357C73.6003 120.057 73.0514 118.744 72.5442 117.435C71.4641 114.858 70.3387 112.186 69.0996 109.643C67.6013 106.545 67.1227 105.222 70.4321 103.558C75.1432 101.188 78.7608 100.74 81.5158 102.179C83.1359 103.197 84.5009 104.573 85.5059 106.202C87.7534 109.348 89.7816 112.644 91.5763 116.068C91.8963 116.687 92.3545 117.808 91.808 118.333C91.7304 118.406 91.6381 118.462 91.5372 118.497C91.4363 118.532 91.3291 118.545 91.2228 118.535C90.4804 118.382 89.8188 117.964 89.3603 117.361C88.9613 116.898 88.5854 116.452 88.2259 115.911C87.5179 114.519 86.7231 113.172 85.8463 111.879C85.7786 111.784 85.6785 111.717 85.5648 111.691C85.451 111.665 85.3317 111.681 85.2292 111.737C85.1284 111.796 85.0535 111.891 85.0192 112.002C84.9848 112.114 84.9936 112.234 85.0438 112.34C85.7112 113.761 86.5088 115.118 87.4264 116.392C88.209 117.951 88.8768 119.565 89.4243 121.221C89.5572 121.517 89.6069 121.843 89.5678 122.165C89.5075 122.344 89.3789 122.493 89.2099 122.579C89.0614 122.67 88.8961 122.731 88.7237 122.757C88.5513 122.783 88.3754 122.774 88.2064 122.731C87.5704 122.454 87.0251 122.003 86.6327 121.431C84.5887 118.966 82.8207 116.284 81.3603 113.434C81.2978 113.338 81.2021 113.269 81.0916 113.239C80.981 113.209 80.8633 113.22 80.7607 113.271C80.6582 113.322 80.578 113.41 80.5355 113.516C80.493 113.622 80.491 113.741 80.53 113.848C81.9552 116.804 83.4258 119.855 83.8218 123.132C83.8773 123.341 83.89 123.56 83.8592 123.774C83.8284 123.989 83.7546 124.195 83.6423 124.381C83.4755 124.509 83.2729 124.582 83.0626 124.59C82.8523 124.598 82.6447 124.541 82.4685 124.426C82.0062 124.101 81.6199 123.68 81.3361 123.192L76.0639 115.534C76.0203 115.454 75.9533 115.389 75.8718 115.349C75.7904 115.308 75.6984 115.293 75.6082 115.306Z" fill="#454545" />
|
||||
<path d="M207.372 99.7322C207.43 99.7275 207.486 99.7122 207.538 99.6872C215.214 94.2396 220.02 88.2106 221.846 81.7353C229.021 77.1588 232.984 70.6532 232.606 63.8795C231.975 51.8119 217.685 42.7708 200.833 43.6732C183.98 44.6076 170.809 55.1665 171.449 67.2315C172.089 79.2964 186.367 88.3304 203.184 87.4163C205.507 87.2898 207.816 86.9722 210.087 86.4668C209.922 90.8412 208.779 95.1232 206.742 98.998C206.69 99.085 206.665 99.1856 206.671 99.2869C206.677 99.3882 206.712 99.4854 206.774 99.5662C206.835 99.6469 206.919 99.7074 207.016 99.7398C207.112 99.7722 207.215 99.7751 207.313 99.7481L207.372 99.7322ZM200.922 44.7007C217.2 43.8164 230.955 52.4343 231.59 63.933C231.952 70.3746 228.141 76.5868 221.138 80.9804C221.033 81.051 220.954 81.1535 220.912 81.2727C219.332 87.1032 215.203 92.6024 208.622 97.6282C210.263 93.9118 211.129 89.9003 211.169 85.8383C211.169 85.7615 211.151 85.6857 211.117 85.6166C211.084 85.5475 211.035 85.4869 210.975 85.4395C210.914 85.392 210.844 85.3589 210.769 85.3426C210.694 85.3263 210.616 85.3272 210.541 85.3453C208.13 85.9195 205.672 86.2772 203.197 86.4139C186.902 87.3133 173.124 78.6909 172.49 67.1922C171.855 55.6935 184.6 45.6178 200.892 44.7086L200.922 44.7007Z" fill="#D3CECB" />
|
||||
<path d="M75.9248 170.151C75.6912 170.236 75.5706 170.494 75.6553 170.728C75.7401 170.961 75.9982 171.082 76.2319 170.997L75.9248 170.151ZM105.694 146.36L105.325 146.103L105.694 146.36ZM108.515 125.736L108.549 126.184L108.515 125.736ZM96.4601 134.933L96.8292 135.19L96.4601 134.933ZM151.042 128.024L151.44 128.233L151.042 128.024ZM149.712 113.888L149.745 114.337L149.712 113.888ZM133.632 131.3L133.202 131.17L133.202 131.17L133.632 131.3ZM133.617 131.352L134.047 131.482L134.047 131.482L133.617 131.352ZM157.054 147.878C157.291 147.802 157.421 147.548 157.345 147.312C157.268 147.075 157.015 146.945 156.778 147.021L157.054 147.878ZM133.202 131.17L133.186 131.221L134.047 131.482L134.063 131.431L133.202 131.17ZM136.528 147.943C142.241 142.272 147.672 135.394 151.44 128.233L150.643 127.814C146.927 134.878 141.557 141.683 135.893 147.305L136.528 147.943ZM151.44 128.233C152.08 127.017 153.347 123.307 153.658 119.949C153.814 118.276 153.74 116.614 153.172 115.382C152.884 114.756 152.461 114.228 151.866 113.877C151.271 113.526 150.542 113.375 149.678 113.44L149.745 114.337C150.465 114.283 151.003 114.413 151.409 114.652C151.815 114.892 152.126 115.263 152.355 115.759C152.821 116.77 152.913 118.236 152.762 119.866C152.461 123.114 151.225 126.708 150.643 127.814L151.44 128.233ZM149.678 113.44C145.534 113.75 141.938 116.475 139.139 119.927C136.333 123.388 134.271 127.646 133.202 131.17L134.063 131.431C135.102 128.005 137.114 123.854 139.838 120.494C142.568 117.126 145.959 114.62 149.745 114.337L149.678 113.44ZM133.186 131.221C132.448 133.654 131.751 137 131.92 140.149C132.09 143.295 133.133 146.344 135.983 148.012L136.438 147.236C133.964 145.788 132.981 143.108 132.819 140.101C132.657 137.097 133.325 133.865 134.047 131.482L133.186 131.221ZM96.091 134.675C93.9783 137.703 91.552 142.707 90.6804 147.575C89.8122 152.425 90.4654 157.33 94.7866 159.86L95.2412 159.083C91.4248 156.849 90.7184 152.47 91.5663 147.734C92.411 143.016 94.7766 138.132 96.8292 135.19L96.091 134.675ZM108.481 125.287C105.71 125.494 103.304 126.859 101.256 128.647C99.2081 130.434 97.4895 132.671 96.091 134.675L96.8292 135.19C98.2148 133.204 99.8836 131.039 101.848 129.325C103.811 127.611 106.04 126.372 108.549 126.184L108.481 125.287ZM106.063 146.617C107.294 144.848 110.281 139.483 111.829 134.629C112.599 132.216 113.042 129.845 112.667 128.091C112.477 127.198 112.067 126.431 111.349 125.919C110.635 125.41 109.678 125.197 108.481 125.287L108.549 126.184C109.611 126.105 110.337 126.302 110.827 126.652C111.313 126.999 111.63 127.541 111.787 128.279C112.109 129.786 111.735 131.961 110.972 134.355C109.454 139.114 106.511 144.399 105.325 146.103L106.063 146.617ZM95.3309 159.791C99.3824 155.769 102.824 151.27 106.063 146.617L105.325 146.103C102.099 150.737 98.6929 155.185 94.6969 159.152L95.3309 159.791ZM76.2319 170.997C83.5488 168.342 89.6767 165.404 95.3309 159.791L94.6969 159.152C89.1766 164.632 83.1888 167.515 75.9248 170.151L76.2319 170.997ZM94.7866 159.86C101.288 163.666 109.486 162.902 117.124 160.117C124.773 157.327 131.961 152.476 136.528 147.943L135.893 147.305C131.416 151.749 124.338 156.528 116.816 159.271C109.282 162.019 101.403 162.69 95.2412 159.083L94.7866 159.86ZM135.983 148.012C139.071 149.82 142.811 150.274 146.52 150.039C150.233 149.803 153.958 148.876 157.054 147.878L156.778 147.021C153.72 148.007 150.074 148.912 146.463 149.14C142.848 149.369 139.312 148.918 136.438 147.236L135.983 148.012Z" fill="#D7D3D1" />
|
||||
<path d="M34.1208 1.67272L34.1208 1.67271C39.9029 0.930545 45.3366 1.92561 49.4422 4.11327C53.5488 6.30152 56.2929 9.65956 56.8045 13.6458C57.3161 17.632 55.5083 21.5751 52.0884 24.7305C48.6694 27.8851 43.6661 30.2212 37.8913 30.9639L37.8912 30.9639C36.1449 31.1889 34.3819 31.2561 32.6236 31.1648L32.0474 31.1349L32.1587 31.7011C32.6982 34.4435 33.7686 37.0476 35.3035 39.3693C29.2428 36.2215 26.3184 32.6297 24.9143 29.7128L24.8379 29.5541L24.6742 29.4894C19.3949 27.4043 15.8095 23.6168 15.215 18.9913L15.2149 18.991C14.6999 15.0042 16.5008 11.0607 19.9169 7.90532C23.3321 4.7507 28.3352 2.4146 34.1208 1.67272Z" stroke="#D3CECB" strokeWidth="0.9" />
|
||||
<path d="M61.0231 135.858L48.305 133.863L49.2502 146.414L57.0239 149.239L65.7092 152.397L63.3431 144.054L61.0231 135.858Z" fill="#EEEAE9" />
|
||||
<path d="M66.0579 152.457C66.0648 152.408 66.0613 152.357 66.0477 152.309L61.3616 135.77C61.3421 135.706 61.305 135.649 61.2544 135.604C61.2038 135.56 61.1417 135.529 61.075 135.517L48.3569 133.522C48.3039 133.516 48.2503 133.521 48.1995 133.537C48.1487 133.552 48.1018 133.578 48.0616 133.612C48.0239 133.647 47.9944 133.69 47.9751 133.737C47.9558 133.784 47.9471 133.835 47.9496 133.887L48.9053 146.418C48.9097 146.484 48.9336 146.547 48.9742 146.6C49.0148 146.653 49.0702 146.693 49.1337 146.716L65.5927 152.7C65.6534 152.724 65.7197 152.73 65.7838 152.719C65.848 152.708 65.9075 152.679 65.9554 152.636C66.0052 152.587 66.0406 152.525 66.0579 152.457ZM60.7765 136.167L65.2501 151.856L49.6494 146.181L48.7496 134.284L60.7765 136.167Z" fill="#454545" />
|
||||
<path d="M55.3166 137.493L51.3945 141.013L15.4608 102.75L19.3828 99.2312L55.3166 137.493Z" fill="#EEEAE9" />
|
||||
<path d="M55.6719 137.552L55.6801 137.504C55.6838 137.459 55.6774 137.413 55.6612 137.37C55.645 137.327 55.6195 137.289 55.5863 137.256L19.6493 98.9922C19.6177 98.9586 19.5797 98.9313 19.5375 98.912C19.4953 98.8927 19.4496 98.8817 19.4032 98.8797C19.3104 98.8779 19.2205 98.9099 19.1509 98.9694L15.2269 102.5C15.1925 102.529 15.1645 102.565 15.1448 102.606C15.1251 102.646 15.1141 102.69 15.1124 102.735C15.1107 102.78 15.1183 102.825 15.1349 102.867C15.1515 102.909 15.1766 102.948 15.2087 102.98L51.1388 141.243C51.2014 141.311 51.2888 141.353 51.382 141.358C51.4752 141.364 51.5665 141.333 51.6361 141.273L55.56 137.743C55.6186 137.693 55.6581 137.626 55.6719 137.552ZM19.3681 99.7079L54.811 137.466L51.4142 140.519L15.9632 102.767L19.3681 99.7079Z" fill="#5C524D" />
|
||||
<path d="M15.465 102.744L13.3205 108.151L49.2506 146.414L51.4021 141.008L15.465 102.744Z" fill="#5C524D" />
|
||||
<path d="M51.7505 141.068C51.7591 141.015 51.7552 140.961 51.7392 140.91C51.7231 140.858 51.6954 140.811 51.658 140.772L15.728 102.509C15.6862 102.466 15.6344 102.434 15.5772 102.416C15.52 102.398 15.4592 102.395 15.4004 102.405C15.3415 102.416 15.2864 102.441 15.2401 102.478C15.1938 102.515 15.1578 102.563 15.1352 102.617L12.9907 108.024C12.966 108.084 12.9591 108.15 12.9709 108.214C12.9827 108.278 13.0127 108.337 13.0575 108.386L48.9945 146.65C49.0356 146.693 49.0869 146.724 49.1438 146.742C49.2006 146.761 49.261 146.764 49.3195 146.753C49.3779 146.742 49.4325 146.717 49.4781 146.68C49.5237 146.643 49.5589 146.595 49.5803 146.541L51.7318 141.135L51.7505 141.068ZM15.5906 103.389L50.994 141.085L49.1238 145.775L13.7226 108.108L15.5906 103.389Z" fill="#5C524D" />
|
||||
<path d="M25.0873 97.5939L19.3945 99.228L55.3245 137.491L61.0174 135.857L25.0873 97.5939Z" fill="#5C524D" />
|
||||
<path d="M61.367 135.946C61.3741 135.893 61.3695 135.839 61.3535 135.788C61.3376 135.737 61.3107 135.69 61.2745 135.65L25.3492 97.3593C25.3025 97.3132 25.2443 97.2799 25.1805 97.2627C25.1166 97.2455 25.0494 97.2452 24.9856 97.2616L19.2858 98.8944C19.2279 98.9097 19.1755 98.9401 19.1341 98.9824C19.0927 99.0246 19.0639 99.0771 19.0507 99.1344C19.0349 99.1901 19.034 99.2491 19.0482 99.3055C19.0623 99.362 19.091 99.414 19.1315 99.4567L55.0616 137.72C55.1107 137.764 55.1717 137.793 55.2371 137.805C55.3026 137.816 55.3699 137.809 55.431 137.783L61.1296 136.157C61.1865 136.14 61.2379 136.109 61.279 136.067C61.3201 136.025 61.3496 135.974 61.3647 135.918L61.367 135.946ZM25.01 97.9949L60.4135 135.691L55.4693 137.103L20.0345 99.381L25.01 97.9949Z" fill="#454545" />
|
||||
<path d="M63.3443 144.054L60.8645 144.117L57.3153 147.305L57.0251 149.239L65.7104 152.397L63.3443 144.054Z" fill="#B5AFAB" />
|
||||
<path d="M66.0577 152.457C66.0646 152.408 66.0611 152.357 66.0475 152.308L63.6825 143.958C63.6602 143.885 63.6136 143.82 63.5499 143.775C63.4863 143.73 63.4092 143.706 63.3308 143.708L60.8499 143.779C60.7667 143.779 60.687 143.811 60.6267 143.866L57.0786 147.048C57.0218 147.104 56.9823 147.175 56.9644 147.252L56.6801 149.194C56.6674 149.271 56.6828 149.35 56.7237 149.418C56.7646 149.485 56.8284 149.536 56.9037 149.562L65.589 152.72C65.6497 152.744 65.716 152.751 65.7801 152.74C65.8443 152.728 65.9038 152.7 65.9517 152.657C66.0061 152.602 66.043 152.533 66.0577 152.457ZM63.0822 144.402L65.1872 151.845L57.4136 149.019L57.6438 147.475L61.0336 144.462L63.0822 144.402Z" fill="#454545" />
|
||||
<path d="M73.8776 59.2742L68.5595 58.375L64.808 62.2459L64.0142 56.9138L59.1738 54.5463L64.0001 52.1437L64.7589 46.8115L68.5384 50.6543L73.8425 49.727L71.3485 54.5112L73.8776 59.2742Z" fill="#D3CECB" />
|
||||
<path d="M31.6856 197.783L25.1642 196.68L24.9049 196.636L24.7218 196.825L20.1199 201.574L19.146 195.033L19.1073 194.773L18.8712 194.657L12.9346 191.753L18.8544 188.806L19.0896 188.689L19.1266 188.429L20.0574 181.888L24.6946 186.603L24.8786 186.79L25.1372 186.745L31.6422 185.607L28.5826 191.477L28.461 191.71L28.5844 191.942L31.6856 197.783Z" stroke="#D3CECB" />
|
||||
<path d="M245.799 173.629L238.276 172.357L232.97 177.832L231.847 170.29L225 166.941L231.827 163.542L232.9 156L238.246 161.436L245.749 160.124L242.221 166.891L245.799 173.629Z" fill="#BAB5B1" />
|
||||
<path d="M220.924 155.81L219.388 153.342L219.249 153.119L218.986 153.107L216.081 152.974L217.952 150.748L218.121 150.547L218.051 150.293L217.279 147.493L219.973 148.584L220.217 148.683L220.436 148.538L222.862 146.939L222.66 149.84L222.642 150.102L222.847 150.266L225.116 152.077L222.291 152.779L222.036 152.842L221.943 153.089L220.924 155.81Z" stroke="#D3CECB" />
|
||||
<path d="M46.3063 94.4625L41.8463 90.7153L41.665 90.5631L41.4369 90.6262L35.8235 92.1786L38.0027 86.777L38.0912 86.5576L37.9606 86.3603L34.7482 81.5065L40.5584 81.9101L40.7943 81.9264L40.9416 81.7415L44.5671 77.1896L45.9847 82.8389L46.0422 83.068L46.2635 83.1509L51.7106 85.1897L46.7684 88.2814L46.5677 88.407L46.5575 88.6435L46.3063 94.4625Z" stroke="#D3CECB" strokeWidth="0.9" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default Empty;
|
||||
44
src/assets/empty.svg
Normal file
44
src/assets/empty.svg
Normal file
@@ -0,0 +1,44 @@
|
||||
<svg width="246" height="204" viewBox="0 0 246 204" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.9664 80.7056C1.9299 101.534 -5.31519 125.861 4.55784 148.18C22.5467 188.845 120.573 177.416 163.26 161.447C283.487 116.471 225.675 -1.54332 95.6636 27.6382C59.2626 35.8086 30.003 59.877 15.9664 80.7056Z" fill="#E1DDDB" fill-opacity="0.3"/>
|
||||
<path d="M95.6307 23.4976C101.102 13.3476 109.932 6.31365 123.036 10.536C124.191 11.0005 125.403 11.311 126.639 11.4597C127.895 11.386 129.146 11.2369 130.384 11.0131C136.292 10.5259 140.656 16.2505 143.529 21.427C148.867 31.0796 158.622 44.1833 156.724 55.7847C155.252 64.7776 146.797 71.0097 138.261 74.1562C128.636 77.7063 118.244 78.655 108.136 76.9069C103.061 76.034 97.813 74.3288 94.159 70.6443C89.084 65.5084 88.069 57.6016 88.4547 50.3443C88.9926 42.2345 91.1749 31.8104 95.6307 23.4976Z" fill="white"/>
|
||||
<path d="M117.991 78.2569C114.66 78.2567 111.336 77.9715 108.054 77.4043C101.649 76.3081 97.0006 74.2172 93.8439 71.0098C89.4084 66.554 87.4393 59.652 87.9772 50.3952C88.5558 40.7933 91.2557 30.6534 95.2142 23.2845C99.8528 14.657 108.46 5.35964 123.137 10.0895L123.837 10.3331C124.73 10.6795 125.665 10.9015 126.618 10.9929C127.348 10.9968 128.077 10.9219 128.79 10.7696C129.278 10.6884 129.805 10.597 130.303 10.5564C135.165 10.1403 139.752 13.7334 143.894 21.2038C144.848 22.9293 145.924 24.7563 147.091 26.6949C152.278 35.3732 158.733 46.1728 157.139 55.866C155.871 63.712 148.877 70.7155 138.392 74.5928C131.864 77.0187 124.955 78.2596 117.991 78.2569ZM96.0972 23.721C92.1996 30.9782 89.5302 40.976 88.9922 50.4459C88.4543 59.3982 90.332 66.0972 94.5544 70.3602C97.5994 73.4053 102.076 75.4352 108.277 76.4502C118.3 78.1754 128.602 77.223 138.139 73.6894C148.289 69.9238 155.079 63.1842 156.307 55.6732C157.84 46.325 151.486 35.6777 146.38 27.1212C145.223 25.1826 144.127 23.3556 143.163 21.6199C139.214 14.5149 134.941 11.0741 130.465 11.4699C129.988 11.4699 129.521 11.5917 129.034 11.6729C128.218 11.8545 127.384 11.9464 126.547 11.947C125.503 11.8549 124.477 11.6122 123.502 11.2263L122.812 10.9929C108.744 6.45585 100.482 15.4284 95.9957 23.7413L96.0972 23.721Z" fill="#454545"/>
|
||||
<path d="M182.845 167.75C182.845 167.75 178.596 94.152 167.857 84.3978C152.409 70.4314 97.5788 67.5184 86.4443 70.3909C66.7533 75.4659 53.0508 106.22 53.0508 106.22L85.7135 115.985C85.7845 141.248 88.3119 167.75 88.3119 167.75H182.845Z" fill="#03C7E8"/>
|
||||
<path d="M84.2307 146.058C84.1627 146.053 84.0963 146.035 84.0354 146.004C83.9746 145.973 83.9204 145.93 83.8761 145.878C83.8317 145.827 83.7981 145.766 83.7771 145.702C83.7561 145.637 83.7481 145.568 83.7537 145.5L88.1689 87.6451C88.1741 87.5757 88.1928 87.5081 88.2242 87.446C88.2556 87.3839 88.299 87.3286 88.3518 87.2833C88.4046 87.238 88.4659 87.2037 88.532 87.1821C88.5982 87.1606 88.668 87.1524 88.7373 87.1579C88.8063 87.163 88.8736 87.1819 88.9352 87.2134C88.9967 87.2449 89.0514 87.2884 89.0959 87.3414C89.1403 87.3944 89.1737 87.4557 89.1941 87.5219C89.2144 87.588 89.2213 87.6575 89.2144 87.7263L84.7991 145.581C84.794 145.65 84.7752 145.718 84.7437 145.779C84.7122 145.841 84.6686 145.895 84.6156 145.94C84.5627 145.984 84.5013 146.018 84.4352 146.038C84.3691 146.058 84.2995 146.065 84.2307 146.058Z" fill="#454545"/>
|
||||
<path d="M114.163 90.7217C117.828 95.279 123.298 98.527 129.196 98.6184C129.959 98.6607 130.724 98.5574 131.449 98.3139C132.442 97.8894 133.288 97.1838 133.885 96.2839C136.544 92.6299 136.656 87.7071 135.986 83.2411C135.509 80.1048 134.595 76.8162 132.22 74.7151C129.429 72.2487 125.379 72.0152 121.654 71.9137C117.929 71.8122 109.291 70.7262 107.911 75.314C106.622 79.5059 111.707 87.6665 114.163 90.7217Z" fill="#454545"/>
|
||||
<path d="M129.42 99.0646H129.187C123.553 98.9732 117.809 95.9587 113.82 91.0055C111.17 87.7169 106.146 79.536 107.476 75.1816C108.805 70.8273 115.9 71.1216 120.123 71.3855L121.676 71.4566C125.786 71.5784 129.704 71.8829 132.516 74.3696C135.327 76.8564 136.028 80.5307 136.424 83.1697C137.286 88.874 136.556 93.3197 134.252 96.5372C133.611 97.5159 132.692 98.2797 131.613 98.7296C130.908 98.9745 130.165 99.0881 129.42 99.0646ZM116.662 72.1671C113.089 72.1671 109.181 72.6847 108.339 75.4455C107.11 79.4142 112.064 87.4022 114.51 90.4472C118.336 95.1974 123.827 98.08 129.197 98.1714C129.908 98.2085 130.62 98.1157 131.298 97.8973C132.211 97.5007 132.988 96.8442 133.531 96.0094C135.683 93.0456 136.363 88.7623 135.561 83.3016C135.185 80.7946 134.404 77.2116 131.947 75.0395C129.491 72.8674 125.604 72.4614 121.666 72.3498C121.209 72.3498 120.65 72.3498 120.102 72.2787C119.067 72.228 117.88 72.1671 116.662 72.1671Z" fill="#454545"/>
|
||||
<path d="M137.874 43.808C138.249 42.5429 138.885 41.3706 139.742 40.3671C140.181 39.8733 140.761 39.5266 141.404 39.374C142.047 39.2215 142.721 39.2706 143.335 39.5145C143.762 39.7688 144.12 40.1237 144.379 40.5484C144.637 40.973 144.787 41.4544 144.817 41.9505C144.867 42.9487 144.701 43.9458 144.33 44.8737C143.765 46.6382 142.787 48.2423 141.477 49.5529C140.827 50.204 140.05 50.7154 139.195 51.0558C138.34 51.3961 137.424 51.5582 136.504 51.5321" fill="white"/>
|
||||
<path d="M136.89 51.9282H136.474C136.367 51.9179 136.268 51.8667 136.198 51.7854C136.128 51.7041 136.093 51.5989 136.098 51.4917C136.101 51.4379 136.114 51.3851 136.138 51.3366C136.161 51.2881 136.195 51.245 136.235 51.2098C136.276 51.1747 136.324 51.1482 136.375 51.1321C136.427 51.116 136.481 51.1106 136.535 51.1162C137.403 51.1458 138.268 50.9971 139.076 50.6794C139.884 50.3617 140.619 49.8816 141.234 49.2689C142.496 48.0042 143.436 46.4553 143.975 44.7521C144.329 43.8802 144.488 42.9414 144.442 42.0015C144.417 41.5693 144.287 41.1497 144.062 40.7798C143.837 40.4098 143.525 40.1009 143.152 39.8801C142.615 39.6774 142.028 39.6427 141.47 39.7804C140.911 39.9181 140.408 40.2218 140.026 40.6515C139.218 41.6241 138.614 42.7494 138.25 43.9604C138.232 44.0102 138.204 44.0559 138.168 44.0947C138.132 44.1336 138.089 44.1648 138.041 44.1866C137.992 44.2083 137.94 44.2202 137.887 44.2214C137.834 44.2227 137.782 44.2133 137.732 44.1939C137.632 44.1572 137.55 44.0822 137.504 43.9852C137.458 43.8883 137.453 43.7772 137.489 43.6762C137.886 42.3539 138.557 41.1298 139.458 40.0831C139.958 39.5304 140.615 39.1452 141.342 38.9799C142.069 38.8146 142.828 38.8773 143.518 39.1595C144.012 39.44 144.429 39.8394 144.73 40.3214C145.031 40.8034 145.208 41.353 145.243 41.9203C145.299 42.9602 145.126 43.9997 144.736 44.9653C144.16 46.8097 143.143 48.4856 141.772 49.8474C140.468 51.1359 138.723 51.8799 136.89 51.9282Z" fill="#454545"/>
|
||||
<path d="M130.902 61.4082L132.475 77.0595C132.475 77.0595 131.714 85.961 121.929 84.1645C119.055 83.6096 116.34 82.4241 113.979 80.6936C111.619 78.963 109.671 76.7304 108.277 74.1566L108.643 46.0715C108.582 44.9246 110.967 40.9965 109.84 31.0698C113.195 30.7268 116.441 29.6886 119.371 28.0214C122.302 26.3542 124.853 24.0946 126.862 21.3867C126.862 21.3867 131.399 26.9895 133.307 28.7252C134.839 30.0073 136.203 31.477 137.367 33.0998C140.412 37.6673 140.28 45.1174 139.549 50.3548C138.839 54.6584 136.342 61.5198 130.902 61.4082Z" fill="white"/>
|
||||
<path d="M124.375 84.8953C123.527 84.8897 122.681 84.8082 121.847 84.6517C118.893 84.0752 116.102 82.8527 113.676 81.0717C111.249 79.2906 109.246 76.9951 107.81 74.3495C107.795 74.2826 107.795 74.2133 107.81 74.1465C107.81 74.1465 108.175 46.2441 108.175 46.0716C108.218 45.5697 108.323 45.0751 108.49 44.5998C109.058 42.651 110.226 38.591 109.383 31.1206C109.377 31.0608 109.382 31.0004 109.4 30.9428C109.417 30.8852 109.446 30.8318 109.485 30.7857C109.519 30.736 109.565 30.6948 109.617 30.6649C109.67 30.6351 109.729 30.6174 109.789 30.6131C113.072 30.2679 116.248 29.2475 119.118 27.6161C121.988 25.9847 124.49 23.7774 126.466 21.133C126.507 21.0737 126.562 21.0246 126.625 20.9894C126.688 20.9542 126.759 20.9339 126.831 20.93C126.904 20.9272 126.977 20.9414 127.044 20.9713C127.111 21.0012 127.17 21.0461 127.217 21.1026C127.217 21.1026 131.754 26.6952 133.621 28.3801C135.158 29.6918 136.522 31.1924 137.681 32.8461C141.193 38.1647 140.422 46.8836 139.935 50.3853C139.346 54.5773 136.89 61.5503 131.439 61.865L132.952 77.0189C132.709 79.4527 131.521 81.6941 129.643 83.2612C128.121 84.3844 126.265 84.9603 124.375 84.8953ZM108.693 74.045C110.072 76.5357 111.98 78.6941 114.282 80.3687C116.585 82.0433 119.226 83.1935 122.02 83.7382C124.943 84.266 127.308 83.86 129.054 82.5304C130.698 81.131 131.753 79.1626 132.008 77.0189L130.444 61.459C130.439 61.393 130.447 61.3266 130.468 61.2637C130.489 61.2009 130.522 61.143 130.566 61.0936C130.611 61.0479 130.665 61.0118 130.724 60.9874C130.784 60.963 130.847 60.9508 130.911 60.9515H131.033C136.108 60.9515 138.433 54.2423 138.991 50.2534C139.478 46.8531 140.229 38.4185 136.89 33.3638C135.757 31.7708 134.431 30.3252 132.941 29.0602C130.797 26.8597 128.764 24.5527 126.851 22.148C122.766 27.2984 116.828 30.6462 110.307 31.4759C111.068 38.8346 109.901 42.8845 109.292 44.8536C109.159 45.2422 109.067 45.6436 109.018 46.0513C109.018 46.0513 109.058 46.0817 108.693 74.045Z" fill="#454545"/>
|
||||
<path d="M131.438 66.5538C128.868 67.0035 126.223 66.7221 123.805 65.7418C118.233 63.7828 117.908 59.9766 117.908 59.9766C117.908 59.9766 122.597 62.9201 130.9 61.3773L131.438 66.5538Z" fill="#454545"/>
|
||||
<path d="M129.176 67.2139C127.292 67.1821 125.427 66.8391 123.655 66.1989C117.879 64.1689 117.483 60.2206 117.463 60.1089C117.455 60.025 117.471 59.9405 117.508 59.8652C117.546 59.7899 117.605 59.7268 117.677 59.6833C117.749 59.6397 117.832 59.6175 117.916 59.6192C118.001 59.6209 118.083 59.6464 118.153 59.6928C118.153 59.6928 122.812 62.5246 130.82 61.0326C130.945 61.0116 131.073 61.0408 131.176 61.1138C131.226 61.15 131.268 61.1971 131.298 61.2516C131.327 61.306 131.345 61.3664 131.348 61.4284L131.876 66.5034C131.898 66.5877 131.895 66.6764 131.868 66.7591C131.841 66.8418 131.791 66.9151 131.724 66.9703C131.68 67.0105 131.629 67.0411 131.573 67.0603C131.517 67.0795 131.458 67.0869 131.399 67.082C130.664 67.1971 129.92 67.2413 129.176 67.2139ZM118.59 60.86C119.036 62.0273 120.315 64.0674 123.959 65.3463C126.186 66.196 128.589 66.4786 130.952 66.1685L130.516 61.9359C124.406 62.9611 120.315 61.6822 118.59 60.86Z" fill="#454545"/>
|
||||
<path d="M124.061 36.0742C124.061 36.0742 129.846 43.0879 128.78 44.519C127.715 45.9502 124.284 45.4122 124.284 45.4122" fill="white"/>
|
||||
<path d="M125.714 45.9592C125.211 45.9586 124.71 45.9247 124.212 45.8577C124.106 45.8253 124.017 45.7561 123.958 45.6627C123.9 45.5693 123.878 45.4581 123.895 45.3494C123.912 45.2408 123.968 45.142 124.052 45.0713C124.137 45.0006 124.244 44.9627 124.354 44.9645C125.237 45.1066 127.683 45.2385 128.414 44.2438C128.87 43.6348 126.668 39.9504 123.694 36.3573C123.657 36.312 123.628 36.2598 123.611 36.2036C123.594 36.1475 123.588 36.0885 123.594 36.03C123.6 35.9716 123.617 35.9148 123.644 35.863C123.672 35.8112 123.709 35.7653 123.755 35.728C123.849 35.6544 123.968 35.6197 124.087 35.631C124.206 35.6423 124.316 35.6988 124.394 35.7889C126.201 37.9813 130.281 43.239 129.134 44.7818C128.414 45.7562 126.881 45.9592 125.714 45.9592Z" fill="#454545"/>
|
||||
<path d="M131.302 37.6836C131.774 37.6204 132.06 36.8441 131.941 35.9495C131.821 35.055 131.341 34.381 130.869 34.4442C130.397 34.5074 130.111 35.2838 130.23 36.1783C130.35 37.0729 130.83 37.7468 131.302 37.6836Z" fill="#454545"/>
|
||||
<path d="M117.067 37.7043C117.543 37.6987 117.921 36.9626 117.911 36.0602C117.9 35.1577 117.505 34.4306 117.029 34.4362C116.552 34.4418 116.175 35.1779 116.185 36.0803C116.196 36.9828 116.59 37.7099 117.067 37.7043Z" fill="#454545"/>
|
||||
<path d="M111.798 41.8686C111.449 40.5288 110.853 39.2657 110.042 38.1436C109.575 37.5067 108.964 36.9903 108.258 36.6373C107.551 36.2842 106.771 36.1047 105.982 36.1136C105.494 36.1326 105.016 36.2622 104.586 36.4925C104.155 36.7228 103.782 37.0479 103.495 37.4432C103.153 38.0128 102.938 38.6501 102.866 39.3108C102.348 42.7923 103.515 47.3293 106.794 49.1259C107.347 49.4737 107.988 49.6582 108.641 49.6582C109.295 49.6582 109.935 49.4737 110.488 49.1259" fill="white"/>
|
||||
<path d="M108.865 50.0604C108.072 50.0422 107.296 49.8333 106.601 49.4514C103.171 47.5635 101.932 42.8844 102.47 39.2202C102.547 38.5008 102.783 37.8074 103.161 37.1902C103.481 36.7428 103.898 36.3741 104.382 36.1121C104.865 35.8501 105.402 35.7016 105.952 35.6779C106.81 35.6717 107.657 35.8702 108.423 36.2567C109.189 36.6433 109.852 37.2069 110.357 37.9007C111.203 39.0603 111.823 40.3687 112.184 41.7577C112.212 41.86 112.2 41.9693 112.148 42.0623C112.097 42.1552 112.012 42.2244 111.91 42.2551C111.86 42.2722 111.807 42.2789 111.754 42.2747C111.702 42.2706 111.651 42.2557 111.604 42.2309C111.557 42.2062 111.516 42.1721 111.483 42.1309C111.45 42.0897 111.426 42.0421 111.413 41.9912C111.077 40.6998 110.506 39.4817 109.728 38.3981C109.306 37.8037 108.747 37.3198 108.099 36.9876C107.45 36.6554 106.731 36.4847 106.003 36.4899C105.578 36.5057 105.162 36.617 104.786 36.8156C104.41 37.0141 104.083 37.2948 103.83 37.6368C103.52 38.1565 103.329 38.7391 103.272 39.342C102.765 42.722 103.881 47.0357 106.987 48.7409C107.466 49.0597 108.025 49.2365 108.599 49.2509C109.174 49.2653 109.741 49.1166 110.235 48.8221C110.321 48.7589 110.428 48.7311 110.534 48.7443C110.639 48.7575 110.736 48.8108 110.804 48.8932C110.869 48.9781 110.899 49.0855 110.885 49.192C110.872 49.2986 110.817 49.3955 110.732 49.4616C110.193 49.8617 109.536 50.0722 108.865 50.0604Z" fill="#454545"/>
|
||||
<path d="M166.029 161.964C165.906 161.964 165.786 161.92 165.691 161.84C165.597 161.76 165.533 161.65 165.512 161.528C162.03 139.797 155.362 98.3744 155.057 97.1158C155.023 96.9813 155.043 96.8387 155.114 96.719C155.184 96.5994 155.299 96.5122 155.433 96.4764C155.568 96.4454 155.711 96.4683 155.83 96.5402C155.95 96.6121 156.036 96.7275 156.072 96.8621C156.468 98.4759 166.131 158.777 166.547 161.355C166.567 161.492 166.533 161.632 166.451 161.744C166.37 161.856 166.247 161.932 166.11 161.954L166.029 161.964Z" fill="#454545"/>
|
||||
<path d="M103.112 184.842L102.977 184.655H102.747H55.0401C50.0527 184.655 45.9305 180.138 45.9305 174.453V116.416C45.9305 110.737 50.0532 106.208 55.0401 106.208H181.016C186.003 106.208 190.134 110.738 190.165 116.419V174.453C190.165 180.138 186.037 184.655 181.049 184.655H131.929H131.726L131.592 184.807L115.869 202.609L103.112 184.842Z" fill="white" stroke="#454545" stroke-width="0.9"/>
|
||||
<path d="M126.486 55.034C118.985 55.034 116.59 45.1377 116.488 44.7114C116.464 44.5944 116.486 44.4726 116.551 44.372C116.615 44.2715 116.717 44.2002 116.833 44.1735C116.89 44.1599 116.95 44.1579 117.008 44.1674C117.066 44.1769 117.122 44.1979 117.172 44.229C117.222 44.2601 117.265 44.3009 117.299 44.3488C117.334 44.3968 117.358 44.451 117.371 44.5084C117.371 44.5998 119.695 54.1408 126.506 54.1408C127.212 54.168 127.916 54.0394 128.567 53.764C129.217 53.4885 129.8 53.0731 130.272 52.5472C132.616 49.8778 131.987 44.7013 131.977 44.6505C131.968 44.5918 131.972 44.532 131.986 44.4745C132.001 44.417 132.027 44.3631 132.063 44.3158C132.099 44.2686 132.144 44.229 132.196 44.1993C132.247 44.1696 132.304 44.1505 132.363 44.143C132.48 44.131 132.598 44.1642 132.692 44.2358C132.787 44.3074 132.85 44.4121 132.87 44.5287C132.87 44.7622 133.57 50.162 130.952 53.1359C130.395 53.7634 129.705 54.2592 128.932 54.5875C128.16 54.9157 127.324 55.0682 126.486 55.034Z" fill="#454545"/>
|
||||
<path d="M70.1771 103.176C73.7637 101.377 78.12 99.9134 81.6644 101.817C83.3455 102.866 84.7632 104.287 85.8078 105.971C88.0669 109.136 90.1082 112.451 91.9175 115.893C92.3914 116.848 92.7954 118.019 92.0581 118.706C91.16 119.551 89.7377 118.638 88.9482 117.701C87.5236 116.028 86.3296 114.173 85.3981 112.183C87.2805 114.936 88.7735 117.936 89.8348 121.097C90.0177 121.471 90.0817 121.891 90.0181 122.302C89.8722 122.667 89.588 122.96 89.2274 123.116C88.8667 123.273 88.4587 123.281 88.0922 123.139C87.3497 122.858 86.7046 122.367 86.2347 121.728C84.1638 119.239 82.3741 116.53 80.8983 113.649C82.3828 116.657 83.8796 119.745 84.2431 123.078C84.3088 123.353 84.3162 123.639 84.2649 123.917C84.2135 124.196 84.1045 124.46 83.9449 124.694C83.7065 124.904 83.4062 125.031 83.0894 125.055C82.7726 125.079 82.4565 124.999 82.1891 124.828C81.6793 124.464 81.2568 123.992 80.952 123.445L75.6783 115.778C77.0141 118.725 77.9793 121.827 78.5518 125.012C78.6234 125.274 78.623 125.551 78.5505 125.813C78.2358 126.713 76.8342 126.341 76.1662 125.662C75.1107 124.468 74.2905 123.084 73.7489 121.585C72.0643 117.734 70.4974 113.712 68.6538 109.896C67.1293 106.761 66.4761 105.033 70.1771 103.176Z" fill="white"/>
|
||||
<path d="M77.958 126.765L78.0684 126.749C78.2758 126.704 78.4681 126.606 78.6266 126.465C78.785 126.324 78.9042 126.144 78.9726 125.944C79.0614 125.607 79.0675 125.254 78.9905 124.914C78.6521 123.052 78.1839 121.216 77.5894 119.419L80.5096 123.697C80.8645 124.309 81.3549 124.832 81.9432 125.225C82.3005 125.453 82.7244 125.554 83.1464 125.512C83.5684 125.471 83.964 125.288 84.2695 124.994C84.4767 124.712 84.621 124.389 84.6929 124.047C84.7648 123.705 84.7626 123.352 84.6863 123.01C84.5274 121.793 84.252 120.594 83.864 119.429C84.4984 120.359 85.1577 121.183 85.8586 122.011C86.357 122.728 87.0556 123.282 87.867 123.604C88.1454 123.691 88.4383 123.721 88.7284 123.693C89.0186 123.665 89.3002 123.578 89.5565 123.44C89.7497 123.337 89.9205 123.198 90.0587 123.029C90.197 122.859 90.2999 122.664 90.3614 122.455C90.4574 121.958 90.4043 121.445 90.2087 120.979C89.9753 120.255 89.7117 119.535 89.4297 118.828C89.9032 119.214 90.4782 119.455 91.0854 119.521C91.3167 119.539 91.5492 119.507 91.7672 119.428C91.9853 119.348 92.184 119.224 92.3501 119.062C92.871 118.572 93.2855 117.585 92.2992 115.692C90.4856 112.233 88.4385 108.901 86.1719 105.721C85.0837 103.975 83.6092 102.503 81.8619 101.418C78.8572 99.8217 74.971 100.259 69.9541 102.778C65.9002 104.812 66.657 106.884 68.2137 110.097C69.4397 112.62 70.5521 115.275 71.623 117.791C72.1819 119.102 72.7308 120.415 73.2481 121.722C73.8155 123.272 74.6668 124.702 75.7585 125.94C76.0393 126.234 76.3829 126.461 76.7638 126.604C77.1447 126.747 77.5529 126.802 77.958 126.765ZM75.6082 115.306C75.5536 115.304 75.4993 115.313 75.4476 115.33C75.3469 115.387 75.271 115.48 75.2346 115.59C75.1982 115.7 75.2039 115.819 75.2507 115.925C76.5744 118.833 77.527 121.896 78.0858 125.042C78.1393 125.224 78.1475 125.416 78.1096 125.603C78.0928 125.657 78.061 125.706 78.0176 125.744C77.9743 125.781 77.9213 125.806 77.8647 125.814C77.6113 125.827 77.3581 125.786 77.1214 125.695C76.8847 125.604 76.6697 125.464 76.4903 125.284C75.481 124.129 74.6936 122.798 74.1677 121.357C73.6003 120.057 73.0514 118.744 72.5442 117.435C71.4641 114.858 70.3387 112.186 69.0996 109.643C67.6013 106.545 67.1227 105.222 70.4321 103.558C75.1432 101.188 78.7608 100.74 81.5158 102.179C83.1359 103.197 84.5009 104.573 85.5059 106.202C87.7534 109.348 89.7816 112.644 91.5763 116.068C91.8963 116.687 92.3545 117.808 91.808 118.333C91.7304 118.406 91.6381 118.462 91.5372 118.497C91.4363 118.532 91.3291 118.545 91.2228 118.535C90.4804 118.382 89.8188 117.964 89.3603 117.361C88.9613 116.898 88.5854 116.452 88.2259 115.911C87.5179 114.519 86.7231 113.172 85.8463 111.879C85.7786 111.784 85.6785 111.717 85.5648 111.691C85.451 111.665 85.3317 111.681 85.2292 111.737C85.1284 111.796 85.0535 111.891 85.0192 112.002C84.9848 112.114 84.9936 112.234 85.0438 112.34C85.7112 113.761 86.5088 115.118 87.4264 116.392C88.209 117.951 88.8768 119.565 89.4243 121.221C89.5572 121.517 89.6069 121.843 89.5678 122.165C89.5075 122.344 89.3789 122.493 89.2099 122.579C89.0614 122.67 88.8961 122.731 88.7237 122.757C88.5513 122.783 88.3754 122.774 88.2064 122.731C87.5704 122.454 87.0251 122.003 86.6327 121.431C84.5887 118.966 82.8207 116.284 81.3603 113.434C81.2978 113.338 81.2021 113.269 81.0916 113.239C80.981 113.209 80.8633 113.22 80.7607 113.271C80.6582 113.322 80.578 113.41 80.5355 113.516C80.493 113.622 80.491 113.741 80.53 113.848C81.9552 116.804 83.4258 119.855 83.8218 123.132C83.8773 123.341 83.89 123.56 83.8592 123.774C83.8284 123.989 83.7546 124.195 83.6423 124.381C83.4755 124.509 83.2729 124.582 83.0626 124.59C82.8523 124.598 82.6447 124.541 82.4685 124.426C82.0062 124.101 81.6199 123.68 81.3361 123.192L76.0639 115.534C76.0203 115.454 75.9533 115.389 75.8718 115.349C75.7904 115.308 75.6984 115.293 75.6082 115.306Z" fill="#454545"/>
|
||||
<path d="M207.372 99.7322C207.43 99.7275 207.486 99.7122 207.538 99.6872C215.214 94.2396 220.02 88.2106 221.846 81.7353C229.021 77.1588 232.984 70.6532 232.606 63.8795C231.975 51.8119 217.685 42.7708 200.833 43.6732C183.98 44.6076 170.809 55.1665 171.449 67.2315C172.089 79.2964 186.367 88.3304 203.184 87.4163C205.507 87.2898 207.816 86.9722 210.087 86.4668C209.922 90.8412 208.779 95.1232 206.742 98.998C206.69 99.085 206.665 99.1856 206.671 99.2869C206.677 99.3882 206.712 99.4854 206.774 99.5662C206.835 99.6469 206.919 99.7074 207.016 99.7398C207.112 99.7722 207.215 99.7751 207.313 99.7481L207.372 99.7322ZM200.922 44.7007C217.2 43.8164 230.955 52.4343 231.59 63.933C231.952 70.3746 228.141 76.5868 221.138 80.9804C221.033 81.051 220.954 81.1535 220.912 81.2727C219.332 87.1032 215.203 92.6024 208.622 97.6282C210.263 93.9118 211.129 89.9003 211.169 85.8383C211.169 85.7615 211.151 85.6857 211.117 85.6166C211.084 85.5475 211.035 85.4869 210.975 85.4395C210.914 85.392 210.844 85.3589 210.769 85.3426C210.694 85.3263 210.616 85.3272 210.541 85.3453C208.13 85.9195 205.672 86.2772 203.197 86.4139C186.902 87.3133 173.124 78.6909 172.49 67.1922C171.855 55.6935 184.6 45.6178 200.892 44.7086L200.922 44.7007Z" fill="#D3CECB"/>
|
||||
<path d="M75.9248 170.151C75.6912 170.236 75.5706 170.494 75.6553 170.728C75.7401 170.961 75.9982 171.082 76.2319 170.997L75.9248 170.151ZM105.694 146.36L105.325 146.103L105.694 146.36ZM108.515 125.736L108.549 126.184L108.515 125.736ZM96.4601 134.933L96.8292 135.19L96.4601 134.933ZM151.042 128.024L151.44 128.233L151.042 128.024ZM149.712 113.888L149.745 114.337L149.712 113.888ZM133.632 131.3L133.202 131.17L133.202 131.17L133.632 131.3ZM133.617 131.352L134.047 131.482L134.047 131.482L133.617 131.352ZM157.054 147.878C157.291 147.802 157.421 147.548 157.345 147.312C157.268 147.075 157.015 146.945 156.778 147.021L157.054 147.878ZM133.202 131.17L133.186 131.221L134.047 131.482L134.063 131.431L133.202 131.17ZM136.528 147.943C142.241 142.272 147.672 135.394 151.44 128.233L150.643 127.814C146.927 134.878 141.557 141.683 135.893 147.305L136.528 147.943ZM151.44 128.233C152.08 127.017 153.347 123.307 153.658 119.949C153.814 118.276 153.74 116.614 153.172 115.382C152.884 114.756 152.461 114.228 151.866 113.877C151.271 113.526 150.542 113.375 149.678 113.44L149.745 114.337C150.465 114.283 151.003 114.413 151.409 114.652C151.815 114.892 152.126 115.263 152.355 115.759C152.821 116.77 152.913 118.236 152.762 119.866C152.461 123.114 151.225 126.708 150.643 127.814L151.44 128.233ZM149.678 113.44C145.534 113.75 141.938 116.475 139.139 119.927C136.333 123.388 134.271 127.646 133.202 131.17L134.063 131.431C135.102 128.005 137.114 123.854 139.838 120.494C142.568 117.126 145.959 114.62 149.745 114.337L149.678 113.44ZM133.186 131.221C132.448 133.654 131.751 137 131.92 140.149C132.09 143.295 133.133 146.344 135.983 148.012L136.438 147.236C133.964 145.788 132.981 143.108 132.819 140.101C132.657 137.097 133.325 133.865 134.047 131.482L133.186 131.221ZM96.091 134.675C93.9783 137.703 91.552 142.707 90.6804 147.575C89.8122 152.425 90.4654 157.33 94.7866 159.86L95.2412 159.083C91.4248 156.849 90.7184 152.47 91.5663 147.734C92.411 143.016 94.7766 138.132 96.8292 135.19L96.091 134.675ZM108.481 125.287C105.71 125.494 103.304 126.859 101.256 128.647C99.2081 130.434 97.4895 132.671 96.091 134.675L96.8292 135.19C98.2148 133.204 99.8836 131.039 101.848 129.325C103.811 127.611 106.04 126.372 108.549 126.184L108.481 125.287ZM106.063 146.617C107.294 144.848 110.281 139.483 111.829 134.629C112.599 132.216 113.042 129.845 112.667 128.091C112.477 127.198 112.067 126.431 111.349 125.919C110.635 125.41 109.678 125.197 108.481 125.287L108.549 126.184C109.611 126.105 110.337 126.302 110.827 126.652C111.313 126.999 111.63 127.541 111.787 128.279C112.109 129.786 111.735 131.961 110.972 134.355C109.454 139.114 106.511 144.399 105.325 146.103L106.063 146.617ZM95.3309 159.791C99.3824 155.769 102.824 151.27 106.063 146.617L105.325 146.103C102.099 150.737 98.6929 155.185 94.6969 159.152L95.3309 159.791ZM76.2319 170.997C83.5488 168.342 89.6767 165.404 95.3309 159.791L94.6969 159.152C89.1766 164.632 83.1888 167.515 75.9248 170.151L76.2319 170.997ZM94.7866 159.86C101.288 163.666 109.486 162.902 117.124 160.117C124.773 157.327 131.961 152.476 136.528 147.943L135.893 147.305C131.416 151.749 124.338 156.528 116.816 159.271C109.282 162.019 101.403 162.69 95.2412 159.083L94.7866 159.86ZM135.983 148.012C139.071 149.82 142.811 150.274 146.52 150.039C150.233 149.803 153.958 148.876 157.054 147.878L156.778 147.021C153.72 148.007 150.074 148.912 146.463 149.14C142.848 149.369 139.312 148.918 136.438 147.236L135.983 148.012Z" fill="#D7D3D1"/>
|
||||
<path d="M34.1208 1.67272L34.1208 1.67271C39.9029 0.930545 45.3366 1.92561 49.4422 4.11327C53.5488 6.30152 56.2929 9.65956 56.8045 13.6458C57.3161 17.632 55.5083 21.5751 52.0884 24.7305C48.6694 27.8851 43.6661 30.2212 37.8913 30.9639L37.8912 30.9639C36.1449 31.1889 34.3819 31.2561 32.6236 31.1648L32.0474 31.1349L32.1587 31.7011C32.6982 34.4435 33.7686 37.0476 35.3035 39.3693C29.2428 36.2215 26.3184 32.6297 24.9143 29.7128L24.8379 29.5541L24.6742 29.4894C19.3949 27.4043 15.8095 23.6168 15.215 18.9913L15.2149 18.991C14.6999 15.0042 16.5008 11.0607 19.9169 7.90532C23.3321 4.7507 28.3352 2.4146 34.1208 1.67272Z" stroke="#D3CECB" stroke-width="0.9"/>
|
||||
<path d="M61.0231 135.858L48.305 133.863L49.2502 146.414L57.0239 149.239L65.7092 152.397L63.3431 144.054L61.0231 135.858Z" fill="white"/>
|
||||
<path d="M66.0579 152.457C66.0648 152.408 66.0613 152.357 66.0477 152.309L61.3616 135.77C61.3421 135.706 61.305 135.649 61.2544 135.604C61.2038 135.56 61.1417 135.529 61.075 135.517L48.3569 133.522C48.3039 133.516 48.2503 133.521 48.1995 133.537C48.1487 133.552 48.1018 133.578 48.0616 133.612C48.0239 133.647 47.9944 133.69 47.9751 133.737C47.9558 133.784 47.9471 133.835 47.9496 133.887L48.9053 146.418C48.9097 146.484 48.9336 146.547 48.9742 146.6C49.0148 146.653 49.0702 146.693 49.1337 146.716L65.5927 152.7C65.6534 152.724 65.7197 152.73 65.7838 152.719C65.848 152.708 65.9075 152.679 65.9554 152.636C66.0052 152.587 66.0406 152.525 66.0579 152.457ZM60.7765 136.167L65.2501 151.856L49.6494 146.181L48.7496 134.284L60.7765 136.167Z" fill="#454545"/>
|
||||
<path d="M55.3166 137.493L51.3945 141.013L15.4608 102.75L19.3828 99.2312L55.3166 137.493Z" fill="white"/>
|
||||
<path d="M55.6719 137.552L55.6801 137.504C55.6838 137.459 55.6774 137.413 55.6612 137.37C55.645 137.327 55.6195 137.289 55.5863 137.256L19.6493 98.9922C19.6177 98.9586 19.5797 98.9313 19.5375 98.912C19.4953 98.8927 19.4496 98.8817 19.4032 98.8797C19.3104 98.8779 19.2205 98.9099 19.1509 98.9694L15.2269 102.5C15.1925 102.529 15.1645 102.565 15.1448 102.606C15.1251 102.646 15.1141 102.69 15.1124 102.735C15.1107 102.78 15.1183 102.825 15.1349 102.867C15.1515 102.909 15.1766 102.948 15.2087 102.98L51.1388 141.243C51.2014 141.311 51.2888 141.353 51.382 141.358C51.4752 141.364 51.5665 141.333 51.6361 141.273L55.56 137.743C55.6186 137.693 55.6581 137.626 55.6719 137.552ZM19.3681 99.7079L54.811 137.466L51.4142 140.519L15.9632 102.767L19.3681 99.7079Z" fill="#454545"/>
|
||||
<path d="M15.465 102.744L13.3205 108.151L49.2506 146.414L51.4021 141.008L15.465 102.744Z" fill="#454545"/>
|
||||
<path d="M51.7505 141.068C51.7591 141.015 51.7552 140.961 51.7392 140.91C51.7231 140.858 51.6954 140.811 51.658 140.772L15.728 102.509C15.6862 102.466 15.6344 102.434 15.5772 102.416C15.52 102.398 15.4592 102.395 15.4004 102.405C15.3415 102.416 15.2864 102.441 15.2401 102.478C15.1938 102.515 15.1578 102.563 15.1352 102.617L12.9907 108.024C12.966 108.084 12.9591 108.15 12.9709 108.214C12.9827 108.278 13.0127 108.337 13.0575 108.386L48.9945 146.65C49.0356 146.693 49.0869 146.724 49.1438 146.742C49.2006 146.761 49.261 146.764 49.3195 146.753C49.3779 146.742 49.4325 146.717 49.4781 146.68C49.5237 146.643 49.5589 146.595 49.5803 146.541L51.7318 141.135L51.7505 141.068ZM15.5906 103.389L50.994 141.085L49.1238 145.775L13.7226 108.108L15.5906 103.389Z" fill="#454545"/>
|
||||
<path d="M25.0873 97.5939L19.3945 99.228L55.3245 137.491L61.0174 135.857L25.0873 97.5939Z" fill="#454545"/>
|
||||
<path d="M61.367 135.946C61.3741 135.893 61.3695 135.839 61.3535 135.788C61.3376 135.737 61.3107 135.69 61.2745 135.65L25.3492 97.3593C25.3025 97.3132 25.2443 97.2799 25.1805 97.2627C25.1166 97.2455 25.0494 97.2452 24.9856 97.2616L19.2858 98.8944C19.2279 98.9097 19.1755 98.9401 19.1341 98.9824C19.0927 99.0246 19.0639 99.0771 19.0507 99.1344C19.0349 99.1901 19.034 99.2491 19.0482 99.3055C19.0623 99.362 19.091 99.414 19.1315 99.4567L55.0616 137.72C55.1107 137.764 55.1717 137.793 55.2371 137.805C55.3026 137.816 55.3699 137.809 55.431 137.783L61.1296 136.157C61.1865 136.14 61.2379 136.109 61.279 136.067C61.3201 136.025 61.3496 135.974 61.3647 135.918L61.367 135.946ZM25.01 97.9949L60.4135 135.691L55.4693 137.103L20.0345 99.381L25.01 97.9949Z" fill="#454545"/>
|
||||
<path d="M63.3443 144.054L60.8645 144.117L57.3153 147.305L57.0251 149.239L65.7104 152.397L63.3443 144.054Z" fill="#03C7E8"/>
|
||||
<path d="M66.0577 152.457C66.0646 152.408 66.0611 152.357 66.0475 152.308L63.6825 143.958C63.6602 143.885 63.6136 143.82 63.5499 143.775C63.4863 143.73 63.4092 143.706 63.3308 143.708L60.8499 143.779C60.7667 143.779 60.687 143.811 60.6267 143.866L57.0786 147.048C57.0218 147.104 56.9823 147.175 56.9644 147.252L56.6801 149.194C56.6674 149.271 56.6828 149.35 56.7237 149.418C56.7646 149.485 56.8284 149.536 56.9037 149.562L65.589 152.72C65.6497 152.744 65.716 152.751 65.7801 152.74C65.8443 152.728 65.9038 152.7 65.9517 152.657C66.0061 152.602 66.043 152.533 66.0577 152.457ZM63.0822 144.402L65.1872 151.845L57.4136 149.019L57.6438 147.475L61.0336 144.462L63.0822 144.402Z" fill="#454545"/>
|
||||
<path d="M73.8776 59.2742L68.5595 58.375L64.808 62.2459L64.0142 56.9138L59.1738 54.5463L64.0001 52.1437L64.7589 46.8115L68.5384 50.6543L73.8425 49.727L71.3485 54.5112L73.8776 59.2742Z" fill="#D3CECB"/>
|
||||
<path d="M31.6856 197.783L25.1642 196.68L24.9049 196.636L24.7218 196.825L20.1199 201.574L19.146 195.033L19.1073 194.773L18.8712 194.657L12.9346 191.753L18.8544 188.806L19.0896 188.689L19.1266 188.429L20.0574 181.888L24.6946 186.603L24.8786 186.79L25.1372 186.745L31.6422 185.607L28.5826 191.477L28.461 191.71L28.5844 191.942L31.6856 197.783Z" stroke="#D3CECB"/>
|
||||
<path d="M245.799 173.629L238.276 172.357L232.97 177.832L231.847 170.29L225 166.941L231.827 163.542L232.9 156L238.246 161.436L245.749 160.124L242.221 166.891L245.799 173.629Z" fill="#D7D3D1"/>
|
||||
<path d="M220.924 155.81L219.388 153.342L219.249 153.119L218.986 153.107L216.081 152.974L217.952 150.748L218.121 150.547L218.051 150.293L217.279 147.493L219.973 148.584L220.217 148.683L220.436 148.538L222.862 146.939L222.66 149.84L222.642 150.102L222.847 150.266L225.116 152.077L222.291 152.779L222.036 152.842L221.943 153.089L220.924 155.81Z" stroke="#D3CECB"/>
|
||||
<path d="M46.3063 94.4625L41.8463 90.7153L41.665 90.5631L41.4369 90.6262L35.8235 92.1786L38.0027 86.777L38.0912 86.5576L37.9606 86.3603L34.7482 81.5065L40.5584 81.9101L40.7943 81.9264L40.9416 81.7415L44.5671 77.1896L45.9847 82.8389L46.0422 83.068L46.2635 83.1509L51.7106 85.1897L46.7684 88.2814L46.5677 88.407L46.5575 88.6435L46.3063 94.4625Z" stroke="#D3CECB" stroke-width="0.9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 31 KiB |
@@ -1,38 +1,37 @@
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
/* eslint-disable react/forbid-prop-types */
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
Collapsible, Form, Icon, Spinner,
|
||||
} from '@openedx/paragon';
|
||||
import { Tune } from '@openedx/paragon/icons';
|
||||
import { capitalize, toString } from 'lodash';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import {
|
||||
Collapsible, Form, Icon, Spinner,
|
||||
} from '@edx/paragon';
|
||||
import { Tune } from '@edx/paragon/icons';
|
||||
|
||||
import {
|
||||
PostsStatusFilter, RequestStatus,
|
||||
ThreadOrdering, ThreadType,
|
||||
} from '../data/constants';
|
||||
import selectCourseCohorts from '../discussions/cohorts/data/selectors';
|
||||
import { selectCourseCohorts } from '../discussions/cohorts/data/selectors';
|
||||
import messages from '../discussions/posts/post-filter-bar/messages';
|
||||
import { ActionItem } from '../discussions/posts/post-filter-bar/PostFilterBar';
|
||||
|
||||
const FilterBar = ({
|
||||
function FilterBar({
|
||||
intl,
|
||||
filters,
|
||||
selectedFilters,
|
||||
onFilterChange,
|
||||
showCohortsFilter,
|
||||
}) => {
|
||||
}) {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
const cohorts = useSelector(selectCourseCohorts);
|
||||
const { status } = useSelector(state => state.cohorts);
|
||||
const selectedCohort = useMemo(
|
||||
() => cohorts.find(cohort => (
|
||||
toString(cohort.id) === selectedFilters.cohort)),
|
||||
[selectedFilters.cohort],
|
||||
);
|
||||
const selectedCohort = useMemo(() => cohorts.find(cohort => (
|
||||
toString(cohort.id) === selectedFilters.cohort)),
|
||||
[selectedFilters.cohort]);
|
||||
|
||||
const allFilters = [
|
||||
{
|
||||
@@ -92,15 +91,10 @@ const FilterBar = ({
|
||||
},
|
||||
];
|
||||
|
||||
const handleFilterToggle = useCallback((event) => {
|
||||
onFilterChange(event);
|
||||
setOpen(false);
|
||||
}, [onFilterChange]);
|
||||
|
||||
return (
|
||||
<Collapsible.Advanced
|
||||
open={isOpen}
|
||||
onToggle={setOpen}
|
||||
onToggle={() => setOpen(!isOpen)}
|
||||
className="filter-bar collapsible-card-lg border-0"
|
||||
>
|
||||
<Collapsible.Trigger className="collapsible-trigger border-0">
|
||||
@@ -130,7 +124,7 @@ const FilterBar = ({
|
||||
name={value.name}
|
||||
className="d-flex flex-column list-group list-group-flush"
|
||||
value={selectedFilters[value.name]}
|
||||
onChange={handleFilterToggle}
|
||||
onChange={onFilterChange}
|
||||
>
|
||||
{value.filters.map(filterName => {
|
||||
const element = allFilters.find(obj => obj.id === filterName);
|
||||
@@ -163,7 +157,7 @@ const FilterBar = ({
|
||||
name="cohort"
|
||||
className="d-flex flex-column list-group list-group-flush w-100"
|
||||
value={selectedFilters.cohort}
|
||||
onChange={handleFilterToggle}
|
||||
onChange={onFilterChange}
|
||||
>
|
||||
<ActionItem
|
||||
id="all-groups"
|
||||
@@ -189,20 +183,12 @@ const FilterBar = ({
|
||||
</Collapsible.Body>
|
||||
</Collapsible.Advanced>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
FilterBar.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
filters: PropTypes.arrayOf(PropTypes.shape({
|
||||
name: PropTypes.string,
|
||||
filters: PropTypes.arrayOf(PropTypes.string),
|
||||
})).isRequired,
|
||||
selectedFilters: PropTypes.shape({
|
||||
postType: ThreadType,
|
||||
status: PostsStatusFilter,
|
||||
orderBy: ThreadOrdering,
|
||||
cohort: PropTypes.string,
|
||||
}).isRequired,
|
||||
filters: PropTypes.array.isRequired,
|
||||
selectedFilters: PropTypes.object.isRequired,
|
||||
onFilterChange: PropTypes.func.isRequired,
|
||||
showCohortsFilter: PropTypes.bool,
|
||||
};
|
||||
|
||||
@@ -1,29 +1,35 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Form, TransitionReplace } from '@openedx/paragon';
|
||||
import { getIn, useFormikContext } from 'formik';
|
||||
|
||||
const FormikErrorFeedback = ({ name }) => {
|
||||
const { touched, errors } = useFormikContext();
|
||||
import { Form, TransitionReplace } from '@edx/paragon';
|
||||
|
||||
function FormikErrorFeedback({ name }) {
|
||||
const {
|
||||
touched,
|
||||
errors,
|
||||
} = useFormikContext();
|
||||
const fieldTouched = getIn(touched, name);
|
||||
const fieldError = getIn(errors, name);
|
||||
|
||||
return (
|
||||
<TransitionReplace>
|
||||
{fieldTouched && fieldError ? (
|
||||
<Form.Control.Feedback type="invalid" hasIcon={false} key={`${name}-error-feedback`}>
|
||||
{fieldError}
|
||||
</Form.Control.Feedback>
|
||||
) : (
|
||||
<React.Fragment key={`${name}-no-error-feedback`} />
|
||||
)}
|
||||
{fieldTouched && fieldError
|
||||
? (
|
||||
<Form.Control.Feedback type="invalid" hasIcon={false} key={`${name}-error-feedback`}>
|
||||
{fieldError}
|
||||
</Form.Control.Feedback>
|
||||
)
|
||||
: (
|
||||
<React.Fragment key={`${name}-no-error-feedback`} />
|
||||
)}
|
||||
</TransitionReplace>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
FormikErrorFeedback.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default React.memo(FormikErrorFeedback);
|
||||
export default FormikErrorFeedback;
|
||||
|
||||
@@ -9,43 +9,36 @@ import { useDebounce } from '../discussions/data/hooks';
|
||||
|
||||
const defaultSanitizeOptions = {
|
||||
USE_PROFILES: { html: true },
|
||||
ADD_ATTR: ['columnalign', 'target'],
|
||||
ADD_ATTR: ['columnalign'],
|
||||
};
|
||||
|
||||
const HTMLLoader = ({
|
||||
function HTMLLoader({
|
||||
htmlNode, componentId, cssClassName, testId, delay,
|
||||
}) => {
|
||||
}) {
|
||||
const sanitizedMath = DOMPurify.sanitize(htmlNode, { ...defaultSanitizeOptions });
|
||||
const previewRef = useRef(null);
|
||||
const previewRef = useRef();
|
||||
|
||||
const debouncedPostContent = useDebounce(htmlNode, delay);
|
||||
|
||||
useEffect(() => {
|
||||
let promise = Promise.resolve(); // Used to hold chain of typesetting calls
|
||||
|
||||
function typeset(code) {
|
||||
promise = promise.then(() => {
|
||||
if (typeof window?.MathJax !== 'undefined' && typeof window?.MathJax.startup !== 'undefined') {
|
||||
window.MathJax.startup.defaultPageReady().then((window.MathJax?.typesetPromise(code())));
|
||||
}
|
||||
return null;
|
||||
})
|
||||
promise = promise.then(() => window.MathJax?.typesetPromise(code()))
|
||||
.catch((err) => logError(`Typeset failed: ${err.message}`));
|
||||
return promise;
|
||||
}
|
||||
|
||||
if (debouncedPostContent) {
|
||||
typeset(() => {
|
||||
if (previewRef.current !== null && typeof window?.MathJax !== 'undefined') {
|
||||
previewRef.current.innerHTML = sanitizedMath;
|
||||
}
|
||||
previewRef.current.innerHTML = sanitizedMath;
|
||||
});
|
||||
}
|
||||
}, [debouncedPostContent]);
|
||||
|
||||
return (
|
||||
<div ref={previewRef} className={cssClassName} id={componentId} data-testid={testId} />
|
||||
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
HTMLLoader.propTypes = {
|
||||
htmlNode: PropTypes.node,
|
||||
@@ -63,4 +56,4 @@ HTMLLoader.defaultProps = {
|
||||
delay: 0,
|
||||
};
|
||||
|
||||
export default React.memo(HTMLLoader);
|
||||
export default HTMLLoader;
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import messages from './messages';
|
||||
|
||||
const Head = ({ intl }) => (
|
||||
<Helmet>
|
||||
<title>
|
||||
{intl.formatMessage(messages['discussions.page.title'], { siteName: getConfig().SITE_NAME })}
|
||||
</title>
|
||||
<link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
|
||||
</Helmet>
|
||||
);
|
||||
|
||||
Head.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(Head);
|
||||
@@ -1,20 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { render } from '@testing-library/react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import Head from './Head';
|
||||
|
||||
describe('Head', () => {
|
||||
const props = {};
|
||||
it('should match render title tag and favicon with the site configuration values', () => {
|
||||
render(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
|
||||
const helmet = Helmet.peek();
|
||||
expect(helmet.title).toEqual(`Discussions | ${getConfig().SITE_NAME}`);
|
||||
expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
|
||||
expect(helmet.linkTags[0].href).toEqual(getConfig().FAVICON_URL);
|
||||
});
|
||||
});
|
||||
@@ -1,11 +0,0 @@
|
||||
import { defineMessages } from '@edx/frontend-platform/i18n';
|
||||
|
||||
const messages = defineMessages({
|
||||
'discussions.page.title': {
|
||||
id: 'discussions.page.title',
|
||||
defaultMessage: 'Discussions | {siteName}',
|
||||
description: 'Title tag',
|
||||
},
|
||||
});
|
||||
|
||||
export default messages;
|
||||
@@ -1,39 +1,64 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { fetchTab } from './data/thunks';
|
||||
import Tabs from './tabs/Tabs';
|
||||
import messages from './messages';
|
||||
|
||||
import './navBar.scss';
|
||||
|
||||
const CourseTabsNavigation = () => {
|
||||
const intl = useIntl();
|
||||
function CourseTabsNavigation({
|
||||
activeTab, className, intl, courseId, rootSlug,
|
||||
}) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const tabs = useSelector(state => state.courseTabs.tabs);
|
||||
useEffect(() => {
|
||||
dispatch(fetchTab(courseId, rootSlug));
|
||||
}, [courseId]);
|
||||
|
||||
return (
|
||||
<div id="courseTabsNavigation" className="course-tabs-navigation px-4 bg-white">
|
||||
{!!tabs.length && (
|
||||
<Tabs
|
||||
className="nav-underline-tabs"
|
||||
aria-label={intl.formatMessage(messages.courseMaterial)}
|
||||
>
|
||||
{tabs.map(({ url, title, slug }) => (
|
||||
<a
|
||||
key={slug}
|
||||
className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === 'discussion' })}
|
||||
href={url}
|
||||
>
|
||||
{title}
|
||||
</a>
|
||||
))}
|
||||
</Tabs>
|
||||
)}
|
||||
<div id="courseTabsNavigation" className={classNames('course-tabs-navigation', className)}>
|
||||
<div className="container-xl">
|
||||
{!!tabs.length
|
||||
&& (
|
||||
<Tabs
|
||||
className="nav-underline-tabs"
|
||||
aria-label={intl.formatMessage(messages.courseMaterial)}
|
||||
>
|
||||
{tabs.map(({ url, title, slug }) => (
|
||||
<a
|
||||
key={slug}
|
||||
className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTab })}
|
||||
href={url}
|
||||
>
|
||||
{title}
|
||||
</a>
|
||||
))}
|
||||
</Tabs>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
CourseTabsNavigation.propTypes = {
|
||||
activeTab: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
rootSlug: PropTypes.string,
|
||||
courseId: PropTypes.string.isRequired,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default React.memo(CourseTabsNavigation);
|
||||
CourseTabsNavigation.defaultProps = {
|
||||
activeTab: undefined,
|
||||
className: null,
|
||||
rootSlug: 'outline',
|
||||
};
|
||||
|
||||
export default injectIntl(CourseTabsNavigation);
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
import './navigationBar.factory';
|
||||
@@ -1,50 +0,0 @@
|
||||
import { Factory } from 'rosie';
|
||||
|
||||
import { getApiBaseUrl } from '../../../../data/constants';
|
||||
|
||||
Factory.define('navigationBar')
|
||||
.attr('can_show_upgrade_sock', null, false)
|
||||
.attr('can_view_certificate', null, false)
|
||||
.attr('celebrations', null, {
|
||||
first_section: false, streak_discount_enabled: false, streak_length_to_celebrate: null, weekly_goal: false,
|
||||
})
|
||||
.option('hasCourseAccess', null, true)
|
||||
|
||||
.attr('course_access', ['hasCourseAccess'], (hasCourseAccess) => ({
|
||||
additional_context_user_message: null,
|
||||
developer_message: null,
|
||||
error_code: null,
|
||||
has_access: hasCourseAccess,
|
||||
user_fragment: null,
|
||||
user_message: null,
|
||||
}))
|
||||
.option('course_id', null, 'course-v1:edX+DemoX+Demo_Course')
|
||||
.sequence('is_enrolled', ['isEnrolled'], (idx, isEnrolled) => isEnrolled)
|
||||
.attr('is_self_paced', null, false)
|
||||
.attr('is_staff', null, true)
|
||||
.attr('number', null, 'DemoX')
|
||||
.attr('org', null, 'edX')
|
||||
.attr('original_user_is_staff', null, true)
|
||||
.attr('title', null, 'Demonstration Course')
|
||||
.attr('username', null, 'edx')
|
||||
.attr('tabs', ['course_id'], (idx, courseId) => [
|
||||
{
|
||||
tab_id: 'courseware',
|
||||
title: 'Course',
|
||||
url: `${getApiBaseUrl}/course/${courseId}/home`,
|
||||
},
|
||||
{
|
||||
tab_id: 'progress',
|
||||
title: 'Progress',
|
||||
url: `${getApiBaseUrl}/course/${courseId}/progress`,
|
||||
},
|
||||
{
|
||||
tab_id: 'discussion',
|
||||
title: 'Discussion',
|
||||
url: `${getApiBaseUrl}/course/${courseId}/discussion/forum/`,
|
||||
},
|
||||
{
|
||||
tab_id: 'instructor',
|
||||
title: 'Instructor',
|
||||
url: `${getApiBaseUrl}/course/${courseId}/instructor`,
|
||||
}]);
|
||||
@@ -1,16 +1,18 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import { camelCaseObject } from '@edx/frontend-platform';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
|
||||
import { getApiBaseUrl } from '../../../data/constants';
|
||||
|
||||
export const getCourseMetadataApiUrl = (courseId) => `${getApiBaseUrl()}/api/course_home/course_metadata/${courseId}`;
|
||||
|
||||
function normalizeCourseHomeCourseMetadata(metadata) {
|
||||
function normalizeCourseHomeCourseMetadata(metadata, rootSlug) {
|
||||
const data = camelCaseObject(metadata);
|
||||
return {
|
||||
...data,
|
||||
tabs: data.tabs.map(tab => ({
|
||||
slug: tab.tabId === 'courseware' ? 'outline' : tab.tabId,
|
||||
// The API uses "courseware" as a slug for both courseware and the outline tab.
|
||||
// If needed, we switch it to "outline" here for
|
||||
// use within the MFE to differentiate between course home and courseware.
|
||||
slug: tab.tabId === 'courseware' ? rootSlug : tab.tabId,
|
||||
title: tab.title,
|
||||
url: tab.url,
|
||||
})),
|
||||
@@ -18,9 +20,10 @@ function normalizeCourseHomeCourseMetadata(metadata) {
|
||||
};
|
||||
}
|
||||
|
||||
export async function getCourseHomeCourseMetadata(courseId) {
|
||||
const url = getCourseMetadataApiUrl(courseId);
|
||||
export async function getCourseHomeCourseMetadata(courseId, rootSlug) {
|
||||
const url = `${getApiBaseUrl()}/api/course_home/course_metadata/${courseId}`;
|
||||
// don't know the context of adding timezone in url. hence omitting it
|
||||
// url = appendBrowserTimezoneToUrl(url);
|
||||
const { data } = await getAuthenticatedHttpClient().get(url);
|
||||
|
||||
return normalizeCourseHomeCourseMetadata(data);
|
||||
return normalizeCourseHomeCourseMetadata(data, rootSlug);
|
||||
}
|
||||
|
||||
@@ -1,67 +0,0 @@
|
||||
import MockAdapter from 'axios-mock-adapter';
|
||||
import { Factory } from 'rosie';
|
||||
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import { initializeMockApp } from '@edx/frontend-platform/testing';
|
||||
|
||||
import { initializeStore } from '../../../store';
|
||||
import executeThunk from '../../../test-utils';
|
||||
import { getCourseMetadataApiUrl } from './api';
|
||||
import fetchTab from './thunks';
|
||||
|
||||
import './__factories__';
|
||||
|
||||
const courseId = 'course-v1:edX+TestX+Test_Course';
|
||||
let axiosMock = null;
|
||||
let store;
|
||||
|
||||
describe('Navigation bar api tests', () => {
|
||||
beforeEach(() => {
|
||||
initializeMockApp({
|
||||
authenticatedUser: {
|
||||
userId: 3,
|
||||
username: 'abc123',
|
||||
administrator: true,
|
||||
roles: [],
|
||||
},
|
||||
});
|
||||
axiosMock = new MockAdapter(getAuthenticatedHttpClient());
|
||||
store = initializeStore();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
axiosMock.reset();
|
||||
});
|
||||
|
||||
it('Successfully get navigation tabs', async () => {
|
||||
axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200, (Factory.build('navigationBar', 1, { isEnrolled: true })));
|
||||
await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
|
||||
|
||||
expect(store.getState().courseTabs.tabs).toHaveLength(4);
|
||||
expect(store.getState().courseTabs.courseStatus).toEqual('loaded');
|
||||
});
|
||||
|
||||
it('Failed to get navigation tabs', async () => {
|
||||
axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(404);
|
||||
await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
|
||||
|
||||
expect(store.getState().courseTabs.courseStatus).toEqual('failed');
|
||||
});
|
||||
|
||||
it('Denied to get navigation tabs', async () => {
|
||||
axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(403, {});
|
||||
await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
|
||||
|
||||
expect(store.getState().courseTabs.courseStatus).toEqual('denied');
|
||||
});
|
||||
|
||||
it('Denied to get navigation bar when user has no access on course', async () => {
|
||||
axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(
|
||||
200,
|
||||
(Factory.build('navigationBar', 1, { hasCourseAccess: false, isEnrolled: true })),
|
||||
);
|
||||
await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
|
||||
|
||||
expect(store.getState().courseTabs.courseStatus).toEqual('denied');
|
||||
});
|
||||
});
|
||||
@@ -1,3 +1,3 @@
|
||||
const selectCourseTabs = state => state.courseTabs;
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
|
||||
export default selectCourseTabs;
|
||||
export const selectCourseTabs = state => state.courseTabs;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable no-param-reassign */
|
||||
import { createSlice } from '@reduxjs/toolkit';
|
||||
|
||||
export const LOADING = 'loading';
|
||||
@@ -13,44 +14,30 @@ const slice = createSlice({
|
||||
tabs: [],
|
||||
courseTitle: null,
|
||||
courseNumber: null,
|
||||
isEnrolled: false,
|
||||
org: null,
|
||||
},
|
||||
reducers: {
|
||||
fetchTabDenied: (state, { payload }) => (
|
||||
{
|
||||
...state,
|
||||
courseId: payload.courseId,
|
||||
courseStatus: DENIED,
|
||||
}
|
||||
),
|
||||
fetchTabFailure: (state, { payload }) => (
|
||||
{
|
||||
...state,
|
||||
courseId: payload.courseId,
|
||||
courseStatus: FAILED,
|
||||
}
|
||||
),
|
||||
fetchTabRequest: (state, { payload }) => (
|
||||
{
|
||||
...state,
|
||||
courseId: payload.courseId,
|
||||
courseStatus: LOADING,
|
||||
}
|
||||
),
|
||||
fetchTabSuccess: (state, { payload }) => (
|
||||
{
|
||||
...state,
|
||||
courseId: payload.courseId,
|
||||
targetUserId: payload.targetUserId,
|
||||
tabs: payload.tabs,
|
||||
courseStatus: LOADED,
|
||||
courseTitle: payload.courseTitle,
|
||||
courseNumber: payload.courseNumber,
|
||||
org: payload.org,
|
||||
isEnrolled: payload.isEnrolled,
|
||||
}
|
||||
),
|
||||
fetchTabDenied: (state, { payload }) => {
|
||||
state.courseId = payload.courseId;
|
||||
state.courseStatus = DENIED;
|
||||
},
|
||||
fetchTabFailure: (state, { payload }) => {
|
||||
state.courseId = payload.courseId;
|
||||
state.courseStatus = FAILED;
|
||||
},
|
||||
fetchTabRequest: (state, { payload }) => {
|
||||
state.courseId = payload.courseId;
|
||||
state.courseStatus = LOADING;
|
||||
},
|
||||
fetchTabSuccess: (state, { payload }) => {
|
||||
state.courseId = payload.courseId;
|
||||
state.targetUserId = payload.targetUserId;
|
||||
state.tabs = payload.tabs;
|
||||
state.courseStatus = LOADED;
|
||||
state.courseTitle = payload.courseTitle;
|
||||
state.courseNumber = payload.courseNumber;
|
||||
state.org = payload.org;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* eslint-disable import/prefer-default-export, no-unused-expressions */
|
||||
import { logError } from '@edx/frontend-platform/logging';
|
||||
|
||||
import { getHttpErrorStatus } from '../../../discussions/utils';
|
||||
import { getCourseHomeCourseMetadata } from './api';
|
||||
import {
|
||||
fetchTabDenied,
|
||||
@@ -9,11 +9,11 @@ import {
|
||||
fetchTabSuccess,
|
||||
} from './slice';
|
||||
|
||||
export default function fetchTab(courseId) {
|
||||
export function fetchTab(courseId, rootSlug) {
|
||||
return async (dispatch) => {
|
||||
dispatch(fetchTabRequest({ courseId }));
|
||||
try {
|
||||
const courseHomeCourseMetadata = await getCourseHomeCourseMetadata(courseId);
|
||||
const courseHomeCourseMetadata = await getCourseHomeCourseMetadata(courseId, rootSlug);
|
||||
if (!courseHomeCourseMetadata.courseAccess.hasAccess) {
|
||||
dispatch(fetchTabDenied({ courseId }));
|
||||
} else {
|
||||
@@ -23,15 +23,10 @@ export default function fetchTab(courseId) {
|
||||
org: courseHomeCourseMetadata.org,
|
||||
courseNumber: courseHomeCourseMetadata.number,
|
||||
courseTitle: courseHomeCourseMetadata.title,
|
||||
isEnrolled: courseHomeCourseMetadata.isEnrolled,
|
||||
}));
|
||||
}
|
||||
} catch (e) {
|
||||
if (getHttpErrorStatus(e) === 403) {
|
||||
dispatch(fetchTabDenied({ courseId }));
|
||||
} else {
|
||||
dispatch(fetchTabFailure({ courseId }));
|
||||
}
|
||||
dispatch(fetchTabFailure({ courseId }));
|
||||
logError(e);
|
||||
}
|
||||
};
|
||||
|
||||
2
src/components/NavigationBar/index.js
Normal file
2
src/components/NavigationBar/index.js
Normal file
@@ -0,0 +1,2 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
export { default as CourseTabsNavigation } from './CourseTabsNavigation';
|
||||
@@ -1,11 +1,10 @@
|
||||
@import "~@edx/brand/paragon/fonts.scss";
|
||||
@import "~@edx/brand/paragon/variables.scss";
|
||||
@import "~@openedx/paragon/scss/core/core.scss";
|
||||
@import "~@edx/brand/paragon/overrides.scss";
|
||||
@import "@edx/brand/paragon/fonts.scss";
|
||||
@import "@edx/brand/paragon/variables.scss";
|
||||
@import "@edx/paragon/scss/core/core.scss";
|
||||
@import "@edx/brand/paragon/overrides.scss";
|
||||
|
||||
$fa-font-path: "~font-awesome/fonts";
|
||||
@import "~font-awesome/scss/font-awesome";
|
||||
|
||||
.course-tabs-navigation {
|
||||
border-bottom: solid 1px #eaeaea;
|
||||
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Dropdown } from '@openedx/paragon';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
import { Dropdown } from '@edx/paragon';
|
||||
|
||||
import useIndexOfLastVisibleChild from './useIndexOfLastVisibleChild';
|
||||
|
||||
const Tabs = ({ children, className, ...attrs }) => {
|
||||
export default function Tabs({ children, className, ...attrs }) {
|
||||
const [
|
||||
indexOfLastVisibleChild,
|
||||
containerElementRef,
|
||||
@@ -31,28 +31,25 @@ const Tabs = ({ children, className, ...attrs }) => {
|
||||
|
||||
// Insert the overflow menu at the cut off index (even if it will be hidden
|
||||
// it so it can be part of measurements)
|
||||
wrappedChildren.splice(
|
||||
indexOfOverflowStart,
|
||||
0, (
|
||||
<div
|
||||
className="nav-item flex-shrink-0"
|
||||
style={indexOfOverflowStart >= React.Children.count(children) ? invisibleStyle : null}
|
||||
ref={overflowElementRef}
|
||||
key="overflow"
|
||||
>
|
||||
<Dropdown className="h-100">
|
||||
<Dropdown.Toggle variant="link" className="nav-link h-100" id="learn.course.tabs.navigation.overflow.menu">
|
||||
<FormattedMessage
|
||||
id="learn.course.tabs.navigation.overflow.menu"
|
||||
description="The title of the overflow menu for course tabs"
|
||||
defaultMessage="More..."
|
||||
/>
|
||||
</Dropdown.Toggle>
|
||||
<Dropdown.Menu className="dropdown-menu-right">{overflowChildren}</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
),
|
||||
);
|
||||
wrappedChildren.splice(indexOfOverflowStart, 0, (
|
||||
<div
|
||||
className="nav-item flex-shrink-0"
|
||||
style={indexOfOverflowStart >= React.Children.count(children) ? invisibleStyle : null}
|
||||
ref={overflowElementRef}
|
||||
key="overflow"
|
||||
>
|
||||
<Dropdown className="h-100">
|
||||
<Dropdown.Toggle variant="link" className="nav-link h-100" id="learn.course.tabs.navigation.overflow.menu">
|
||||
<FormattedMessage
|
||||
id="learn.course.tabs.navigation.overflow.menu"
|
||||
description="The title of the overflow menu for course tabs"
|
||||
defaultMessage="More..."
|
||||
/>
|
||||
</Dropdown.Toggle>
|
||||
<Dropdown.Menu className="dropdown-menu-right">{overflowChildren}</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
));
|
||||
return wrappedChildren;
|
||||
}, [children, indexOfLastVisibleChild]);
|
||||
|
||||
@@ -65,7 +62,7 @@ const Tabs = ({ children, className, ...attrs }) => {
|
||||
{tabChildren}
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
Tabs.propTypes = {
|
||||
children: PropTypes.node,
|
||||
@@ -76,5 +73,3 @@ Tabs.defaultProps = {
|
||||
children: null,
|
||||
className: undefined,
|
||||
};
|
||||
|
||||
export default Tabs;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useLayoutEffect, useRef, useState } from 'react';
|
||||
|
||||
import { useWindowSize } from '@openedx/paragon';
|
||||
import { useWindowSize } from '@edx/paragon';
|
||||
|
||||
const invisibleStyle = {
|
||||
position: 'absolute',
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import {
|
||||
Hyperlink, Icon, IconButton, IconButtonWithTooltip,
|
||||
} from '@openedx/paragon';
|
||||
import { Close, HelpOutline } from '@openedx/paragon/icons';
|
||||
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import messages from '../discussions/posts/post-editor/messages';
|
||||
|
||||
const PostHelpPanel = () => {
|
||||
const intl = useIntl();
|
||||
const [showHelpPane, setShowHelpPane] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="d-flex justify-content-end">
|
||||
<IconButtonWithTooltip
|
||||
onClick={() => setShowHelpPane(true)}
|
||||
alt={intl.formatMessage(messages.showHelpIcon)}
|
||||
tooltipContent={<div>{intl.formatMessage(messages.discussionHelpTooltip)}</div>}
|
||||
src={HelpOutline}
|
||||
iconAs={Icon}
|
||||
size="inline"
|
||||
className="float-right p-3 help-icon"
|
||||
iconClassNames="help-icon-size"
|
||||
data-testid="help-button"
|
||||
invertColors
|
||||
isActive
|
||||
/>
|
||||
</div>
|
||||
{showHelpPane && (
|
||||
<div
|
||||
className="w-100 p-2 bg-light-200 rounded box-shadow-down-1 post-preview overflow-auto my-3"
|
||||
style={{ minHeight: '200px', wordBreak: 'break-word' }}
|
||||
>
|
||||
<IconButton
|
||||
onClick={() => setShowHelpPane(false)}
|
||||
alt={intl.formatMessage(messages.actionsAlt)}
|
||||
src={Close}
|
||||
iconAs={Icon}
|
||||
size="inline"
|
||||
className="float-right p-3"
|
||||
iconClassNames="icon-size"
|
||||
data-testid="hide-help-button"
|
||||
/>
|
||||
<div className="pt-2 px-3">
|
||||
<h4 className="font-weight-bold">{intl.formatMessage(messages.discussionHelpHeader)}</h4>
|
||||
<p className="pt-2">{intl.formatMessage(messages.discussionHelpDescription)}</p>
|
||||
<Hyperlink
|
||||
target="_blank"
|
||||
className="w-100"
|
||||
destination="https://support.edx.org/hc/en-us/sections/115004169687-Participating-in-Course-Discussions"
|
||||
showLaunchIcon={false}
|
||||
>
|
||||
{intl.formatMessage(messages.discussionHelpCourseParticipation)}
|
||||
</Hyperlink>
|
||||
<Hyperlink
|
||||
target="_blank"
|
||||
className="w-100"
|
||||
destination="https://support.edx.org/hc/en-us/articles/360000035267-Entering-math-expressions-in-course-discussions"
|
||||
showLaunchIcon={false}
|
||||
>
|
||||
{intl.formatMessage(messages.discussionHelpMathExpressions)}
|
||||
</Hyperlink>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(PostHelpPanel);
|
||||
@@ -1,25 +1,23 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Button, Icon, IconButton } from '@openedx/paragon';
|
||||
import { Close } from '@openedx/paragon/icons';
|
||||
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Button, Icon, IconButton } from '@edx/paragon';
|
||||
import { Close } from '@edx/paragon/icons';
|
||||
|
||||
import messages from '../discussions/posts/post-editor/messages';
|
||||
import HTMLLoader from './HTMLLoader';
|
||||
|
||||
const PostPreviewPanel = ({
|
||||
htmlNode, isPost, editExisting,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
function PostPreviewPane({
|
||||
htmlNode, intl, isPost, editExisting,
|
||||
}) {
|
||||
const [showPreviewPane, setShowPreviewPane] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{showPreviewPane && (
|
||||
<div
|
||||
className={`w-100 p-2 bg-light-200 rounded box-shadow-down-1 post-preview overflow-auto ${isPost ? 'mt-2 mb-5' : 'my-3'}`}
|
||||
className={`w-100 p-2 bg-light-200 rounded box-shadow-down-1 post-preview ${isPost ? 'mt-2 mb-5' : 'my-3'}`}
|
||||
style={{ minHeight: '200px', wordBreak: 'break-word' }}
|
||||
>
|
||||
<IconButton
|
||||
@@ -30,17 +28,14 @@ const PostPreviewPanel = ({
|
||||
size="inline"
|
||||
className="float-right p-3"
|
||||
iconClassNames="icon-size"
|
||||
data-testid="hide-preview-button"
|
||||
/>
|
||||
{htmlNode && (
|
||||
<HTMLLoader
|
||||
htmlNode={htmlNode}
|
||||
cssClassName="text-primary"
|
||||
componentId="post-preview"
|
||||
testId="post-preview"
|
||||
delay={500}
|
||||
/>
|
||||
)}
|
||||
<HTMLLoader
|
||||
htmlNode={htmlNode}
|
||||
cssClassName="text-primary"
|
||||
componentId="post-preview"
|
||||
testId="post-preview"
|
||||
delay={500}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="d-flex justify-content-end">
|
||||
@@ -51,7 +46,6 @@ const PostPreviewPanel = ({
|
||||
onClick={() => setShowPreviewPane(true)}
|
||||
className={`text-primary-500 font-style p-0 ${editExisting && 'mb-4.5'}`}
|
||||
style={{ lineHeight: '26px' }}
|
||||
data-testid="show-preview-button"
|
||||
>
|
||||
{intl.formatMessage(messages.showPreviewButton)}
|
||||
</Button>
|
||||
@@ -59,18 +53,18 @@ const PostPreviewPanel = ({
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
PostPreviewPanel.propTypes = {
|
||||
htmlNode: PropTypes.node,
|
||||
PostPreviewPane.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
htmlNode: PropTypes.node.isRequired,
|
||||
isPost: PropTypes.bool,
|
||||
editExisting: PropTypes.bool,
|
||||
};
|
||||
|
||||
PostPreviewPanel.defaultProps = {
|
||||
htmlNode: '',
|
||||
PostPreviewPane.defaultProps = {
|
||||
isPost: false,
|
||||
editExisting: false,
|
||||
};
|
||||
|
||||
export default React.memo(PostPreviewPanel);
|
||||
export default injectIntl(PostPreviewPane);
|
||||
@@ -1,22 +1,19 @@
|
||||
import React, {
|
||||
useCallback, useContext, useEffect, useRef, useState,
|
||||
} from 'react';
|
||||
import React, { useContext, useEffect } from 'react';
|
||||
|
||||
import { Icon, SearchField } from '@openedx/paragon';
|
||||
import { Search as SearchIcon } from '@openedx/paragon/icons';
|
||||
import camelCase from 'lodash/camelCase';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Icon, SearchField } from '@edx/paragon';
|
||||
import { Search as SearchIcon } from '@edx/paragon/icons';
|
||||
|
||||
import DiscussionContext from '../discussions/common/context';
|
||||
import { DiscussionContext } from '../discussions/common/context';
|
||||
import { setUsernameSearch } from '../discussions/learners/data';
|
||||
import { setSearchQuery } from '../discussions/posts/data';
|
||||
import postsMessages from '../discussions/posts/post-actions-bar/messages';
|
||||
import { setFilter as setTopicFilter } from '../discussions/topics/data/slices';
|
||||
|
||||
const Search = () => {
|
||||
const intl = useIntl();
|
||||
function Search({ intl }) {
|
||||
const dispatch = useDispatch();
|
||||
const { page } = useContext(DiscussionContext);
|
||||
const postSearch = useSelector(({ threads }) => threads.filters.search);
|
||||
@@ -24,10 +21,8 @@ const Search = () => {
|
||||
const learnerSearch = useSelector(({ learners }) => learners.usernameSearch);
|
||||
const isPostSearch = ['posts', 'my-posts'].includes(page);
|
||||
const isTopicSearch = 'topics'.includes(page);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const previousSearchValueRef = useRef('');
|
||||
let searchValue = '';
|
||||
let currentValue = '';
|
||||
|
||||
if (isPostSearch) {
|
||||
currentValue = postSearch;
|
||||
} else if (isTopicSearch) {
|
||||
@@ -36,22 +31,20 @@ const Search = () => {
|
||||
currentValue = learnerSearch;
|
||||
}
|
||||
|
||||
const onClear = useCallback(() => {
|
||||
const onClear = () => {
|
||||
dispatch(setSearchQuery(''));
|
||||
dispatch(setTopicFilter(''));
|
||||
dispatch(setUsernameSearch(''));
|
||||
previousSearchValueRef.current = '';
|
||||
}, [previousSearchValueRef]);
|
||||
};
|
||||
|
||||
const onChange = useCallback((query) => {
|
||||
setSearchValue(query);
|
||||
}, []);
|
||||
const onChange = (query) => {
|
||||
searchValue = query;
|
||||
};
|
||||
|
||||
const onSubmit = useCallback((query) => {
|
||||
if (query === '' || query === previousSearchValueRef.current) {
|
||||
const onSubmit = (query) => {
|
||||
if (query === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isPostSearch) {
|
||||
dispatch(setSearchQuery(query));
|
||||
} else if (page === 'topics') {
|
||||
@@ -59,37 +52,35 @@ const Search = () => {
|
||||
} else if (page === 'learners') {
|
||||
dispatch(setUsernameSearch(query));
|
||||
}
|
||||
previousSearchValueRef.current = query;
|
||||
}, [page, searchValue, previousSearchValueRef]);
|
||||
|
||||
const handleIconClick = useCallback((e) => {
|
||||
e.preventDefault();
|
||||
onSubmit(searchValue);
|
||||
}, [searchValue]);
|
||||
};
|
||||
|
||||
useEffect(() => onClear(), [page]);
|
||||
|
||||
return (
|
||||
<SearchField.Advanced
|
||||
onClear={onClear}
|
||||
onChange={onChange}
|
||||
onSubmit={onSubmit}
|
||||
value={currentValue}
|
||||
>
|
||||
<SearchField.Label />
|
||||
<SearchField.Input
|
||||
style={{ paddingRight: '1rem' }}
|
||||
placeholder={intl.formatMessage(postsMessages.search, { page: camelCase(page) })}
|
||||
/>
|
||||
<span className="py-auto px-2.5 pointer-cursor-hover">
|
||||
<Icon
|
||||
src={SearchIcon}
|
||||
onClick={handleIconClick}
|
||||
data-testid="search-icon"
|
||||
<>
|
||||
<SearchField.Advanced
|
||||
onClear={onClear}
|
||||
onChange={onChange}
|
||||
onSubmit={onSubmit}
|
||||
value={currentValue}
|
||||
>
|
||||
<SearchField.Label />
|
||||
<SearchField.Input
|
||||
style={{ paddingRight: '1rem' }}
|
||||
placeholder={intl.formatMessage(postsMessages.search, { page: camelCase(page) })}
|
||||
/>
|
||||
</span>
|
||||
</SearchField.Advanced>
|
||||
<span className="mt-auto mb-auto mr-2.5 pointer-cursor-hover">
|
||||
<Icon
|
||||
src={SearchIcon}
|
||||
onClick={() => onSubmit(searchValue)}
|
||||
/>
|
||||
</span>
|
||||
</SearchField.Advanced>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Search.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default React.memo(Search);
|
||||
export default injectIntl(Search);
|
||||
|
||||
@@ -1,37 +1,32 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Button, Icon } from '@openedx/paragon';
|
||||
import { Search } from '@openedx/paragon/icons';
|
||||
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Button, Icon } from '@edx/paragon';
|
||||
import { Search } from '@edx/paragon/icons';
|
||||
|
||||
import { RequestStatus } from '../data/constants';
|
||||
import messages from '../discussions/posts/post-actions-bar/messages';
|
||||
|
||||
const SearchInfo = ({
|
||||
function SearchInfo({
|
||||
intl,
|
||||
count,
|
||||
text,
|
||||
loadingStatus,
|
||||
onClear,
|
||||
textSearchRewrite,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
|
||||
}) {
|
||||
return (
|
||||
<div className="d-flex flex-row border-bottom border-light-400">
|
||||
<Icon src={Search} className="justify-content-start ml-3.5 mr-2 mb-2 mt-2.5" />
|
||||
<Button variant="" size="inline" className="text-justify p-2">
|
||||
{loadingStatus === RequestStatus.SUCCESSFUL && (
|
||||
textSearchRewrite ? (
|
||||
intl.formatMessage(messages.searchRewriteInfo, {
|
||||
searchString: text,
|
||||
count,
|
||||
textSearchRewrite,
|
||||
})
|
||||
) : (
|
||||
intl.formatMessage(messages.searchInfo, { count, text })
|
||||
)
|
||||
textSearchRewrite ? intl.formatMessage(messages.searchRewriteInfo, {
|
||||
searchString: text,
|
||||
count,
|
||||
textSearchRewrite,
|
||||
})
|
||||
: intl.formatMessage(messages.searchInfo, { count, text })
|
||||
)}
|
||||
{loadingStatus !== RequestStatus.SUCCESSFUL && intl.formatMessage(messages.searchInfoSearching)}
|
||||
</Button>
|
||||
@@ -40,9 +35,10 @@ const SearchInfo = ({
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
SearchInfo.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
count: PropTypes.number.isRequired,
|
||||
text: PropTypes.string.isRequired,
|
||||
loadingStatus: PropTypes.string.isRequired,
|
||||
@@ -55,4 +51,4 @@ SearchInfo.defaultProps = {
|
||||
textSearchRewrite: null,
|
||||
};
|
||||
|
||||
export default React.memo(SearchInfo);
|
||||
export default injectIntl(SearchInfo);
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Spinner as ParagonSpinner } from '@openedx/paragon';
|
||||
|
||||
const Spinner = () => (
|
||||
<div className="spinner-container" data-testid="spinner">
|
||||
<ParagonSpinner animation="border" variant="primary" size="lg" />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default React.memo(Spinner);
|
||||
@@ -1,13 +1,13 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { ActionRow, AlertModal, Button } from '@openedx/paragon';
|
||||
import { Editor } from '@tinymce/tinymce-react';
|
||||
import { useLocation, useParams } from 'react-router-dom';
|
||||
import { useParams } from 'react-router';
|
||||
// TinyMCE so the global var exists
|
||||
// eslint-disable-next-line no-unused-vars,import/no-extraneous-dependencies
|
||||
import tinymce from 'tinymce/tinymce';
|
||||
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { ActionRow, AlertModal, Button } from '@edx/paragon';
|
||||
|
||||
import { MAX_UPLOAD_FILE_SIZE } from '../data/constants';
|
||||
import messages from '../discussions/messages';
|
||||
@@ -42,32 +42,30 @@ import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.c
|
||||
import contentUiCss from '!!raw-loader!tinymce/skins/ui/oxide/content.min.css';
|
||||
|
||||
/* istanbul ignore next */
|
||||
const TinyMCEEditor = (props) => {
|
||||
const setup = (editor) => {
|
||||
editor.ui.registry.addButton('openedx_code', {
|
||||
icon: 'sourcecode',
|
||||
onAction: () => {
|
||||
editor.execCommand('CodeSample');
|
||||
},
|
||||
});
|
||||
editor.ui.registry.addButton('openedx_html', {
|
||||
text: 'HTML',
|
||||
onAction: () => {
|
||||
editor.execCommand('mceCodeEditor');
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
/* istanbul ignore next */
|
||||
export default function TinyMCEEditor(props) {
|
||||
// note that skin and content_css is disabled to avoid the normal
|
||||
// loading process and is instead loaded as a string via content_style
|
||||
const locationObj = useLocation();
|
||||
|
||||
const { courseId, postId } = useParams();
|
||||
const [showImageWarning, setShowImageWarning] = useState(false);
|
||||
const intl = useIntl();
|
||||
const enableInContextSidebar = Boolean(new URLSearchParams(locationObj.search).get('inContextSidebar') !== null);
|
||||
|
||||
/* istanbul ignore next */
|
||||
const setup = useCallback((editor) => {
|
||||
editor.ui.registry.addButton('openedx_code', {
|
||||
icon: 'sourcecode',
|
||||
onAction: () => {
|
||||
editor.execCommand('CodeSample');
|
||||
},
|
||||
});
|
||||
editor.ui.registry.addButton('openedx_html', {
|
||||
text: 'HTML',
|
||||
onAction: () => {
|
||||
editor.execCommand('mceCodeEditor');
|
||||
},
|
||||
});
|
||||
}, []);
|
||||
|
||||
const uploadHandler = useCallback(async (blobInfo, success, failure) => {
|
||||
const uploadHandler = async (blobInfo, success, failure) => {
|
||||
try {
|
||||
const blob = blobInfo.blob();
|
||||
const imageSize = blobInfo.blob().size / 1024;
|
||||
@@ -78,7 +76,7 @@ const TinyMCEEditor = (props) => {
|
||||
const filename = blobInfo.filename();
|
||||
const { location } = await uploadFile(blob, filename, courseId, postId || 'root');
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
img.onload = function () {
|
||||
if (img.height > 999 || img.width > 999) { setShowImageWarning(true); }
|
||||
};
|
||||
img.src = location;
|
||||
@@ -86,11 +84,7 @@ const TinyMCEEditor = (props) => {
|
||||
} catch (e) {
|
||||
failure(e.toString(), { remove: true });
|
||||
}
|
||||
}, [courseId, postId]);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setShowImageWarning(false);
|
||||
}, []);
|
||||
};
|
||||
|
||||
let contentStyle;
|
||||
// In the test environment this causes an error so set styles to empty since they aren't needed for testing.
|
||||
@@ -100,29 +94,6 @@ const TinyMCEEditor = (props) => {
|
||||
contentStyle = '';
|
||||
}
|
||||
|
||||
// eslint-disable-next-line consistent-return
|
||||
useEffect(() => {
|
||||
if (enableInContextSidebar) {
|
||||
const checkToxDialogVisibility = () => {
|
||||
const toxDialog = document.querySelector('.tox-dialog');
|
||||
if (toxDialog) {
|
||||
toxDialog.style.alignSelf = 'start';
|
||||
toxDialog.style.marginTop = '50px';
|
||||
}
|
||||
};
|
||||
|
||||
const observer = new MutationObserver(checkToxDialogVisibility);
|
||||
|
||||
// Observe changes to the entire document
|
||||
observer.observe(document, { childList: true, subtree: true });
|
||||
|
||||
// Clean up the observer when the component unmounts
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
};
|
||||
}
|
||||
}, [enableInContextSidebar]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Editor
|
||||
@@ -160,22 +131,21 @@ const TinyMCEEditor = (props) => {
|
||||
<AlertModal
|
||||
title={intl.formatMessage(messages.imageWarningModalTitle)}
|
||||
isOpen={showImageWarning}
|
||||
onClose={handleClose}
|
||||
onClose={() => setShowImageWarning(false)}
|
||||
isBlocking
|
||||
footerNode={(
|
||||
<ActionRow>
|
||||
<Button variant="danger" onClick={handleClose}>
|
||||
<Button variant="danger" onClick={() => setShowImageWarning(false)}>
|
||||
{intl.formatMessage(messages.imageWarningDismissButton)}
|
||||
</Button>
|
||||
</ActionRow>
|
||||
)}
|
||||
)}
|
||||
>
|
||||
<p>
|
||||
{intl.formatMessage(messages.imageWarningMessage)}
|
||||
</p>
|
||||
</AlertModal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(TinyMCEEditor);
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
|
||||
import { HelpOutline, PostOutline, Report } from '@openedx/paragon/icons';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
|
||||
import { HelpOutline, PostOutline, Report } from '@edx/paragon/icons';
|
||||
|
||||
import {
|
||||
selectUserHasModerationPrivileges,
|
||||
@@ -14,23 +14,20 @@ import {
|
||||
} from '../discussions/data/selectors';
|
||||
import messages from '../discussions/in-context-topics/messages';
|
||||
|
||||
const TopicStats = ({
|
||||
function TopicStats({
|
||||
threadCounts,
|
||||
activeFlags,
|
||||
inactiveFlags,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
intl,
|
||||
}) {
|
||||
const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
|
||||
const userIsGroupTa = useSelector(selectUserIsGroupTa);
|
||||
const canSeeReportedStats = (activeFlags || inactiveFlags) && (userHasModerationPrivileges || userIsGroupTa);
|
||||
|
||||
return (
|
||||
<div className="d-flex align-items-center mt-2.5" style={{ marginBottom: '2px' }}>
|
||||
<OverlayTrigger
|
||||
id="discussion-topic-stats"
|
||||
placement="right"
|
||||
overlay={(
|
||||
<Tooltip id="discussion-topic-stats">
|
||||
<Tooltip>
|
||||
<div className="d-flex flex-column align-items-start">
|
||||
{intl.formatMessage(messages.discussions, {
|
||||
count: threadCounts?.discussion || 0,
|
||||
@@ -45,10 +42,8 @@ const TopicStats = ({
|
||||
</div>
|
||||
</OverlayTrigger>
|
||||
<OverlayTrigger
|
||||
id="question-topic-stats"
|
||||
placement="right"
|
||||
overlay={(
|
||||
<Tooltip id="question-topic-stats">
|
||||
<Tooltip>
|
||||
<div className="d-flex flex-column align-items-start">
|
||||
{intl.formatMessage(messages.questions, {
|
||||
count: threadCounts?.question || 0,
|
||||
@@ -64,10 +59,8 @@ const TopicStats = ({
|
||||
</OverlayTrigger>
|
||||
{Boolean(canSeeReportedStats) && (
|
||||
<OverlayTrigger
|
||||
id="reported-topic-stats"
|
||||
placement="right"
|
||||
overlay={(
|
||||
<Tooltip id="reported-topic-stats">
|
||||
<Tooltip>
|
||||
<div className="d-flex flex-column align-items-start">
|
||||
{Boolean(activeFlags) && (
|
||||
<span>
|
||||
@@ -91,7 +84,7 @@ const TopicStats = ({
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
TopicStats.propTypes = {
|
||||
threadCounts: PropTypes.shape({
|
||||
@@ -100,6 +93,7 @@ TopicStats.propTypes = {
|
||||
}),
|
||||
activeFlags: PropTypes.number,
|
||||
inactiveFlags: PropTypes.number,
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
TopicStats.defaultProps = {
|
||||
@@ -111,4 +105,4 @@ TopicStats.defaultProps = {
|
||||
inactiveFlags: null,
|
||||
};
|
||||
|
||||
export default React.memo(TopicStats);
|
||||
export default injectIntl(TopicStats);
|
||||
|
||||
20
src/components/icons/InsertLink.jsx
Normal file
20
src/components/icons/InsertLink.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function InsertLink() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
26
src/components/icons/Issue.jsx
Normal file
26
src/components/icons/Issue.jsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function Issue() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="28"
|
||||
height="28"
|
||||
fill="none"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<path
|
||||
fill="#F2F0EF"
|
||||
d="M0 14C0 6.268 6.268 0 14 0s14 6.268 14 14-6.268 14-14 14S0 21.732 0 14z"
|
||||
/>
|
||||
<path
|
||||
fill="#2D494E"
|
||||
d="M14 2.333C7.56 2.333 2.333 7.56 2.333 14c0 6.44 5.227 11.667 11.667 11.667 6.44 0 11.667-5.227 11.667-11.667C25.667 7.56 20.44 2.334 14 2.334z"
|
||||
/>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M12.833 22.167h2.334v-2.334h-2.334v2.334zM16.532 14.198l1.05-1.073a3.713 3.713 0 001.085-2.625A4.665 4.665 0 0014 5.833 4.665 4.665 0 009.333 10.5h2.334A2.34 2.34 0 0114 8.167a2.34 2.34 0 012.333 2.333c0 .642-.256 1.225-.688 1.645l-1.447 1.47a4.696 4.696 0 00-1.365 3.302v.583h2.334c0-1.75.525-2.45 1.365-3.302z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
18
src/components/icons/People.jsx
Normal file
18
src/components/icons/People.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function People() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="none"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fill="#707070"
|
||||
d="M11.072 7.332a1.992 1.992 0 001.993-2 1.997 1.997 0 10-3.993 0c0 1.107.893 2 2 2zm-5.334 0a1.992 1.992 0 001.994-2 1.997 1.997 0 10-3.993 0c0 1.107.893 2 2 2zm0 1.333c-1.553 0-4.666.78-4.666 2.334v1.666h9.333V11c0-1.554-3.113-2.334-4.667-2.334zm5.334 0c-.194 0-.414.014-.647.034.773.56 1.313 1.313 1.313 2.3v1.666h4V11c0-1.554-3.113-2.334-4.666-2.334z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
20
src/components/icons/PushPin.jsx
Normal file
20
src/components/icons/PushPin.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function PushPin() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
d="M16 9V4H18V2H6V4H8V9C8 10.66 6.66 12 5 12V14H10.97V21L11.97 22L12.97 21V14H19V12C17.34 12 16 10.66 16 9Z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
26
src/components/icons/Question.jsx
Normal file
26
src/components/icons/Question.jsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function Question() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="28"
|
||||
height="28"
|
||||
fill="none"
|
||||
viewBox="0 0 28 28"
|
||||
>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M0 14.001c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14z"
|
||||
/>
|
||||
<path
|
||||
fill="#2D494E"
|
||||
d="M14 2.334c-6.44 0-11.667 5.227-11.667 11.667 0 6.44 5.227 11.667 11.667 11.667 6.44 0 11.666-5.227 11.666-11.667 0-6.44-5.226-11.667-11.666-11.667z"
|
||||
/>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M12.833 22.168h2.333v-2.334h-2.333v2.334zM16.531 14.2l1.05-1.074a3.712 3.712 0 001.085-2.625A4.665 4.665 0 0014 5.834a4.665 4.665 0 00-4.667 4.667h2.333A2.34 2.34 0 0114 8.168a2.34 2.34 0 012.333 2.333c0 .642-.257 1.225-.688 1.645l-1.447 1.47a4.696 4.696 0 00-1.365 3.302v.583h2.333c0-1.75.525-2.45 1.365-3.302z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
18
src/components/icons/QuestionAnswer.jsx
Normal file
18
src/components/icons/QuestionAnswer.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function QuestionAnswer() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="21"
|
||||
height="20"
|
||||
fill="none"
|
||||
viewBox="0 0 21 20"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M18.737 5h-2.5v7.5H5.404V15h10l3.333 3.333V5zm-4.166 5.833V1.667H2.07v12.5l3.333-3.334h9.166z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
18
src/components/icons/QuestionAnswerOutline.jsx
Normal file
18
src/components/icons/QuestionAnswerOutline.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function QuestionAnswerOutline() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12.6 3.267v6.067H4.08l-.512.512-.502.502v-7.08H12.6zm.867-1.733H2.198a.87.87 0 00-.867.867v12.134L4.8 11.068h8.668a.87.87 0 00.866-.867v-7.8a.87.87 0 00-.867-.867zM17.8 5h-1.733v7.8H4.799v1.734c0 .476.39.867.867.867H15.2l3.467 3.466v-13A.87.87 0 0017.8 5z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
18
src/components/icons/StarFilled.jsx
Normal file
18
src/components/icons/StarFilled.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function StarFilled() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="21"
|
||||
height="20"
|
||||
fill="none"
|
||||
viewBox="0 0 21 20"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M10.404 14.392l5.15 3.108-1.367-5.858 4.55-3.942-5.991-.508-2.342-5.525-2.342 5.525L2.07 7.7l4.55 3.942L5.254 17.5l5.15-3.108z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
18
src/components/icons/StarOutline.jsx
Normal file
18
src/components/icons/StarOutline.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function StarOutline() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M18.737 7.7l-5.991-.517-2.342-5.516-2.342 5.525L2.07 7.7l4.55 3.942L5.254 17.5l5.15-3.108 5.15 3.108-1.359-5.858L18.737 7.7zm-8.333 5.133L7.27 14.725l.834-3.567-2.767-2.4 3.65-.316 1.417-3.359 1.425 3.367 3.65.317-2.767 2.4.834 3.566-3.142-1.9z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
18
src/components/icons/ThumbUpFilled.jsx
Normal file
18
src/components/icons/ThumbUpFilled.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function ThumbUpFilled() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="21"
|
||||
height="20"
|
||||
fill="none"
|
||||
viewBox="0 0 21 20"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12.212.833L6.237 6.817V17.5h10.258l3.075-7.167V6.667h-6.925l.934-4.484-1.367-1.35zM1.237 7.5H4.57v10H1.237v-10z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
21
src/components/icons/ThumbUpOutline.jsx
Normal file
21
src/components/icons/ThumbUpOutline.jsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
|
||||
export default function ThumbUpOutline() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
d="M19.57 6.667v3.666L16.495 17.5H6.238V6.817L12.212.833l1.367 1.35-.934 4.484h6.925zm-11.666.841v8.325h7.492l2.508-5.841V8.333h-7.309l.925-4.45-3.616 3.625z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
<path fill="currentColor" d="M4.57 17.5H1.237v-10H4.57v10z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
11
src/components/icons/index.js
Normal file
11
src/components/icons/index.js
Normal file
@@ -0,0 +1,11 @@
|
||||
export { default as InsertLink } from './InsertLink';
|
||||
export { default as Issue } from './Issue';
|
||||
export { default as People } from './People';
|
||||
export { default as PushPin } from './PushPin';
|
||||
export { default as Question } from './Question';
|
||||
export { default as QuestionAnswer } from './QuestionAnswer';
|
||||
export { default as QuestionAnswerOutline } from './QuestionAnswerOutline';
|
||||
export { default as StarFilled } from './StarFilled';
|
||||
export { default as StarOutline } from './StarOutline';
|
||||
export { default as ThumbUpFilled } from './ThumbUpFilled';
|
||||
export { default as ThumbUpOutline } from './ThumbUpOutline';
|
||||
@@ -1,5 +1,4 @@
|
||||
export { default as PostActionsBar } from '../discussions/posts/post-actions-bar/PostActionsBar';
|
||||
export { default as Search } from './Search';
|
||||
export { default as Spinner } from './Spinner';
|
||||
export { default as TinyMCEEditor } from './TinyMCEEditor';
|
||||
export { default as TopicStats } from './TopicStats';
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
|
||||
// Course Blocks API response for the demo course.
|
||||
const getBlocksAPIResponse = (newProvider = false) => {
|
||||
export const getBlocksAPIResponse = (newProvider = false) => {
|
||||
const response = {
|
||||
root: 'block-v1:edX+DemoX+Demo_Course+type@course+block@course',
|
||||
blocks: {
|
||||
@@ -934,5 +936,3 @@ const getBlocksAPIResponse = (newProvider = false) => {
|
||||
}
|
||||
return response;
|
||||
};
|
||||
|
||||
export default getBlocksAPIResponse;
|
||||
|
||||
1
src/data/__factories__/index.js
Normal file
1
src/data/__factories__/index.js
Normal file
@@ -0,0 +1 @@
|
||||
export * from './blocks';
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
|
||||
import { getApiBaseUrl } from './constants';
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
|
||||
export const getApiBaseUrl = () => getConfig().LMS_BASE_URL;
|
||||
export const getFullUrl = (path) => (
|
||||
new URL(`${getConfig().PUBLIC_PATH.replace(/\/$/, '')}/${path}`, window.location.origin).href
|
||||
);
|
||||
|
||||
/**
|
||||
* Enum for thread types.
|
||||
@@ -80,7 +77,6 @@ export const RequestStatus = {
|
||||
*/
|
||||
export const AvatarOutlineAndLabelColors = {
|
||||
Staff: 'staff-color',
|
||||
Moderator: 'TA-color',
|
||||
'Community TA': 'TA-color',
|
||||
};
|
||||
|
||||
@@ -148,17 +144,18 @@ export const Routes = {
|
||||
PATH: BASE_PATH,
|
||||
},
|
||||
LEARNERS: {
|
||||
PATH: `${BASE_PATH}/learners/:learnerUsername?`,
|
||||
POSTS: `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
|
||||
POSTS_EDIT: `${BASE_PATH}/learners/:learnerUsername/posts/:postId/edit`,
|
||||
PATH: `${BASE_PATH}/learners`,
|
||||
POSTS: `${BASE_PATH}/learners/:learnerUsername/posts(/:postId)?`,
|
||||
},
|
||||
POSTS: {
|
||||
PATH: `${BASE_PATH}/topics/:topicId`,
|
||||
MY_POSTS: `${BASE_PATH}/my-posts/:postId?`,
|
||||
ALL_POSTS: `${BASE_PATH}/posts/:postId?`,
|
||||
EDIT_MY_POSTS: `${BASE_PATH}/my-posts/:postId/edit`,
|
||||
EDIT_ALL_POSTS: `${BASE_PATH}/posts/:postId/edit`,
|
||||
NEW_POST: `${BASE_PATH}/*`,
|
||||
MY_POSTS: `${BASE_PATH}/my-posts(/:postId)?`,
|
||||
ALL_POSTS: `${BASE_PATH}/posts(/:postId)?`,
|
||||
NEW_POST: [
|
||||
`${BASE_PATH}/topics/:topicId/posts/:postId`,
|
||||
`${BASE_PATH}/topics/:topicId`,
|
||||
`${BASE_PATH}`,
|
||||
],
|
||||
EDIT_POST: [
|
||||
`${BASE_PATH}/category/:category/posts/:postId/edit`,
|
||||
`${BASE_PATH}/topics/:topicId/posts/:postId/edit`,
|
||||
@@ -169,19 +166,19 @@ export const Routes = {
|
||||
},
|
||||
COMMENTS: {
|
||||
PATH: [
|
||||
`${BASE_PATH}/category/:category/posts/:postId?`,
|
||||
`${BASE_PATH}/topics/:topicId/posts/:postId?`,
|
||||
`${BASE_PATH}/category/:category/posts/:postId`,
|
||||
`${BASE_PATH}/topics/:topicId/posts/:postId`,
|
||||
`${BASE_PATH}/posts/:postId`,
|
||||
`${BASE_PATH}/my-posts/:postId`,
|
||||
`${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
|
||||
`${BASE_PATH}/learners/:learnerUsername/posts/:postId`,
|
||||
],
|
||||
PAGE: `${BASE_PATH}/:page/*`,
|
||||
PAGE: `${BASE_PATH}/:page`,
|
||||
PAGES: {
|
||||
category: `${BASE_PATH}/category/:category/posts/:postId?`,
|
||||
topics: `${BASE_PATH}/topics/:topicId/posts/:postId?`,
|
||||
category: `${BASE_PATH}/category/:category/posts/:postId`,
|
||||
topics: `${BASE_PATH}/topics/:topicId/posts/:postId`,
|
||||
posts: `${BASE_PATH}/posts/:postId`,
|
||||
'my-posts': `${BASE_PATH}/my-posts/:postId`,
|
||||
learners: `${BASE_PATH}/learners/:learnerUsername/posts/:postId?`,
|
||||
learners: `${BASE_PATH}/learners/:learnerUsername/posts/:postId`,
|
||||
},
|
||||
},
|
||||
TOPICS: {
|
||||
@@ -192,10 +189,9 @@ export const Routes = {
|
||||
],
|
||||
ALL: `${BASE_PATH}/topics`,
|
||||
CATEGORY: `${BASE_PATH}/category/:category`,
|
||||
CATEGORY_POST: `${BASE_PATH}/category/:category/posts/:postId?`,
|
||||
CATEGORY_POST_EDIT: `${BASE_PATH}/category/:category/posts/:postId/edit`,
|
||||
CATEGORY_POST: `${BASE_PATH}/category/:category/posts/:postId`,
|
||||
TOPIC: `${BASE_PATH}/topics/:topicId`,
|
||||
TOPIC_POST: `${BASE_PATH}/topics/:topicId/posts/:postId?`,
|
||||
TOPIC_POST: `${BASE_PATH}/topics/:topicId/posts/:postId`,
|
||||
TOPIC_POST_EDIT: `${BASE_PATH}/topics/:topicId/posts/:postId/edit`,
|
||||
},
|
||||
};
|
||||
@@ -209,12 +205,11 @@ export const PostsPages = {
|
||||
};
|
||||
|
||||
export const ALL_ROUTES = []
|
||||
.concat([Routes.TOPICS.CATEGORY_POST, `${Routes.TOPICS.CATEGORY}?`])
|
||||
.concat([Routes.TOPICS.CATEGORY_POST, Routes.TOPICS.CATEGORY])
|
||||
.concat(Routes.COMMENTS.PATH)
|
||||
.concat(Routes.TOPICS.PATH)
|
||||
.concat(Routes.POSTS.EDIT_POST)
|
||||
.concat([Routes.POSTS.ALL_POSTS, Routes.POSTS.MY_POSTS])
|
||||
.concat([Routes.LEARNERS.POSTS, Routes.LEARNERS.PATH])
|
||||
.concat([`${Routes.DISCUSSIONS.PATH}/*`]);
|
||||
.concat([Routes.DISCUSSIONS.PATH]);
|
||||
|
||||
export const MAX_UPLOAD_FILE_SIZE = 1024;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import { useState } from 'react';
|
||||
|
||||
import { useDispatch } from 'react-redux';
|
||||
@@ -14,16 +15,14 @@ import { useDispatch } from 'react-redux';
|
||||
*
|
||||
* @return {(boolean|(function(*=): Promise<void>)|*)[]}
|
||||
*/
|
||||
export default function useDispatchWithState() {
|
||||
export function useDispatchWithState() {
|
||||
const dispatch = useDispatch();
|
||||
const [isDispatching, setDispatching] = useState(false);
|
||||
|
||||
const dispatchWithState = async (thunk) => {
|
||||
setDispatching(true);
|
||||
await dispatch(thunk);
|
||||
setDispatching(false);
|
||||
};
|
||||
|
||||
return [
|
||||
isDispatching,
|
||||
dispatchWithState,
|
||||
|
||||
@@ -5,11 +5,11 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import { initializeMockApp } from '@edx/frontend-platform/testing';
|
||||
|
||||
import { initializeStore } from '../store';
|
||||
import executeThunk from '../test-utils';
|
||||
import getBlocksAPIResponse from './__factories__/blocks';
|
||||
import { executeThunk } from '../test-utils';
|
||||
import { getBlocksAPIResponse } from './__factories__';
|
||||
import { getBlocksAPIURL } from './api';
|
||||
import { RequestStatus } from './constants';
|
||||
import fetchCourseBlocks from './thunks';
|
||||
import { fetchCourseBlocks } from './thunks';
|
||||
|
||||
const blocksAPIURL = getBlocksAPIURL();
|
||||
const courseId = 'course-v1:edX+DemoX+Demo_Course';
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
|
||||
import { createSelector } from '@reduxjs/toolkit';
|
||||
|
||||
import { selectDiscussionProvider, selectGroupAtSubsection } from '../discussions/data/selectors';
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable no-param-reassign,import/prefer-default-export */
|
||||
import { createSlice } from '@reduxjs/toolkit';
|
||||
|
||||
import { RequestStatus } from './constants';
|
||||
@@ -15,33 +16,19 @@ const blocksSlice = createSlice({
|
||||
blocks: {},
|
||||
},
|
||||
reducers: {
|
||||
fetchCourseBlocksRequest: (state) => (
|
||||
{
|
||||
...state,
|
||||
status: RequestStatus.IN_PROGRESS,
|
||||
}
|
||||
),
|
||||
fetchCourseBlocksSuccess: (state, { payload }) => (
|
||||
{
|
||||
...state,
|
||||
status: RequestStatus.SUCCESSFUL,
|
||||
topics: payload.topics,
|
||||
chapters: payload.chapters,
|
||||
blocks: payload.blocks,
|
||||
}
|
||||
),
|
||||
fetchCourseBlocksFailed: (state) => (
|
||||
{
|
||||
...state,
|
||||
status: RequestStatus.FAILED,
|
||||
}
|
||||
),
|
||||
fetchCourseBlocksDenied: (state) => (
|
||||
{
|
||||
...state,
|
||||
status: RequestStatus.DENIED,
|
||||
}
|
||||
),
|
||||
fetchCourseBlocksRequest: (state) => {
|
||||
state.status = RequestStatus.IN_PROGRESS;
|
||||
},
|
||||
fetchCourseBlocksSuccess: (state, { payload }) => {
|
||||
state.status = RequestStatus.SUCCESSFUL;
|
||||
Object.assign(state, payload);
|
||||
},
|
||||
fetchCourseBlocksFailed: (state) => {
|
||||
state.status = RequestStatus.FAILED;
|
||||
},
|
||||
fetchCourseBlocksDenied: (state) => {
|
||||
state.status = RequestStatus.DENIED;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable import/prefer-default-export, no-unused-expressions */
|
||||
import { camelCaseObject } from '@edx/frontend-platform';
|
||||
import { logError } from '@edx/frontend-platform/logging';
|
||||
|
||||
@@ -87,7 +88,7 @@ function normaliseCourseBlocks({
|
||||
};
|
||||
}
|
||||
|
||||
export default function fetchCourseBlocks(courseId, username) {
|
||||
export function fetchCourseBlocks(courseId, username) {
|
||||
return async (dispatch) => {
|
||||
try {
|
||||
dispatch(fetchCourseBlocksRequest({ courseId }));
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import { ensureConfig, getConfig, snakeCaseObject } from '@edx/frontend-platform';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
|
||||
|
||||
@@ -5,9 +5,9 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import { initializeMockApp } from '@edx/frontend-platform/testing';
|
||||
|
||||
import { initializeStore } from '../../../store';
|
||||
import executeThunk from '../../../test-utils';
|
||||
import { executeThunk } from '../../../test-utils';
|
||||
import { getCohortsApiUrl } from './api';
|
||||
import fetchCourseCohorts from './thunks';
|
||||
import { fetchCourseCohorts } from './thunks';
|
||||
|
||||
import './__factories__';
|
||||
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
const selectCourseCohorts = state => state.cohorts.cohorts;
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
|
||||
export default selectCourseCohorts;
|
||||
export const selectCourseCohorts = state => state.cohorts.cohorts;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable no-param-reassign,import/prefer-default-export */
|
||||
import { createSlice } from '@reduxjs/toolkit';
|
||||
|
||||
import { RequestStatus } from '../../../data/constants';
|
||||
@@ -9,26 +10,17 @@ const cohortsSlice = createSlice({
|
||||
cohorts: [],
|
||||
},
|
||||
reducers: {
|
||||
fetchCohortsRequest: (state) => (
|
||||
{
|
||||
...state,
|
||||
status: RequestStatus.IN_PROGRESS,
|
||||
cohorts: [],
|
||||
}
|
||||
),
|
||||
fetchCohortsSuccess: (state, { payload }) => (
|
||||
{
|
||||
...state,
|
||||
status: RequestStatus.SUCCESSFUL,
|
||||
cohorts: payload,
|
||||
}
|
||||
),
|
||||
fetchCohortsFailed: (state) => (
|
||||
{
|
||||
...state,
|
||||
status: RequestStatus.FAILED,
|
||||
}
|
||||
),
|
||||
fetchCohortsRequest: (state) => {
|
||||
state.status = RequestStatus.IN_PROGRESS;
|
||||
state.cohorts = [];
|
||||
},
|
||||
fetchCohortsSuccess: (state, { payload }) => {
|
||||
state.status = RequestStatus.SUCCESSFUL;
|
||||
state.cohorts = payload;
|
||||
},
|
||||
fetchCohortsFailed: (state) => {
|
||||
state.status = RequestStatus.FAILED;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import { camelCaseObject } from '@edx/frontend-platform';
|
||||
import { logError } from '@edx/frontend-platform/logging';
|
||||
|
||||
@@ -10,7 +11,7 @@ import {
|
||||
fetchCohortsSuccess,
|
||||
} from './slices';
|
||||
|
||||
export default function fetchCourseCohorts(courseId) {
|
||||
export function fetchCourseCohorts(courseId) {
|
||||
return async (dispatch) => {
|
||||
try {
|
||||
dispatch(fetchCohortsRequest());
|
||||
|
||||
@@ -1,90 +1,76 @@
|
||||
import React, {
|
||||
useCallback, useMemo, useRef, useState,
|
||||
} from 'react';
|
||||
import React, { useContext, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
Button, Dropdown, Icon, IconButton, ModalPopup, useToggle,
|
||||
} from '@openedx/paragon';
|
||||
import { MoreHoriz } from '@openedx/paragon/icons';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { logError } from '@edx/frontend-platform/logging';
|
||||
import {
|
||||
Button, Dropdown, Icon, IconButton, ModalPopup, useToggle,
|
||||
} from '@edx/paragon';
|
||||
import { MoreHoriz } from '@edx/paragon/icons';
|
||||
|
||||
import { ContentActions } from '../../data/constants';
|
||||
import { selectIsPostingEnabled } from '../data/selectors';
|
||||
import { selectBlackoutDate } from '../data/selectors';
|
||||
import messages from '../messages';
|
||||
import { useActions } from '../utils';
|
||||
import { commentShape } from '../post-comments/comments/comment/proptypes';
|
||||
import { postShape } from '../posts/post/proptypes';
|
||||
import { inBlackoutDateRange, useActions } from '../utils';
|
||||
import { DiscussionContext } from './context';
|
||||
|
||||
const ActionsDropdown = ({
|
||||
actionHandlers,
|
||||
contentType,
|
||||
function ActionsDropdown({
|
||||
intl,
|
||||
commentOrPost,
|
||||
disabled,
|
||||
dropDownIconSize,
|
||||
actionHandlers,
|
||||
iconSize,
|
||||
id,
|
||||
}) => {
|
||||
const buttonRef = useRef();
|
||||
const intl = useIntl();
|
||||
dropDownIconSize,
|
||||
}) {
|
||||
const [isOpen, open, close] = useToggle(false);
|
||||
const [target, setTarget] = useState(null);
|
||||
const isPostingEnabled = useSelector(selectIsPostingEnabled);
|
||||
const actions = useActions(contentType, id);
|
||||
|
||||
const handleActions = useCallback((action) => {
|
||||
const actions = useActions(commentOrPost);
|
||||
const { enableInContextSidebar } = useContext(DiscussionContext);
|
||||
const handleActions = (action) => {
|
||||
const actionFunction = actionHandlers[action];
|
||||
if (actionFunction) {
|
||||
actionFunction();
|
||||
} else {
|
||||
logError(`Unknown or unimplemented action ${action}`);
|
||||
}
|
||||
}, [actionHandlers]);
|
||||
|
||||
// Find and remove edit action if in Posting is disabled.
|
||||
useMemo(() => {
|
||||
if (!isPostingEnabled) {
|
||||
actions.splice(actions.findIndex(action => action.id === 'edit'), 1);
|
||||
}
|
||||
}, [actions, isPostingEnabled]);
|
||||
|
||||
const onClickButton = useCallback((event) => {
|
||||
event.preventDefault();
|
||||
setTarget(buttonRef.current);
|
||||
open();
|
||||
}, [open]);
|
||||
|
||||
const onCloseModal = useCallback(() => {
|
||||
close();
|
||||
setTarget(null);
|
||||
}, [close]);
|
||||
|
||||
};
|
||||
const blackoutDateRange = useSelector(selectBlackoutDate);
|
||||
// Find and remove edit action if in blackout date range.
|
||||
if (inBlackoutDateRange(blackoutDateRange)) {
|
||||
actions.splice(actions.findIndex(action => action.id === 'edit'), 1);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<IconButton
|
||||
onClick={onClickButton}
|
||||
onClick={open}
|
||||
alt={intl.formatMessage(messages.actionsAlt)}
|
||||
src={MoreHoriz}
|
||||
iconAs={Icon}
|
||||
disabled={disabled}
|
||||
size={iconSize}
|
||||
ref={buttonRef}
|
||||
iconClassNames={dropDownIconSize ? 'dropdown-icon-dimensions' : ''}
|
||||
ref={setTarget}
|
||||
iconClassNames={dropDownIconSize ? 'dropdown-icon-dimentions' : ''}
|
||||
/>
|
||||
<div className="actions-dropdown">
|
||||
<ModalPopup
|
||||
onClose={onCloseModal}
|
||||
onClose={close}
|
||||
positionRef={target}
|
||||
isOpen={isOpen}
|
||||
placement="bottom-end"
|
||||
placement={enableInContextSidebar ? 'left' : 'auto-start'}
|
||||
>
|
||||
<div
|
||||
className="bg-white shadow d-flex flex-column mt-1"
|
||||
className="bg-white p-1 shadow d-flex flex-column"
|
||||
data-testid="actions-dropdown-modal-popup"
|
||||
>
|
||||
{actions.map(action => (
|
||||
<React.Fragment key={action.id}>
|
||||
{(action.action === ContentActions.DELETE) && <Dropdown.Divider />}
|
||||
{(action.action === ContentActions.DELETE)
|
||||
&& <Dropdown.Divider />}
|
||||
|
||||
<Dropdown.Item
|
||||
as={Button}
|
||||
variant="tertiary"
|
||||
@@ -93,16 +79,9 @@ const ActionsDropdown = ({
|
||||
close();
|
||||
handleActions(action.action);
|
||||
}}
|
||||
className="d-flex justify-content-start actions-dropdown-item"
|
||||
data-testId={action.id}
|
||||
className="d-flex justify-content-start py-1.5 mr-4"
|
||||
>
|
||||
<Icon
|
||||
src={action.icon}
|
||||
className="icon-size-24"
|
||||
/>
|
||||
<span className="font-weight-normal ml-2">
|
||||
{intl.formatMessage(action.label)}
|
||||
</span>
|
||||
<Icon src={action.icon} className="mr-1" /> {intl.formatMessage(action.label)}
|
||||
</Dropdown.Item>
|
||||
</React.Fragment>
|
||||
))}
|
||||
@@ -111,15 +90,15 @@ const ActionsDropdown = ({
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
ActionsDropdown.propTypes = {
|
||||
id: PropTypes.string.isRequired,
|
||||
intl: intlShape.isRequired,
|
||||
commentOrPost: PropTypes.oneOfType([commentShape, postShape]).isRequired,
|
||||
disabled: PropTypes.bool,
|
||||
actionHandlers: PropTypes.objectOf(PropTypes.func).isRequired,
|
||||
iconSize: PropTypes.string,
|
||||
dropDownIconSize: PropTypes.bool,
|
||||
contentType: PropTypes.oneOf(['POST', 'COMMENT']).isRequired,
|
||||
};
|
||||
|
||||
ActionsDropdown.defaultProps = {
|
||||
@@ -128,4 +107,4 @@ ActionsDropdown.defaultProps = {
|
||||
dropDownIconSize: false,
|
||||
};
|
||||
|
||||
export default ActionsDropdown;
|
||||
export default injectIntl(ActionsDropdown);
|
||||
|
||||
@@ -1,26 +1,16 @@
|
||||
import {
|
||||
fireEvent, render, screen, waitFor,
|
||||
} from '@testing-library/react';
|
||||
import MockAdapter from 'axios-mock-adapter';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
import { Factory } from 'rosie';
|
||||
|
||||
import { camelCaseObject, initializeMockApp, snakeCaseObject } from '@edx/frontend-platform';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import { AppProvider } from '@edx/frontend-platform/react';
|
||||
|
||||
import { ContentActions } from '../../data/constants';
|
||||
import { initializeStore } from '../../store';
|
||||
import executeThunk from '../../test-utils';
|
||||
import { getCourseConfigApiUrl } from '../data/api';
|
||||
import fetchCourseConfig from '../data/thunks';
|
||||
import messages from '../messages';
|
||||
import { getCommentsApiUrl } from '../post-comments/data/api';
|
||||
import { addComment, fetchThreadComments } from '../post-comments/data/thunks';
|
||||
import PostCommentsContext from '../post-comments/postCommentsContext';
|
||||
import { getThreadsApiUrl } from '../posts/data/api';
|
||||
import { fetchThread } from '../posts/data/thunks';
|
||||
import { ACTIONS_LIST } from '../utils';
|
||||
import ActionsDropdown from './ActionsDropdown';
|
||||
|
||||
@@ -28,145 +18,100 @@ import '../post-comments/data/__factories__';
|
||||
import '../posts/data/__factories__';
|
||||
|
||||
let store;
|
||||
let axiosMock;
|
||||
const commentsApiUrl = getCommentsApiUrl();
|
||||
const threadsApiUrl = getThreadsApiUrl();
|
||||
const courseId = 'course-v1:edX+TestX+Test_Course';
|
||||
const discussionThreadId = 'thread-1';
|
||||
const questionThreadId = 'thread-2';
|
||||
const commentContent = 'This is a comment for thread-1';
|
||||
let discussionThread;
|
||||
let questionThread;
|
||||
let comment;
|
||||
|
||||
const buildTestContent = (buildParams, testMeta) => {
|
||||
function buildTestContent(buildParams, testMeta) {
|
||||
const buildParamsSnakeCase = snakeCaseObject(buildParams);
|
||||
discussionThread = Factory.build('thread', { ...buildParamsSnakeCase, id: discussionThreadId }, null);
|
||||
questionThread = Factory.build('thread', { ...buildParamsSnakeCase, id: questionThreadId }, null);
|
||||
comment = Factory.build('comment', { ...buildParamsSnakeCase, thread_id: discussionThreadId }, null);
|
||||
|
||||
return {
|
||||
discussion: {
|
||||
testFor: 'discussion threads',
|
||||
contentType: 'POST',
|
||||
...camelCaseObject(discussionThread),
|
||||
...testMeta,
|
||||
},
|
||||
question: {
|
||||
testFor: 'question threads',
|
||||
contentType: 'POST',
|
||||
...camelCaseObject(questionThread),
|
||||
...testMeta,
|
||||
},
|
||||
comment: {
|
||||
return [
|
||||
{
|
||||
testFor: 'comments',
|
||||
contentType: 'COMMENT',
|
||||
type: 'discussion',
|
||||
...camelCaseObject(comment),
|
||||
...camelCaseObject(Factory.build('comment', { ...buildParamsSnakeCase }, null)),
|
||||
...testMeta,
|
||||
},
|
||||
};
|
||||
};
|
||||
{
|
||||
testFor: 'question threads',
|
||||
...camelCaseObject(Factory.build('thread', { ...buildParamsSnakeCase, type: 'question' }, null)),
|
||||
...testMeta,
|
||||
},
|
||||
{
|
||||
testFor: 'discussion threads',
|
||||
...camelCaseObject(Factory.build('thread', { ...buildParamsSnakeCase, type: 'discussion' }, null)),
|
||||
...testMeta,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const mockThreadAndComment = async (response) => {
|
||||
axiosMock.onGet(`${threadsApiUrl}${discussionThreadId}/`).reply(200, response);
|
||||
axiosMock.onGet(`${threadsApiUrl}${questionThreadId}/`).reply(200, response);
|
||||
axiosMock.onGet(commentsApiUrl).reply(200, Factory.build('commentsResult'));
|
||||
axiosMock.onPost(commentsApiUrl).reply(200, response);
|
||||
|
||||
await executeThunk(fetchThread(discussionThreadId), store.dispatch, store.getState);
|
||||
await executeThunk(fetchThread(questionThreadId), store.dispatch, store.getState);
|
||||
await executeThunk(fetchThreadComments(discussionThreadId), store.dispatch, store.getState);
|
||||
await executeThunk(addComment(commentContent, discussionThreadId, null), store.dispatch, store.getState);
|
||||
};
|
||||
|
||||
const canPerformActionTestData = ACTIONS_LIST.flatMap(({
|
||||
id, action, conditions, label: { defaultMessage },
|
||||
}) => {
|
||||
const buildParams = { editable_fields: [action] };
|
||||
|
||||
if (conditions) {
|
||||
Object.entries(conditions).forEach(([conditionKey, conditionValue]) => {
|
||||
buildParams[conditionKey] = conditionValue;
|
||||
});
|
||||
}
|
||||
|
||||
const testContent = buildTestContent(buildParams, { label: defaultMessage, action });
|
||||
|
||||
switch (id) {
|
||||
case 'answer':
|
||||
case 'unanswer':
|
||||
return [testContent.question];
|
||||
case 'endorse':
|
||||
case 'unendorse':
|
||||
return [testContent.comment, testContent.discussion];
|
||||
default:
|
||||
return [testContent.discussion, testContent.question, testContent.comment];
|
||||
}
|
||||
});
|
||||
|
||||
const canNotPerformActionTestData = ACTIONS_LIST.flatMap(({ action, conditions, label: { defaultMessage } }) => {
|
||||
const label = defaultMessage;
|
||||
|
||||
if (!conditions) {
|
||||
const content = buildTestContent({ editable_fields: [] }, { reason: 'field is not editable', label: defaultMessage });
|
||||
return [content.discussion, content.question, content.comment];
|
||||
}
|
||||
|
||||
const reversedConditions = Object.fromEntries(Object.entries(conditions).map(([key, value]) => [key, !value]));
|
||||
|
||||
const content = {
|
||||
// can edit field, but doesn't pass conditions
|
||||
...buildTestContent({
|
||||
const canPerformActionTestData = ACTIONS_LIST
|
||||
.map(({ action, conditions, label: { defaultMessage } }) => {
|
||||
const buildParams = {
|
||||
editable_fields: [action],
|
||||
...reversedConditions,
|
||||
}, { reason: 'field is editable but does not pass condition', label, action }),
|
||||
};
|
||||
if (conditions) {
|
||||
Object.entries(conditions)
|
||||
.forEach(([conditionKey, conditionValue]) => {
|
||||
buildParams[conditionKey] = conditionValue;
|
||||
});
|
||||
}
|
||||
return buildTestContent(buildParams, { label: defaultMessage, action });
|
||||
})
|
||||
.flat();
|
||||
|
||||
// passes conditions, but can't edit field
|
||||
...(action === ContentActions.DELETE ? {} : buildTestContent({
|
||||
editable_fields: [],
|
||||
...conditions,
|
||||
}, { reason: 'passes conditions but field is not editable', label, action })),
|
||||
const canNotPerformActionTestData = ACTIONS_LIST
|
||||
.map(({ action, conditions, label: { defaultMessage } }) => {
|
||||
const label = defaultMessage;
|
||||
let content;
|
||||
if (!conditions) {
|
||||
content = buildTestContent({ editable_fields: [] }, { reason: 'field is not editable', label: defaultMessage });
|
||||
} else {
|
||||
const reversedConditions = Object.keys(conditions)
|
||||
.reduce(
|
||||
(results, key) => ({
|
||||
...results,
|
||||
[key]: !conditions[key],
|
||||
}),
|
||||
{},
|
||||
);
|
||||
|
||||
// can't edit field, and doesn't pass conditions
|
||||
...buildTestContent({
|
||||
editable_fields: [],
|
||||
...reversedConditions,
|
||||
}, { reason: 'can not edit field and does not match conditions', label, action }),
|
||||
};
|
||||
content = [
|
||||
// can edit field, but doesn't pass conditions
|
||||
...buildTestContent({
|
||||
editable_fields: [action],
|
||||
...reversedConditions,
|
||||
}, { reason: 'field is editable but does not pass condition', label, action }),
|
||||
// passes conditions, but can't edit field
|
||||
...(action === ContentActions.DELETE
|
||||
? []
|
||||
: buildTestContent({
|
||||
editable_fields: [],
|
||||
...conditions,
|
||||
}, { reason: 'passes conditions but field is not editable', label, action })
|
||||
),
|
||||
// can't edit field, and doesn't pass conditions
|
||||
...buildTestContent({
|
||||
editable_fields: [],
|
||||
...reversedConditions,
|
||||
}, { reason: 'can not edit field and does not match conditions', label, action }),
|
||||
];
|
||||
}
|
||||
return content;
|
||||
})
|
||||
.flat();
|
||||
|
||||
return [content.discussion, content.question, content.comment];
|
||||
});
|
||||
|
||||
const renderComponent = ({
|
||||
id = '',
|
||||
contentType = 'POST',
|
||||
closed = false,
|
||||
type = 'discussion',
|
||||
postId = '',
|
||||
disabled = false,
|
||||
actionHandlers = {},
|
||||
} = {}) => {
|
||||
function renderComponent(
|
||||
commentOrPost,
|
||||
{ disabled = false, actionHandlers = {} } = {},
|
||||
) {
|
||||
render(
|
||||
<IntlProvider locale="en">
|
||||
<AppProvider store={store}>
|
||||
<PostCommentsContext.Provider value={{
|
||||
isClosed: closed,
|
||||
postType: type,
|
||||
postId,
|
||||
}}
|
||||
>
|
||||
<ActionsDropdown
|
||||
id={id}
|
||||
disabled={disabled}
|
||||
actionHandlers={actionHandlers}
|
||||
contentType={contentType}
|
||||
/>
|
||||
</PostCommentsContext.Provider>
|
||||
<ActionsDropdown
|
||||
commentOrPost={commentOrPost}
|
||||
disabled={disabled}
|
||||
actionHandlers={actionHandlers}
|
||||
/>
|
||||
</AppProvider>
|
||||
</IntlProvider>,
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const findOpenActionsDropdownButton = async () => (
|
||||
screen.findByRole('button', { name: messages.actionsAlt.defaultMessage })
|
||||
@@ -183,18 +128,10 @@ describe('ActionsDropdown', () => {
|
||||
},
|
||||
});
|
||||
store = initializeStore();
|
||||
Factory.resetAll();
|
||||
axiosMock = new MockAdapter(getAuthenticatedHttpClient());
|
||||
|
||||
axiosMock.onGet(`${getCourseConfigApiUrl()}${courseId}/`)
|
||||
.reply(200, { isPostingEnabled: true });
|
||||
|
||||
await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
|
||||
});
|
||||
|
||||
it.each(Object.values(buildTestContent()))('can open drop down if enabled', async (commentOrPost) => {
|
||||
await mockThreadAndComment(commentOrPost);
|
||||
renderComponent({ ...commentOrPost });
|
||||
it.each(buildTestContent())('can open drop down if enabled', async (commentOrPost) => {
|
||||
renderComponent(commentOrPost, { disabled: false });
|
||||
|
||||
const openButton = await findOpenActionsDropdownButton();
|
||||
await act(async () => {
|
||||
@@ -204,9 +141,8 @@ describe('ActionsDropdown', () => {
|
||||
await waitFor(() => expect(screen.queryByTestId('actions-dropdown-modal-popup')).toBeInTheDocument());
|
||||
});
|
||||
|
||||
it.each(Object.values(buildTestContent()))('can not open drop down if disabled', async (commentOrPost) => {
|
||||
await mockThreadAndComment(commentOrPost);
|
||||
renderComponent({ ...commentOrPost, disabled: true });
|
||||
it.each(buildTestContent())('can not open drop down if disabled', async (commentOrPost) => {
|
||||
renderComponent(commentOrPost, { disabled: true });
|
||||
|
||||
const openButton = await findOpenActionsDropdownButton();
|
||||
await act(async () => {
|
||||
@@ -217,9 +153,11 @@ describe('ActionsDropdown', () => {
|
||||
});
|
||||
|
||||
it('copy link action should be visible on posts', async () => {
|
||||
const discussionObject = buildTestContent({ editable_fields: ['copy_link'] }).discussion;
|
||||
await mockThreadAndComment(discussionObject);
|
||||
renderComponent({ ...camelCaseObject(discussionObject) });
|
||||
const commentOrPost = {
|
||||
testFor: 'thread',
|
||||
...camelCaseObject(Factory.build('thread', { editable_fields: ['copy_link'] }, null)),
|
||||
};
|
||||
renderComponent(commentOrPost, { disabled: false });
|
||||
|
||||
const openButton = await findOpenActionsDropdownButton();
|
||||
await act(async () => {
|
||||
@@ -230,9 +168,11 @@ describe('ActionsDropdown', () => {
|
||||
});
|
||||
|
||||
it('copy link action should not be visible on a comment', async () => {
|
||||
const commentObject = buildTestContent().comment;
|
||||
await mockThreadAndComment(commentObject);
|
||||
renderComponent({ ...camelCaseObject(commentObject) });
|
||||
const commentOrPost = {
|
||||
testFor: 'comments',
|
||||
...camelCaseObject(Factory.build('comment', {}, null)),
|
||||
};
|
||||
renderComponent(commentOrPost, { disabled: false });
|
||||
|
||||
const openButton = await findOpenActionsDropdownButton();
|
||||
await act(async () => {
|
||||
@@ -243,13 +183,15 @@ describe('ActionsDropdown', () => {
|
||||
});
|
||||
|
||||
describe.each(canPerformActionTestData)('Actions', ({
|
||||
testFor, action, label, ...commentOrPost
|
||||
testFor, action, label, reason, ...commentOrPost
|
||||
}) => {
|
||||
describe(`for ${testFor}`, () => {
|
||||
it(`can "${label}" when allowed`, async () => {
|
||||
await mockThreadAndComment(commentOrPost);
|
||||
const mockHandler = jest.fn();
|
||||
renderComponent({ ...commentOrPost, actionHandlers: { [action]: mockHandler } });
|
||||
renderComponent(
|
||||
commentOrPost,
|
||||
{ actionHandlers: { [action]: mockHandler } },
|
||||
);
|
||||
|
||||
const openButton = await findOpenActionsDropdownButton();
|
||||
await act(async () => {
|
||||
@@ -272,8 +214,7 @@ describe('ActionsDropdown', () => {
|
||||
}) => {
|
||||
describe(`for ${testFor}`, () => {
|
||||
it(`can't "${label}" when ${reason}`, async () => {
|
||||
await mockThreadAndComment(commentOrPost);
|
||||
renderComponent({ ...commentOrPost });
|
||||
renderComponent(commentOrPost);
|
||||
|
||||
const openButton = await findOpenActionsDropdownButton();
|
||||
await act(async () => {
|
||||
|
||||
@@ -1,41 +1,34 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Alert } from '@openedx/paragon';
|
||||
import { Report } from '@openedx/paragon/icons';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Alert } from '@edx/paragon';
|
||||
import { Report } from '@edx/paragon/icons';
|
||||
|
||||
import { AvatarOutlineAndLabelColors } from '../../data/constants';
|
||||
import {
|
||||
selectUserHasModerationPrivileges, selectUserIsGroupTa, selectUserIsStaff,
|
||||
selectModerationSettings, selectUserHasModerationPrivileges, selectUserIsGroupTa, selectUserIsStaff,
|
||||
} from '../data/selectors';
|
||||
import { commentShape } from '../post-comments/comments/comment/proptypes';
|
||||
import messages from '../post-comments/messages';
|
||||
import AlertBar from './AlertBar';
|
||||
import { postShape } from '../posts/post/proptypes';
|
||||
import AuthorLabel from './AuthorLabel';
|
||||
|
||||
const AlertBanner = ({
|
||||
author,
|
||||
abuseFlagged,
|
||||
lastEdit,
|
||||
closed,
|
||||
closedBy,
|
||||
closeReason,
|
||||
editByLabel,
|
||||
closedByLabel,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
function AlertBanner({
|
||||
intl,
|
||||
content,
|
||||
}) {
|
||||
const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
|
||||
const userIsGroupTa = useSelector(selectUserIsGroupTa);
|
||||
const userIsGlobalStaff = useSelector(selectUserIsStaff);
|
||||
const userIsContentAuthor = getAuthenticatedUser().username === author;
|
||||
const canSeeReportedBanner = abuseFlagged;
|
||||
const { reasonCodesEnabled } = useSelector(selectModerationSettings);
|
||||
const userIsContentAuthor = getAuthenticatedUser().username === content.author;
|
||||
const canSeeReportedBanner = content?.abuseFlagged;
|
||||
const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsGroupTa
|
||||
|| userIsGlobalStaff || userIsContentAuthor
|
||||
);
|
||||
const editByLabelColor = AvatarOutlineAndLabelColors[editByLabel];
|
||||
const closedByLabelColor = AvatarOutlineAndLabelColors[closedByLabel];
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -44,54 +37,53 @@ const AlertBanner = ({
|
||||
{intl.formatMessage(messages.abuseFlaggedMessage)}
|
||||
</Alert>
|
||||
)}
|
||||
{ canSeeLastEditOrClosedAlert && (
|
||||
{reasonCodesEnabled && canSeeLastEditOrClosedAlert && (
|
||||
<>
|
||||
{lastEdit?.reason && (
|
||||
<AlertBar
|
||||
message={intl.formatMessage(messages.editedBy)}
|
||||
author={lastEdit.editorUsername}
|
||||
authorLabel={editByLabel}
|
||||
labelColor={editByLabelColor && `text-${editByLabelColor}`}
|
||||
reason={lastEdit.reason}
|
||||
/>
|
||||
{content.lastEdit?.reason && (
|
||||
<Alert variant="info" className="px-3 shadow-none mb-1 py-10px bg-light-200">
|
||||
<div className="d-flex align-items-center flex-wrap text-gray-700 font-style">
|
||||
{intl.formatMessage(messages.editedBy)}
|
||||
<span className="ml-1 mr-3">
|
||||
<AuthorLabel author={content.lastEdit.editorUsername} linkToProfile postOrComment />
|
||||
</span>
|
||||
<span
|
||||
className="mx-1.5 font-size-8 font-style text-light-700"
|
||||
style={{ lineHeight: '15px' }}
|
||||
>
|
||||
{intl.formatMessage(messages.fullStop)}
|
||||
</span>
|
||||
{intl.formatMessage(messages.reason)}: {content.lastEdit.reason}
|
||||
</div>
|
||||
</Alert>
|
||||
)}
|
||||
{closed && (
|
||||
<AlertBar
|
||||
message={intl.formatMessage(messages.closedBy)}
|
||||
author={closedBy}
|
||||
authorLabel={closedByLabel}
|
||||
labelColor={closedByLabelColor && `text-${closedByLabelColor}`}
|
||||
reason={closeReason}
|
||||
/>
|
||||
{content.closed && (
|
||||
<Alert variant="info" className="px-3 shadow-none mb-1 py-10px bg-light-200">
|
||||
<div className="d-flex align-items-center flex-wrap text-gray-700 font-style">
|
||||
{intl.formatMessage(messages.closedBy)}
|
||||
<span className="ml-1 ">
|
||||
<AuthorLabel author={content.closedBy} linkToProfile postOrComment />
|
||||
</span>
|
||||
<span
|
||||
className="mx-1.5 font-size-8 font-style text-light-700"
|
||||
style={{ lineHeight: '15px' }}
|
||||
>
|
||||
{intl.formatMessage(messages.fullStop)}
|
||||
</span>
|
||||
|
||||
{content.closeReason && (`${intl.formatMessage(messages.reason)}: ${content.closeReason}`)}
|
||||
|
||||
</div>
|
||||
</Alert>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
AlertBanner.propTypes = {
|
||||
author: PropTypes.string.isRequired,
|
||||
abuseFlagged: PropTypes.bool,
|
||||
closed: PropTypes.bool,
|
||||
closedBy: PropTypes.string,
|
||||
closedByLabel: PropTypes.string,
|
||||
closeReason: PropTypes.string,
|
||||
editByLabel: PropTypes.string,
|
||||
lastEdit: PropTypes.shape({
|
||||
editorUsername: PropTypes.string,
|
||||
reason: PropTypes.string,
|
||||
}),
|
||||
intl: intlShape.isRequired,
|
||||
content: PropTypes.oneOfType([commentShape.isRequired, postShape.isRequired]).isRequired,
|
||||
};
|
||||
|
||||
AlertBanner.defaultProps = {
|
||||
abuseFlagged: false,
|
||||
closed: undefined,
|
||||
closedBy: undefined,
|
||||
closedByLabel: undefined,
|
||||
closeReason: undefined,
|
||||
editByLabel: undefined,
|
||||
lastEdit: {},
|
||||
};
|
||||
|
||||
export default React.memo(AlertBanner);
|
||||
export default injectIntl(AlertBanner);
|
||||
|
||||
@@ -9,7 +9,7 @@ import { ThreadType } from '../../data/constants';
|
||||
import { initializeStore } from '../../store';
|
||||
import messages from '../post-comments/messages';
|
||||
import AlertBanner from './AlertBanner';
|
||||
import DiscussionContext from './context';
|
||||
import { DiscussionContext } from './context';
|
||||
|
||||
import '../post-comments/data/__factories__';
|
||||
import '../posts/data/__factories__';
|
||||
@@ -31,14 +31,7 @@ function renderComponent(
|
||||
value={{ courseId: 'course-v1:edX+TestX+Test_Course' }}
|
||||
>
|
||||
<AlertBanner
|
||||
author={content.author}
|
||||
abuseFlagged={content.abuseFlagged}
|
||||
lastEdit={content.lastEdit}
|
||||
closed={content.closed}
|
||||
closedBy={content.closedBy}
|
||||
closeReason={content.closeReason}
|
||||
editByLabel={content.editByLabel}
|
||||
closedByLabel={content.closedByLabel}
|
||||
content={content}
|
||||
/>
|
||||
</DiscussionContext.Provider>
|
||||
</AppProvider>
|
||||
@@ -90,6 +83,7 @@ describe.each([
|
||||
store = initializeStore({
|
||||
config: {
|
||||
hasModerationPrivileges: true,
|
||||
reasonCodesEnabled: true,
|
||||
},
|
||||
});
|
||||
const content = buildTestContent(type, props);
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Alert } from '@openedx/paragon';
|
||||
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import messages from '../post-comments/messages';
|
||||
import AuthorLabel from './AuthorLabel';
|
||||
|
||||
const AlertBar = ({
|
||||
message,
|
||||
author,
|
||||
authorLabel,
|
||||
labelColor,
|
||||
reason,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Alert variant="info" className="px-3 shadow-none mb-1 py-10px bg-light-200">
|
||||
<div className="d-flex align-items-center flex-wrap text-gray-700 font-style">
|
||||
{message}
|
||||
<span className="ml-1">
|
||||
<AuthorLabel
|
||||
author={author}
|
||||
authorLabel={authorLabel}
|
||||
labelColor={labelColor}
|
||||
linkToProfile
|
||||
postOrComment
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
className="mr-1.5 font-size-8 font-style text-light-700"
|
||||
style={{ lineHeight: '15px' }}
|
||||
>
|
||||
{intl.formatMessage(messages.fullStop)}
|
||||
</span>
|
||||
{reason && (`${intl.formatMessage(messages.reason)}: ${reason}`)}
|
||||
</div>
|
||||
</Alert>
|
||||
);
|
||||
};
|
||||
|
||||
AlertBar.propTypes = {
|
||||
message: PropTypes.string,
|
||||
author: PropTypes.string,
|
||||
authorLabel: PropTypes.string,
|
||||
labelColor: PropTypes.string,
|
||||
reason: PropTypes.string,
|
||||
};
|
||||
|
||||
AlertBar.defaultProps = {
|
||||
message: '',
|
||||
author: '',
|
||||
authorLabel: '',
|
||||
labelColor: '',
|
||||
reason: '',
|
||||
};
|
||||
|
||||
export default React.memo(AlertBar);
|
||||
@@ -1,20 +1,23 @@
|
||||
import React, { useContext, useMemo } from 'react';
|
||||
import React, { useContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
|
||||
import classNames from 'classnames';
|
||||
import { generatePath, Link } from 'react-router-dom';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import * as timeago from 'timeago.js';
|
||||
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
|
||||
import { Institution, School } from '@edx/paragon/icons';
|
||||
|
||||
import { Routes } from '../../data/constants';
|
||||
import { useShowLearnersTab } from '../data/hooks';
|
||||
import messages from '../messages';
|
||||
import { getAuthorLabel } from '../utils';
|
||||
import DiscussionContext from './context';
|
||||
import { discussionsPath } from '../utils';
|
||||
import { DiscussionContext } from './context';
|
||||
import timeLocale from './time-locale';
|
||||
|
||||
const AuthorLabel = ({
|
||||
function AuthorLabel({
|
||||
intl,
|
||||
author,
|
||||
authorLabel,
|
||||
linkToProfile,
|
||||
@@ -23,44 +26,58 @@ const AuthorLabel = ({
|
||||
postCreatedAt,
|
||||
authorToolTip,
|
||||
postOrComment,
|
||||
}) => {
|
||||
}) {
|
||||
const location = useLocation();
|
||||
const { courseId } = useContext(DiscussionContext);
|
||||
let icon = null;
|
||||
let authorLabelMessage = null;
|
||||
timeago.register('time-locale', timeLocale);
|
||||
const intl = useIntl();
|
||||
const { courseId, enableInContextSidebar } = useContext(DiscussionContext);
|
||||
const { icon, authorLabelMessage } = useMemo(() => getAuthorLabel(intl, authorLabel), [authorLabel]);
|
||||
|
||||
if (authorLabel === 'Staff') {
|
||||
icon = Institution;
|
||||
authorLabelMessage = intl.formatMessage(messages.authorLabelStaff);
|
||||
}
|
||||
if (authorLabel === 'Community TA') {
|
||||
icon = School;
|
||||
authorLabelMessage = intl.formatMessage(messages.authorLabelTA);
|
||||
}
|
||||
|
||||
const isRetiredUser = author ? author.startsWith('retired__user') : false;
|
||||
const showTextPrimary = !authorLabelMessage && !isRetiredUser && !alert;
|
||||
|
||||
const className = classNames('d-flex align-items-center', { 'mb-0.5': !postOrComment }, labelColor);
|
||||
|
||||
const showUserNameAsLink = linkToProfile && author && author !== intl.formatMessage(messages.anonymous)
|
||||
&& !enableInContextSidebar;
|
||||
const showUserNameAsLink = useShowLearnersTab()
|
||||
&& linkToProfile && author && author !== intl.formatMessage(messages.anonymous);
|
||||
|
||||
const authorName = useMemo(() => (
|
||||
<span
|
||||
className={classNames('mr-1.5 font-style font-weight-500 author-name', {
|
||||
'text-gray-700': isRetiredUser,
|
||||
'text-primary-500': !authorLabelMessage && !isRetiredUser,
|
||||
})}
|
||||
role="heading"
|
||||
aria-level="2"
|
||||
>
|
||||
{isRetiredUser ? '[Deactivated]' : author}
|
||||
</span>
|
||||
), [author, authorLabelMessage, isRetiredUser]);
|
||||
const labelContents = (
|
||||
<div className={className}>
|
||||
{!alert && (
|
||||
<span
|
||||
className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
|
||||
'text-gray-700': isRetiredUser,
|
||||
'text-primary-500': !authorLabelMessage && !isRetiredUser,
|
||||
})}
|
||||
role="heading"
|
||||
aria-level="2"
|
||||
>
|
||||
{isRetiredUser ? '[Deactivated]' : author}
|
||||
</span>
|
||||
)}
|
||||
|
||||
const labelContents = useMemo(() => (
|
||||
<>
|
||||
<OverlayTrigger
|
||||
placement={authorToolTip ? 'top' : 'right'}
|
||||
overlay={(
|
||||
<Tooltip id={authorToolTip ? `endorsed-by-${author}-tooltip` : `${authorLabel}-label-tooltip`}>
|
||||
{authorToolTip ? author : authorLabel}
|
||||
<Tooltip id={`endorsed-by-${author}-tooltip`}>
|
||||
{author}
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
trigger={['hover', 'focus']}
|
||||
>
|
||||
<div className={classNames('d-flex flex-row align-items-center')}>
|
||||
<div className={classNames('d-flex flex-row align-items-center', {
|
||||
'disable-div': !authorToolTip,
|
||||
})}
|
||||
>
|
||||
<Icon
|
||||
style={{
|
||||
width: '1rem',
|
||||
@@ -69,23 +86,24 @@ const AuthorLabel = ({
|
||||
src={icon}
|
||||
data-testid="author-icon"
|
||||
/>
|
||||
{authorLabelMessage && (
|
||||
<span
|
||||
className={classNames('mr-1.5 font-style font-weight-500', {
|
||||
'text-primary-500': showTextPrimary,
|
||||
'text-gray-700': isRetiredUser,
|
||||
})}
|
||||
style={{ marginLeft: '2px' }}
|
||||
>
|
||||
{authorLabelMessage}
|
||||
</span>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</OverlayTrigger>
|
||||
{authorLabelMessage && (
|
||||
<span
|
||||
className={classNames('mr-1.5 font-size-14 font-style font-weight-500', {
|
||||
'text-primary-500': showTextPrimary,
|
||||
'text-gray-700': isRetiredUser,
|
||||
})}
|
||||
style={{ marginLeft: '2px' }}
|
||||
>
|
||||
{authorLabelMessage}
|
||||
</span>
|
||||
)}
|
||||
{postCreatedAt && (
|
||||
<span
|
||||
title={postCreatedAt}
|
||||
className={classNames('align-content-center post-summary-timestamp', {
|
||||
className={classNames('font-family-inter align-content-center', {
|
||||
'text-white': alert,
|
||||
'text-gray-500': !alert,
|
||||
})}
|
||||
@@ -94,28 +112,27 @@ const AuthorLabel = ({
|
||||
{timeago.format(postCreatedAt, 'time-locale')}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
), [author, authorLabelMessage, authorToolTip, icon, isRetiredUser, postCreatedAt, showTextPrimary, alert]);
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
return showUserNameAsLink
|
||||
? (
|
||||
<div className={`${className} flex-wrap`}>
|
||||
<Link
|
||||
data-testid="learner-posts-link"
|
||||
id="learner-posts-link"
|
||||
to={generatePath(Routes.LEARNERS.POSTS, { learnerUsername: author, courseId })}
|
||||
className="text-decoration-none text-reset"
|
||||
style={{ width: 'fit-content' }}
|
||||
>
|
||||
{!alert && authorName}
|
||||
</Link>
|
||||
<Link
|
||||
data-testid="learner-posts-link"
|
||||
id="learner-posts-link"
|
||||
to={discussionsPath(Routes.LEARNERS.POSTS, { learnerUsername: author, courseId })(location)}
|
||||
className="text-decoration-none"
|
||||
style={{ width: 'fit-content' }}
|
||||
>
|
||||
{labelContents}
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
: <div className={`${className} flex-wrap`}>{authorName}{labelContents}</div>;
|
||||
};
|
||||
: <>{labelContents}</>;
|
||||
}
|
||||
|
||||
AuthorLabel.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
author: PropTypes.string.isRequired,
|
||||
authorLabel: PropTypes.string,
|
||||
linkToProfile: PropTypes.bool,
|
||||
@@ -136,4 +153,4 @@ AuthorLabel.defaultProps = {
|
||||
postOrComment: false,
|
||||
};
|
||||
|
||||
export default React.memo(AuthorLabel);
|
||||
export default injectIntl(AuthorLabel);
|
||||
|
||||
@@ -9,11 +9,11 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import { AppProvider } from '@edx/frontend-platform/react';
|
||||
|
||||
import { initializeStore } from '../../store';
|
||||
import executeThunk from '../../test-utils';
|
||||
import { executeThunk } from '../../test-utils';
|
||||
import { getCourseConfigApiUrl } from '../data/api';
|
||||
import fetchCourseConfig from '../data/thunks';
|
||||
import { fetchCourseConfig } from '../data/thunks';
|
||||
import AuthorLabel from './AuthorLabel';
|
||||
import DiscussionContext from './context';
|
||||
import { DiscussionContext } from './context';
|
||||
|
||||
const courseId = 'course-v1:edX+DemoX+Demo_Course';
|
||||
const courseConfigApiUrl = getCourseConfigApiUrl();
|
||||
@@ -21,11 +21,11 @@ let store;
|
||||
let axiosMock;
|
||||
let container;
|
||||
|
||||
function renderComponent(author, authorLabel, linkToProfile, labelColor, enableInContextSidebar) {
|
||||
function renderComponent(author, authorLabel, linkToProfile, labelColor) {
|
||||
const wrapper = render(
|
||||
<IntlProvider locale="en">
|
||||
<AppProvider store={store}>
|
||||
<DiscussionContext.Provider value={{ courseId, enableInContextSidebar }}>
|
||||
<DiscussionContext.Provider value={{ courseId }}>
|
||||
<AuthorLabel
|
||||
author={author}
|
||||
authorLabel={authorLabel}
|
||||
@@ -53,6 +53,7 @@ describe('Author label', () => {
|
||||
store = initializeStore();
|
||||
axiosMock = new MockAdapter(getAuthenticatedHttpClient());
|
||||
axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, {
|
||||
learners_tab_enabled: true,
|
||||
has_moderation_privileges: true,
|
||||
});
|
||||
axiosMock.onGet(`${courseConfigApiUrl}${courseId}/settings`).reply(200, {});
|
||||
@@ -62,61 +63,46 @@ describe('Author label', () => {
|
||||
describe.each([
|
||||
['anonymous', null, false, ''],
|
||||
['ta_user', 'Community TA', true, 'text-TA-color'],
|
||||
['moderator_user', 'Moderator', true, 'text-TA-color'],
|
||||
['retired__user', null, false, ''],
|
||||
['staff_user', 'Staff', true, 'text-staff-color'],
|
||||
['learner_user', null, false, ''],
|
||||
])('for %s', (author, authorLabel, linkToProfile, labelColor) => {
|
||||
it(
|
||||
'it has author name text',
|
||||
])('for %s', (
|
||||
author, authorLabel, linkToProfile, labelColor,
|
||||
) => {
|
||||
it('it has author name text',
|
||||
async () => {
|
||||
renderComponent(author, authorLabel, linkToProfile, labelColor);
|
||||
const authorElement = container.querySelector('[role=heading]');
|
||||
const authorName = author.startsWith('retired__user') ? '[Deactivated]' : author;
|
||||
|
||||
expect(authorElement).toHaveTextContent(authorName);
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
it(
|
||||
`it is "${(!linkToProfile) && 'not'}" clickable when linkToProfile is ${!!linkToProfile} and enableInContextSidebar is false`,
|
||||
it(`it is "${!linkToProfile && 'not'}" clickable when linkToProfile is ${!!linkToProfile}`,
|
||||
async () => {
|
||||
renderComponent(author, authorLabel, linkToProfile, labelColor, false);
|
||||
renderComponent(author, authorLabel, linkToProfile, labelColor);
|
||||
|
||||
if (linkToProfile) {
|
||||
expect(screen.queryByTestId('learner-posts-link')).toBeInTheDocument();
|
||||
} else {
|
||||
expect(screen.queryByTestId('learner-posts-link')).not.toBeInTheDocument();
|
||||
}
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
it(
|
||||
'it is not clickable when enableInContextSidebar is true',
|
||||
async () => {
|
||||
renderComponent(author, authorLabel, linkToProfile, labelColor, true);
|
||||
|
||||
expect(screen.queryByTestId('learner-posts-link')).not.toBeInTheDocument();
|
||||
},
|
||||
);
|
||||
|
||||
it(
|
||||
`it has "${!linkToProfile && 'not'}" label text and label color when linkToProfile is ${!!linkToProfile}`,
|
||||
it(`it has "${!linkToProfile && 'not'}" label text and label color when linkToProfile is ${!!linkToProfile}`,
|
||||
async () => {
|
||||
renderComponent(author, authorLabel, linkToProfile, labelColor);
|
||||
const authorElement = container.querySelector('[role=heading]');
|
||||
const labelParentNode = authorElement.parentNode.parentNode;
|
||||
const labelElement = labelParentNode.lastChild.lastChild;
|
||||
const label = ['CTA', 'TA', 'Staff'].includes(labelElement.textContent) && labelElement.textContent;
|
||||
const labelElement = authorElement.parentNode.lastChild;
|
||||
const label = ['TA', 'Staff'].includes(labelElement.textContent) && labelElement.textContent;
|
||||
|
||||
if (linkToProfile) {
|
||||
expect(labelParentNode).toHaveClass(labelColor);
|
||||
expect(labelElement).toHaveTextContent(label);
|
||||
expect(authorElement.parentNode).toHaveClass(labelColor);
|
||||
expect(authorElement.parentNode.lastChild).toHaveTextContent(label);
|
||||
} else {
|
||||
expect(authorElement.parentNode.lastChild).not.toHaveTextContent(label, { exact: true });
|
||||
expect(authorElement.parentNode).not.toHaveClass(labelColor, { exact: true });
|
||||
}
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,24 +1,22 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { ActionRow, Button, ModalDialog } from '@openedx/paragon';
|
||||
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { ActionRow, Button, ModalDialog } from '@edx/paragon';
|
||||
|
||||
import messages from '../messages';
|
||||
|
||||
const Confirmation = ({
|
||||
function Confirmation({
|
||||
intl,
|
||||
isOpen,
|
||||
title,
|
||||
description,
|
||||
onClose,
|
||||
confirmAction,
|
||||
closeButtonVariant,
|
||||
comfirmAction,
|
||||
closeButtonVaraint,
|
||||
confirmButtonVariant,
|
||||
confirmButtonText,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
|
||||
}) {
|
||||
return (
|
||||
<ModalDialog title={title} isOpen={isOpen} hasCloseButton={false} onClose={onClose} zIndex={5000}>
|
||||
<ModalDialog.Header>
|
||||
@@ -31,33 +29,34 @@ const Confirmation = ({
|
||||
</ModalDialog.Body>
|
||||
<ModalDialog.Footer>
|
||||
<ActionRow>
|
||||
<ModalDialog.CloseButton variant={closeButtonVariant}>
|
||||
<ModalDialog.CloseButton variant={closeButtonVaraint}>
|
||||
{intl.formatMessage(messages.confirmationCancel)}
|
||||
</ModalDialog.CloseButton>
|
||||
<Button variant={confirmButtonVariant} onClick={confirmAction}>
|
||||
<Button variant={confirmButtonVariant} onClick={comfirmAction}>
|
||||
{ confirmButtonText || intl.formatMessage(messages.confirmationConfirm)}
|
||||
</Button>
|
||||
</ActionRow>
|
||||
</ModalDialog.Footer>
|
||||
</ModalDialog>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
Confirmation.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
confirmAction: PropTypes.func.isRequired,
|
||||
comfirmAction: PropTypes.func.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
description: PropTypes.string.isRequired,
|
||||
closeButtonVariant: PropTypes.string,
|
||||
closeButtonVaraint: PropTypes.string,
|
||||
confirmButtonVariant: PropTypes.string,
|
||||
confirmButtonText: PropTypes.string,
|
||||
};
|
||||
|
||||
Confirmation.defaultProps = {
|
||||
closeButtonVariant: 'default',
|
||||
closeButtonVaraint: 'default',
|
||||
confirmButtonVariant: 'primary',
|
||||
confirmButtonText: '',
|
||||
};
|
||||
|
||||
export default React.memo(Confirmation);
|
||||
export default injectIntl(Confirmation);
|
||||
|
||||
@@ -1,34 +1,30 @@
|
||||
import React, { useContext } from 'react';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Alert, Icon } from '@openedx/paragon';
|
||||
import { CheckCircle, Verified } from '@openedx/paragon/icons';
|
||||
import * as timeago from 'timeago.js';
|
||||
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { Alert, Icon } from '@edx/paragon';
|
||||
import { CheckCircle, Verified } from '@edx/paragon/icons';
|
||||
|
||||
import { ThreadType } from '../../data/constants';
|
||||
import { commentShape } from '../post-comments/comments/comment/proptypes';
|
||||
import messages from '../post-comments/messages';
|
||||
import PostCommentsContext from '../post-comments/postCommentsContext';
|
||||
import AuthorLabel from './AuthorLabel';
|
||||
import timeLocale from './time-locale';
|
||||
|
||||
const EndorsedAlertBanner = ({
|
||||
endorsed,
|
||||
endorsedAt,
|
||||
endorsedBy,
|
||||
endorsedByLabel,
|
||||
}) => {
|
||||
function EndorsedAlertBanner({
|
||||
intl,
|
||||
content,
|
||||
postType,
|
||||
}) {
|
||||
timeago.register('time-locale', timeLocale);
|
||||
|
||||
const intl = useIntl();
|
||||
const { postType } = useContext(PostCommentsContext);
|
||||
const isQuestion = postType === ThreadType.QUESTION;
|
||||
const classes = isQuestion ? 'bg-success-500 text-white' : 'bg-dark-500 text-white';
|
||||
const iconClass = isQuestion ? CheckCircle : Verified;
|
||||
|
||||
return (
|
||||
endorsed && (
|
||||
content.endorsed && (
|
||||
<Alert
|
||||
variant="plain"
|
||||
className={`px-2.5 mb-0 py-8px align-items-center shadow-none ${classes}`}
|
||||
@@ -43,17 +39,17 @@ const EndorsedAlertBanner = ({
|
||||
height: '20px',
|
||||
}}
|
||||
/>
|
||||
<strong className="ml-2">
|
||||
<strong className="ml-2 font-family-inter">
|
||||
{intl.formatMessage(isQuestion ? messages.answer : messages.endorsed)}
|
||||
</strong>
|
||||
</div>
|
||||
<span className="d-flex align-items-center align-items-center flex-wrap" style={{ marginRight: '-1px' }}>
|
||||
<AuthorLabel
|
||||
author={endorsedBy}
|
||||
authorLabel={endorsedByLabel}
|
||||
author={content.endorsedBy}
|
||||
authorLabel={content.endorsedByLabel}
|
||||
linkToProfile
|
||||
alert={endorsed}
|
||||
postCreatedAt={endorsedAt}
|
||||
alert={content.endorsed}
|
||||
postCreatedAt={content.endorsedAt}
|
||||
authorToolTip
|
||||
postOrComment
|
||||
/>
|
||||
@@ -62,19 +58,16 @@ const EndorsedAlertBanner = ({
|
||||
</Alert>
|
||||
)
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
EndorsedAlertBanner.propTypes = {
|
||||
endorsed: PropTypes.bool.isRequired,
|
||||
endorsedAt: PropTypes.string,
|
||||
endorsedBy: PropTypes.string,
|
||||
endorsedByLabel: PropTypes.string,
|
||||
intl: intlShape.isRequired,
|
||||
content: PropTypes.oneOfType([commentShape.isRequired]).isRequired,
|
||||
postType: PropTypes.string,
|
||||
};
|
||||
|
||||
EndorsedAlertBanner.defaultProps = {
|
||||
endorsedAt: null,
|
||||
endorsedBy: null,
|
||||
endorsedByLabel: null,
|
||||
postType: null,
|
||||
};
|
||||
|
||||
export default React.memo(EndorsedAlertBanner);
|
||||
export default injectIntl(EndorsedAlertBanner);
|
||||
|
||||
@@ -8,8 +8,7 @@ import { AppProvider } from '@edx/frontend-platform/react';
|
||||
import { ThreadType } from '../../data/constants';
|
||||
import { initializeStore } from '../../store';
|
||||
import messages from '../post-comments/messages';
|
||||
import PostCommentsContext from '../post-comments/postCommentsContext';
|
||||
import DiscussionContext from './context';
|
||||
import { DiscussionContext } from './context';
|
||||
import EndorsedAlertBanner from './EndorsedAlertBanner';
|
||||
|
||||
import '../post-comments/data/__factories__';
|
||||
@@ -22,30 +21,24 @@ function buildTestContent(type, buildParams) {
|
||||
return camelCaseObject(Factory.build(type, { ...buildParamsSnakeCase }, null));
|
||||
}
|
||||
|
||||
const renderComponent = (content, postType) => {
|
||||
function renderComponent(
|
||||
content, postType,
|
||||
) {
|
||||
render(
|
||||
<IntlProvider locale="en">
|
||||
<AppProvider store={store}>
|
||||
<DiscussionContext.Provider
|
||||
value={{ courseId: 'course-v1:edX+DemoX+Demo_Course' }}
|
||||
>
|
||||
<PostCommentsContext.Provider value={{
|
||||
postType,
|
||||
}}
|
||||
>
|
||||
<EndorsedAlertBanner
|
||||
endorsed={content.endorsed}
|
||||
endorsedAt={content.endorsedAt}
|
||||
endorsedBy={content.endorsedBy}
|
||||
endorsedByLabel={content.endorsedByLabel}
|
||||
/>
|
||||
</PostCommentsContext.Provider>
|
||||
|
||||
<EndorsedAlertBanner
|
||||
content={content}
|
||||
postType={postType}
|
||||
/>
|
||||
</DiscussionContext.Provider>
|
||||
</AppProvider>
|
||||
</IntlProvider>,
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
describe.each([
|
||||
{
|
||||
@@ -84,6 +77,7 @@ describe.each([
|
||||
store = initializeStore({
|
||||
config: {
|
||||
hasModerationPrivileges: true,
|
||||
reasonCodesEnabled: true,
|
||||
},
|
||||
});
|
||||
const content = buildTestContent(type, props);
|
||||
|
||||
@@ -1,56 +1,46 @@
|
||||
import React, { useContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
Button, Icon, IconButton, OverlayTrigger, Tooltip,
|
||||
} from '@openedx/paragon';
|
||||
import {
|
||||
StarFilled, StarOutline, ThumbUpFilled, ThumbUpOutline,
|
||||
} from '@openedx/paragon/icons';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { injectIntl } from '@edx/frontend-platform/i18n';
|
||||
import { Button, Icon, IconButton } from '@edx/paragon';
|
||||
|
||||
import { ThreadType } from '../../data/constants';
|
||||
import { useHasLikePermission, useUserPostingEnabled } from '../data/hooks';
|
||||
import PostCommentsContext from '../post-comments/postCommentsContext';
|
||||
import {
|
||||
StarFilled, StarOutline, ThumbUpFilled, ThumbUpOutline,
|
||||
} from '../../components/icons';
|
||||
import { useUserCanAddThreadInBlackoutDate } from '../data/hooks';
|
||||
import { commentShape } from '../post-comments/comments/comment/proptypes';
|
||||
import { postShape } from '../posts/post/proptypes';
|
||||
import ActionsDropdown from './ActionsDropdown';
|
||||
import DiscussionContext from './context';
|
||||
import { DiscussionContext } from './context';
|
||||
|
||||
const HoverCard = ({
|
||||
id,
|
||||
contentType,
|
||||
function HoverCard({
|
||||
commentOrPost,
|
||||
actionHandlers,
|
||||
handleResponseCommentButton,
|
||||
addResponseCommentButtonMessage,
|
||||
onLike,
|
||||
onFollow,
|
||||
voted,
|
||||
following,
|
||||
isClosedPost,
|
||||
endorseIcons,
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
}) {
|
||||
const { enableInContextSidebar } = useContext(DiscussionContext);
|
||||
const { isClosed } = useContext(PostCommentsContext);
|
||||
const isUserPrivilegedInPostingRestriction = useUserPostingEnabled();
|
||||
const userHasLikePermission = useHasLikePermission(contentType, id);
|
||||
|
||||
const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
|
||||
return (
|
||||
<div
|
||||
className="flex-fill justify-content-end align-items-center hover-card bg-white mr-n4 position-absolute"
|
||||
data-testid={`hover-card-${id}`}
|
||||
id={`hover-card-${id}`}
|
||||
className="flex-fill justify-content-end align-items-center hover-card mr-n4 position-absolute"
|
||||
data-testid={`hover-card-${commentOrPost.id}`}
|
||||
id={`hover-card-${commentOrPost.id}`}
|
||||
>
|
||||
{isUserPrivilegedInPostingRestriction && (
|
||||
{userCanAddThreadInBlackoutDate && (
|
||||
<div className="d-flex">
|
||||
<Button
|
||||
variant="tertiary"
|
||||
className={classNames(
|
||||
'px-2.5 py-2 border-0 font-style text-gray-700',
|
||||
{ 'w-100': enableInContextSidebar },
|
||||
)}
|
||||
className={classNames('px-2.5 py-2 border-0 font-style text-gray-700 font-size-12',
|
||||
{ 'w-100': enableInContextSidebar })}
|
||||
onClick={() => handleResponseCommentButton()}
|
||||
disabled={isClosed}
|
||||
disabled={isClosedPost}
|
||||
style={{ lineHeight: '20px' }}
|
||||
>
|
||||
{addResponseCommentButtonMessage}
|
||||
@@ -59,50 +49,40 @@ const HoverCard = ({
|
||||
)}
|
||||
{endorseIcons && (
|
||||
<div className="hover-button">
|
||||
<OverlayTrigger
|
||||
overlay={(
|
||||
<Tooltip id="endorsed-icon-tooltip">
|
||||
{intl.formatMessage(endorseIcons.label)}
|
||||
</Tooltip>
|
||||
)}
|
||||
trigger={['hover', 'focus']}
|
||||
>
|
||||
<IconButton
|
||||
src={endorseIcons.icon}
|
||||
iconAs={Icon}
|
||||
onClick={() => {
|
||||
const actionFunction = actionHandlers[endorseIcons.action];
|
||||
actionFunction();
|
||||
}}
|
||||
className={['endorse', 'unendorse'].includes(endorseIcons.id) ? 'text-dark-500' : 'text-success-500'}
|
||||
size="sm"
|
||||
alt="Endorse"
|
||||
/>
|
||||
</OverlayTrigger>
|
||||
<IconButton
|
||||
src={endorseIcons.icon}
|
||||
iconAs={Icon}
|
||||
onClick={() => {
|
||||
const actionFunction = actionHandlers[endorseIcons.action];
|
||||
actionFunction();
|
||||
}}
|
||||
className={['endorse', 'unendorse'].includes(endorseIcons.id) ? 'text-dark-500' : 'text-success-500'}
|
||||
size="sm"
|
||||
alt="Endorse"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="hover-button">
|
||||
<IconButton
|
||||
src={voted ? ThumbUpFilled : ThumbUpOutline}
|
||||
src={commentOrPost.voted ? ThumbUpFilled : ThumbUpOutline}
|
||||
iconAs={Icon}
|
||||
size="sm"
|
||||
alt="Like"
|
||||
disabled={!userHasLikePermission}
|
||||
iconClassNames="like-icon-dimensions"
|
||||
iconClassNames="like-icon-dimentions"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onLike();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{following !== undefined && (
|
||||
{commentOrPost.following !== undefined && (
|
||||
<div className="hover-button">
|
||||
<IconButton
|
||||
src={following ? StarFilled : StarOutline}
|
||||
src={commentOrPost.following ? StarFilled : StarOutline}
|
||||
iconAs={Icon}
|
||||
size="sm"
|
||||
alt="Follow"
|
||||
iconClassNames="follow-icon-dimensions"
|
||||
iconClassNames="follow-icon-dimentions"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onFollow();
|
||||
@@ -111,49 +91,26 @@ const HoverCard = ({
|
||||
</div>
|
||||
)}
|
||||
<div className="hover-button ml-auto">
|
||||
<ActionsDropdown
|
||||
id={id}
|
||||
contentType={contentType}
|
||||
actionHandlers={actionHandlers}
|
||||
dropDownIconSize
|
||||
/>
|
||||
<ActionsDropdown commentOrPost={commentOrPost} actionHandlers={actionHandlers} dropDownIconSize />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
HoverCard.propTypes = {
|
||||
id: PropTypes.string.isRequired,
|
||||
contentType: PropTypes.string.isRequired,
|
||||
commentOrPost: PropTypes.oneOfType([commentShape, postShape]).isRequired,
|
||||
actionHandlers: PropTypes.objectOf(PropTypes.func).isRequired,
|
||||
handleResponseCommentButton: PropTypes.func.isRequired,
|
||||
addResponseCommentButtonMessage: PropTypes.string.isRequired,
|
||||
onLike: PropTypes.func.isRequired,
|
||||
voted: PropTypes.bool.isRequired,
|
||||
endorseIcons: PropTypes.objectOf(PropTypes.shape(
|
||||
{
|
||||
id: PropTypes.string,
|
||||
action: PropTypes.string,
|
||||
icon: PropTypes.element,
|
||||
label: {
|
||||
id: PropTypes.string,
|
||||
defaultMessage: PropTypes.string,
|
||||
description: PropTypes.string,
|
||||
},
|
||||
conditions: {
|
||||
endorsed: PropTypes.bool,
|
||||
postType: ThreadType,
|
||||
},
|
||||
},
|
||||
)),
|
||||
onFollow: PropTypes.func,
|
||||
following: PropTypes.bool,
|
||||
addResponseCommentButtonMessage: PropTypes.string.isRequired,
|
||||
isClosedPost: PropTypes.bool.isRequired,
|
||||
endorseIcons: PropTypes.objectOf(PropTypes.any),
|
||||
};
|
||||
|
||||
HoverCard.defaultProps = {
|
||||
onFollow: () => null,
|
||||
endorseIcons: null,
|
||||
following: undefined,
|
||||
};
|
||||
|
||||
export default React.memo(HoverCard);
|
||||
export default injectIntl(HoverCard);
|
||||
|
||||
@@ -1,25 +1,23 @@
|
||||
import {
|
||||
render, screen, waitFor, within,
|
||||
render, screen, waitFor,
|
||||
within,
|
||||
} from '@testing-library/react';
|
||||
import MockAdapter from 'axios-mock-adapter';
|
||||
import { IntlProvider } from 'react-intl';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { MemoryRouter, Route } from 'react-router';
|
||||
import { Factory } from 'rosie';
|
||||
|
||||
import { initializeMockApp } from '@edx/frontend-platform';
|
||||
import { camelCaseObject, initializeMockApp } from '@edx/frontend-platform';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import { AppProvider } from '@edx/frontend-platform/react';
|
||||
|
||||
import { initializeStore } from '../../store';
|
||||
import executeThunk from '../../test-utils';
|
||||
import { getCourseConfigApiUrl } from '../data/api';
|
||||
import fetchCourseConfig from '../data/thunks';
|
||||
import { executeThunk } from '../../test-utils';
|
||||
import DiscussionContent from '../discussions-home/DiscussionContent';
|
||||
import { getCommentsApiUrl } from '../post-comments/data/api';
|
||||
import { fetchCommentResponses } from '../post-comments/data/thunks';
|
||||
import { getThreadsApiUrl } from '../posts/data/api';
|
||||
import { fetchThreads } from '../posts/data/thunks';
|
||||
import DiscussionContext from './context';
|
||||
import { DiscussionContext } from './context';
|
||||
|
||||
import '../posts/data/__factories__';
|
||||
import '../post-comments/data/__factories__';
|
||||
@@ -27,45 +25,73 @@ import '../post-comments/data/__factories__';
|
||||
const commentsApiUrl = getCommentsApiUrl();
|
||||
const threadsApiUrl = getThreadsApiUrl();
|
||||
const discussionPostId = 'thread-1';
|
||||
const questionPostId = 'thread-2';
|
||||
const courseId = 'course-v1:edX+TestX+Test_Course';
|
||||
const reverseOrder = false;
|
||||
let store;
|
||||
let axiosMock;
|
||||
let container;
|
||||
|
||||
async function mockAxiosReturnPagedCommentsResponses() {
|
||||
function mockAxiosReturnPagedComments() {
|
||||
[null, false, true].forEach(endorsed => {
|
||||
const postId = endorsed === null ? discussionPostId : questionPostId;
|
||||
[1, 2].forEach(page => {
|
||||
axiosMock
|
||||
.onGet(commentsApiUrl, {
|
||||
params: {
|
||||
thread_id: postId,
|
||||
page,
|
||||
page_size: undefined,
|
||||
requested_fields: 'profile_image',
|
||||
endorsed,
|
||||
reverse_order: reverseOrder,
|
||||
},
|
||||
})
|
||||
.reply(200, Factory.build('commentsResult', { can_delete: true }, {
|
||||
threadId: postId,
|
||||
page,
|
||||
pageSize: 1,
|
||||
count: 2,
|
||||
endorsed,
|
||||
childCount: page === 1 ? 2 : 0,
|
||||
}));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function mockAxiosReturnPagedCommentsResponses() {
|
||||
const parentId = 'comment-1';
|
||||
const commentsResponsesApiUrl = `${commentsApiUrl}${parentId}/`;
|
||||
const paramsTemplate = {
|
||||
page: undefined,
|
||||
page_size: undefined,
|
||||
requested_fields: 'profile_image',
|
||||
reverse_order: true,
|
||||
};
|
||||
|
||||
[1, 2].forEach(async (page) => {
|
||||
axiosMock.onGet(commentsResponsesApiUrl, { params: { ...paramsTemplate, page } }).reply(
|
||||
200,
|
||||
Factory.build('commentsResult', null, {
|
||||
for (let page = 1; page <= 2; page++) {
|
||||
axiosMock
|
||||
.onGet(commentsResponsesApiUrl, { params: { ...paramsTemplate, page } })
|
||||
.reply(200, Factory.build('commentsResult', null, {
|
||||
parentId,
|
||||
page,
|
||||
pageSize: 1,
|
||||
count: 2,
|
||||
}),
|
||||
);
|
||||
|
||||
await executeThunk(fetchCommentResponses(parentId), store.dispatch, store.getState);
|
||||
});
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
function renderComponent(postId) {
|
||||
const wrapper = render(
|
||||
<IntlProvider locale="en">
|
||||
<AppProvider store={store} wrapWithRouter={false}>
|
||||
<AppProvider store={store}>
|
||||
<DiscussionContext.Provider
|
||||
value={{ courseId, postId, page: 'posts' }}
|
||||
value={{ courseId }}
|
||||
>
|
||||
<MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
|
||||
<DiscussionContent />
|
||||
<Route
|
||||
path="*"
|
||||
/>
|
||||
</MemoryRouter>
|
||||
</DiscussionContext.Provider>
|
||||
</AppProvider>
|
||||
@@ -76,66 +102,85 @@ function renderComponent(postId) {
|
||||
}
|
||||
|
||||
describe('HoverCard', () => {
|
||||
beforeEach(async () => {
|
||||
beforeEach(() => {
|
||||
initializeMockApp({
|
||||
authenticatedUser: {
|
||||
userId: 3,
|
||||
username: 'abc123',
|
||||
administrator: true,
|
||||
roles: [],
|
||||
isPostingEnabled: true,
|
||||
},
|
||||
});
|
||||
|
||||
store = initializeStore();
|
||||
Factory.resetAll();
|
||||
axiosMock = new MockAdapter(getAuthenticatedHttpClient());
|
||||
axiosMock.onGet(threadsApiUrl).reply(200, Factory.build('threadsResult'));
|
||||
axiosMock.onGet(`${getCourseConfigApiUrl()}${courseId}/`).reply(200, { isPostingEnabled: true });
|
||||
axiosMock.onGet(commentsApiUrl).reply(200, Factory.build('commentsResult', { can_delete: true }, {
|
||||
threadId: discussionPostId,
|
||||
endorsed: false,
|
||||
pageSize: 1,
|
||||
count: 2,
|
||||
childCount: 2,
|
||||
}));
|
||||
axiosMock.onGet(threadsApiUrl)
|
||||
.reply(200, Factory.build('threadsResult'));
|
||||
axiosMock.onPatch(new RegExp(`${commentsApiUrl}*`)).reply(({
|
||||
url,
|
||||
data,
|
||||
}) => {
|
||||
const commentId = url.match(/comments\/(?<id>[a-z1-9-]+)\//).groups.id;
|
||||
const {
|
||||
rawBody,
|
||||
} = camelCaseObject(JSON.parse(data));
|
||||
return [200, Factory.build('comment', {
|
||||
id: commentId,
|
||||
rendered_body: rawBody,
|
||||
raw_body: rawBody,
|
||||
})];
|
||||
});
|
||||
axiosMock.onPost(commentsApiUrl)
|
||||
.reply(({ data }) => {
|
||||
const {
|
||||
rawBody,
|
||||
threadId,
|
||||
} = camelCaseObject(JSON.parse(data));
|
||||
return [200, Factory.build(
|
||||
'comment',
|
||||
{
|
||||
rendered_body: rawBody,
|
||||
raw_body: rawBody,
|
||||
thread_id: threadId,
|
||||
},
|
||||
)];
|
||||
});
|
||||
|
||||
await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
|
||||
await executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
|
||||
await mockAxiosReturnPagedCommentsResponses();
|
||||
executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
|
||||
mockAxiosReturnPagedComments();
|
||||
mockAxiosReturnPagedCommentsResponses();
|
||||
});
|
||||
|
||||
test('it should have hover card on post', async () => {
|
||||
renderComponent(discussionPostId);
|
||||
const post = await screen.findByTestId('post-thread-1');
|
||||
const post = screen.getByTestId('post-thread-1');
|
||||
expect(within(post).getByTestId('hover-card-thread-1')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('it should have hover card on comment', async () => {
|
||||
await waitFor(() => renderComponent(discussionPostId));
|
||||
renderComponent(discussionPostId);
|
||||
const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
|
||||
expect(within(comment).getByTestId('hover-card-comment-1')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('it should show add response, like, follow and actions menu for hovered post', async () => {
|
||||
await waitFor(() => renderComponent(discussionPostId));
|
||||
renderComponent(discussionPostId);
|
||||
const post = screen.getByTestId('post-thread-1');
|
||||
const hoverCard = within(post).getByTestId('hover-card-thread-1');
|
||||
|
||||
expect(within(hoverCard).queryByRole('button', { name: /Add response/i })).toBeInTheDocument();
|
||||
expect(within(hoverCard).getByRole('button', { name: /like/i })).toBeInTheDocument();
|
||||
expect(within(hoverCard).queryByRole('button', { name: /follow/i })).toBeInTheDocument();
|
||||
expect(within(hoverCard).queryByRole('button', { name: /actions menu/i })).toBeInTheDocument();
|
||||
const view = within(post).getByTestId('hover-card-thread-1');
|
||||
expect(within(view).queryByRole('button', { name: /Add response/i })).toBeInTheDocument();
|
||||
expect(within(view).getByRole('button', { name: /like/i })).toBeInTheDocument();
|
||||
expect(within(view).queryByRole('button', { name: /follow/i })).toBeInTheDocument();
|
||||
expect(within(view).queryByRole('button', { name: /actions menu/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('it should show add comment, Endorse, like and actions menu Buttons for hovered comment', async () => {
|
||||
await waitFor(() => renderComponent(discussionPostId));
|
||||
const comment = await waitFor(() => screen.findByTestId('comment-comment-1'));
|
||||
const hoverCard = within(comment).getByTestId('hover-card-comment-1');
|
||||
|
||||
expect(within(hoverCard).queryByRole('button', { name: /Add comment/i })).toBeInTheDocument();
|
||||
expect(within(hoverCard).getByRole('button', { name: /Endorse/i })).toBeInTheDocument();
|
||||
expect(within(hoverCard).queryByRole('button', { name: /like/i })).toBeInTheDocument();
|
||||
expect(within(hoverCard).queryByRole('button', { name: /actions menu/i })).toBeInTheDocument();
|
||||
renderComponent(questionPostId);
|
||||
const comment = await waitFor(() => screen.findByTestId('comment-comment-3'));
|
||||
const view = within(comment).getByTestId('hover-card-comment-3');
|
||||
expect(within(view).queryByRole('button', { name: /Add comment/i })).toBeInTheDocument();
|
||||
expect(within(view).getByRole('button', { name: /Endorse/i })).toBeInTheDocument();
|
||||
expect(within(view).queryByRole('button', { name: /like/i })).toBeInTheDocument();
|
||||
expect(within(view).queryByRole('button', { name: /actions menu/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import React from 'react';
|
||||
|
||||
const DiscussionContext = React.createContext({
|
||||
export const DiscussionContext = React.createContext({
|
||||
page: null,
|
||||
courseId: null,
|
||||
postId: null,
|
||||
@@ -9,5 +10,3 @@ const DiscussionContext = React.createContext({
|
||||
category: null,
|
||||
learnerUsername: null,
|
||||
});
|
||||
|
||||
export default DiscussionContext;
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import propTypes from 'prop-types';
|
||||
|
||||
import { Button } from '@openedx/paragon';
|
||||
import classNames from 'classnames';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import ContentUnavailableIcon from '../../assets/ContentUnavailable';
|
||||
import selectCourseTabs from '../../components/NavigationBar/data/selectors';
|
||||
import { useIsOnTablet, useIsOnXLDesktop } from '../data/hooks';
|
||||
import messages from '../messages';
|
||||
|
||||
const ContentUnavailable = ({ subTitleMessage }) => {
|
||||
const intl = useIntl();
|
||||
const isOnTabletorDesktop = useIsOnTablet();
|
||||
const isOnXLDesktop = useIsOnXLDesktop();
|
||||
const { courseId } = useSelector(selectCourseTabs);
|
||||
|
||||
const redirectToDashboard = useCallback(() => {
|
||||
window.location.replace(`${getConfig().LMS_BASE_URL}/courses/${courseId}/about`);
|
||||
}, [courseId]);
|
||||
|
||||
return (
|
||||
<div className="min-content-height justify-content-center align-items-center d-flex w-100 flex-column bg-white">
|
||||
<div className={classNames('d-flex flex-column align-items-center', {
|
||||
'content-unavailable-desktop': isOnTabletorDesktop || isOnXLDesktop,
|
||||
'py-0 px-3': !isOnTabletorDesktop && !isOnXLDesktop,
|
||||
})}
|
||||
>
|
||||
<ContentUnavailableIcon />
|
||||
<h3 className="pt-3 font-weight-bold text-primary-500 text-center">
|
||||
{intl.formatMessage(messages.contentUnavailableTitle)}
|
||||
</h3>
|
||||
<p className="pb-2 text-gray-500 text-center">{intl.formatMessage(subTitleMessage)}</p>
|
||||
<Button onClick={redirectToDashboard} variant="outline-dark" className="py-2 px-2.5">
|
||||
{intl.formatMessage(messages.contentUnavailableAction)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ContentUnavailable.propTypes = {
|
||||
subTitleMessage: propTypes.shape({
|
||||
id: propTypes.string,
|
||||
defaultMessage: propTypes.string,
|
||||
description: propTypes.string,
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
export default React.memo(ContentUnavailable);
|
||||
@@ -1,3 +1,5 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
|
||||
import { ensureConfig, getConfig } from '@edx/frontend-platform';
|
||||
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
|
||||
@@ -5,16 +7,15 @@ ensureConfig([
|
||||
'LMS_BASE_URL',
|
||||
], 'Posts API service');
|
||||
|
||||
export const getCourseConfigApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v2/courses/`;
|
||||
export const getCourseSettingsApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/`;
|
||||
export const getDiscussionsConfigUrl = (courseId) => `${getCourseConfigApiUrl()}${courseId}/`;
|
||||
export const getDiscussionsSettingsUrl = (courseId) => `${getCourseSettingsApiUrl()}${courseId}/settings`;
|
||||
export const getCourseConfigApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/`;
|
||||
|
||||
/**
|
||||
* Get discussions course config
|
||||
* @param {string} courseId
|
||||
*/
|
||||
export async function getDiscussionsConfig(courseId) {
|
||||
const { data } = await getAuthenticatedHttpClient().get(getDiscussionsConfigUrl(courseId));
|
||||
const url = `${getCourseConfigApiUrl()}${courseId}/`;
|
||||
const { data } = await getAuthenticatedHttpClient().get(url);
|
||||
return data;
|
||||
}
|
||||
|
||||
@@ -23,7 +24,7 @@ export async function getDiscussionsConfig(courseId) {
|
||||
* @param {string} courseId
|
||||
*/
|
||||
export async function getDiscussionsSettings(courseId) {
|
||||
const url = `${getDiscussionsSettingsUrl(courseId)}`;
|
||||
const url = `${getCourseConfigApiUrl()}${courseId}/settings`;
|
||||
const { data } = await getAuthenticatedHttpClient().get(url);
|
||||
return data;
|
||||
}
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
import { selectCommentOrResponseById } from '../post-comments/data/selectors';
|
||||
import { selectThread } from '../posts/data/selectors';
|
||||
|
||||
export const ContentSelectors = {
|
||||
POST: selectThread,
|
||||
COMMENT: selectCommentOrResponseById,
|
||||
};
|
||||
|
||||
export const ContentTypes = {
|
||||
POST: 'POST',
|
||||
COMMENT: 'COMMENT',
|
||||
};
|
||||
@@ -1,73 +1,70 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import {
|
||||
useCallback,
|
||||
useContext, useEffect, useMemo, useRef, useState,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
|
||||
import { breakpoints, useWindowSize } from '@openedx/paragon';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import {
|
||||
matchPath, useLocation, useMatch, useNavigate,
|
||||
} from 'react-router-dom';
|
||||
import { useHistory, useLocation, useRouteMatch } from 'react-router';
|
||||
|
||||
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
|
||||
import { useIntl } from '@edx/frontend-platform/i18n';
|
||||
import { AppContext } from '@edx/frontend-platform/react';
|
||||
import { breakpoints, useWindowSize } from '@edx/paragon';
|
||||
|
||||
import selectCourseTabs from '../../components/NavigationBar/data/selectors';
|
||||
import { LOADED } from '../../components/NavigationBar/data/slice';
|
||||
import fetchTab from '../../components/NavigationBar/data/thunks';
|
||||
import { ContentActions, RequestStatus, Routes } from '../../data/constants';
|
||||
import { RequestStatus, Routes } from '../../data/constants';
|
||||
import { selectTopicsUnderCategory } from '../../data/selectors';
|
||||
import fetchCourseBlocks from '../../data/thunks';
|
||||
import DiscussionContext from '../common/context';
|
||||
import PostCommentsContext from '../post-comments/postCommentsContext';
|
||||
import { fetchCourseBlocks } from '../../data/thunks';
|
||||
import { DiscussionContext } from '../common/context';
|
||||
import { clearRedirect } from '../posts/data';
|
||||
import { threadsLoadingStatus } from '../posts/data/selectors';
|
||||
import { selectTopics } from '../topics/data/selectors';
|
||||
import tourCheckpoints from '../tours/constants';
|
||||
import selectTours from '../tours/data/selectors';
|
||||
import { selectTours } from '../tours/data/selectors';
|
||||
import { updateTourShowStatus } from '../tours/data/thunks';
|
||||
import messages from '../tours/messages';
|
||||
import { checkPermissions, discussionsPath } from '../utils';
|
||||
import { ContentSelectors } from './constants';
|
||||
import { discussionsPath, inBlackoutDateRange } from '../utils';
|
||||
import {
|
||||
selectAreThreadsFiltered,
|
||||
selectBlackoutDate,
|
||||
selectEnableInContext,
|
||||
selectIsPostingEnabled,
|
||||
selectIsUserLearner,
|
||||
selectIsCourseAdmin,
|
||||
selectIsCourseStaff,
|
||||
selectLearnersTabEnabled,
|
||||
selectModerationSettings,
|
||||
selectPostThreadCount,
|
||||
selectUserHasModerationPrivileges,
|
||||
selectUserIsGroupTa,
|
||||
selectUserIsStaff,
|
||||
} from './selectors';
|
||||
import fetchCourseConfig from './thunks';
|
||||
import { fetchCourseConfig } from './thunks';
|
||||
|
||||
export function useTotalTopicThreadCount() {
|
||||
const topics = useSelector(selectTopics);
|
||||
const count = useMemo(
|
||||
() => (
|
||||
Object.keys(topics)?.reduce((total, topicId) => {
|
||||
const topic = topics[topicId];
|
||||
return total + topic.threadCounts.discussion + topic.threadCounts.question;
|
||||
}, 0)),
|
||||
[],
|
||||
);
|
||||
|
||||
return count;
|
||||
if (!topics) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return Object.keys(topics)
|
||||
.reduce((total, topicId) => {
|
||||
const topic = topics[topicId];
|
||||
return total + topic.threadCounts.discussion + topic.threadCounts.question;
|
||||
}, 0);
|
||||
}
|
||||
|
||||
export const useSidebarVisible = () => {
|
||||
const location = useLocation();
|
||||
const enableInContext = useSelector(selectEnableInContext);
|
||||
const isViewingTopics = useMatch(Routes.TOPICS.ALL);
|
||||
const isViewingLearners = useMatch(`${Routes.LEARNERS.PATH}/*`);
|
||||
const isViewingTopics = useRouteMatch(Routes.TOPICS.ALL);
|
||||
const isViewingLearners = useRouteMatch(Routes.LEARNERS.PATH);
|
||||
const isFiltered = useSelector(selectAreThreadsFiltered);
|
||||
const totalThreads = useSelector(selectPostThreadCount);
|
||||
const isThreadsEmpty = Boolean(useSelector(threadsLoadingStatus()) === RequestStatus.SUCCESSFUL && !totalThreads);
|
||||
const matchInContextTopicView = Routes.TOPICS.PATH.find((route) => matchPath({ path: `${route}/*` }, location.pathname));
|
||||
const isInContextTopicsView = Boolean(matchInContextTopicView && enableInContext);
|
||||
const hideSidebar = Boolean(isThreadsEmpty && !isFiltered && !(isViewingTopics || isViewingLearners));
|
||||
const isIncontextTopicsView = Boolean(useRouteMatch(Routes.TOPICS.PATH) && enableInContext);
|
||||
const hideSidebar = Boolean(isThreadsEmpty && !isFiltered && !(isViewingTopics?.isExact || isViewingLearners));
|
||||
|
||||
if (isInContextTopicsView) {
|
||||
if (isIncontextTopicsView) {
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -76,44 +73,27 @@ export const useSidebarVisible = () => {
|
||||
|
||||
export function useCourseDiscussionData(courseId) {
|
||||
const dispatch = useDispatch();
|
||||
const { authenticatedUser } = useContext(AppContext);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchBaseData() {
|
||||
await dispatch(fetchCourseConfig(courseId));
|
||||
await dispatch(fetchTab(courseId));
|
||||
await dispatch(fetchCourseBlocks(courseId, authenticatedUser.username));
|
||||
}
|
||||
|
||||
fetchBaseData();
|
||||
}, [courseId]);
|
||||
}
|
||||
|
||||
export function useCourseBlockData(courseId) {
|
||||
const dispatch = useDispatch();
|
||||
const { authenticatedUser } = useContext(AppContext);
|
||||
const { isEnrolled, courseStatus } = useSelector(selectCourseTabs);
|
||||
const isUserLearner = useSelector(selectIsUserLearner);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchBaseData() {
|
||||
if (courseStatus === LOADED && (!isUserLearner || isEnrolled)) {
|
||||
await dispatch(fetchCourseBlocks(courseId, authenticatedUser.username));
|
||||
}
|
||||
}
|
||||
|
||||
fetchBaseData();
|
||||
}, [courseId, isEnrolled, courseStatus, isUserLearner]);
|
||||
}
|
||||
|
||||
export function useRedirectToThread(courseId, enableInContextSidebar) {
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const redirectToThread = useSelector(
|
||||
(state) => state.threads.redirectToThread,
|
||||
);
|
||||
const history = useHistory();
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
return useEffect(() => {
|
||||
// After posting a new thread we'd like to redirect users to it, the topic and post id are temporarily
|
||||
// stored in redirectToThread
|
||||
if (redirectToThread) {
|
||||
@@ -123,24 +103,19 @@ export function useRedirectToThread(courseId, enableInContextSidebar) {
|
||||
postId: redirectToThread.threadId,
|
||||
topicId: redirectToThread.topicId,
|
||||
})(location);
|
||||
navigate({ ...newLocation });
|
||||
history.push(newLocation);
|
||||
}
|
||||
}, [redirectToThread]);
|
||||
}
|
||||
|
||||
export function useIsOnDesktop() {
|
||||
const windowSize = useWindowSize();
|
||||
return windowSize.width >= breakpoints.medium.maxWidth;
|
||||
}
|
||||
|
||||
export function useIsOnTablet() {
|
||||
const windowSize = useWindowSize();
|
||||
return windowSize.width >= breakpoints.small.maxWidth;
|
||||
return windowSize.width >= breakpoints.medium.minWidth;
|
||||
}
|
||||
|
||||
export function useIsOnXLDesktop() {
|
||||
const windowSize = useWindowSize();
|
||||
return windowSize.width >= breakpoints.extraLarge.maxWidth;
|
||||
return windowSize.width >= breakpoints.extraLarge.minWidth;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -153,11 +128,9 @@ export function useContainerSize(refContainer) {
|
||||
|
||||
const resizeObserver = useRef(new ResizeObserver(() => {
|
||||
/* istanbul ignore if: ResizeObserver isn't available in the testing env */
|
||||
window.requestAnimationFrame(() => {
|
||||
if (refContainer?.current) {
|
||||
setHeight(refContainer?.current?.clientHeight);
|
||||
}
|
||||
});
|
||||
if (refContainer?.current) {
|
||||
setHeight(refContainer?.current?.clientHeight);
|
||||
}
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
@@ -178,22 +151,22 @@ export function useContainerSize(refContainer) {
|
||||
return height;
|
||||
}
|
||||
|
||||
export const useAlertBannerVisible = (
|
||||
{
|
||||
author, abuseFlagged, lastEdit, closed,
|
||||
} = {},
|
||||
) => {
|
||||
export const useAlertBannerVisible = (content) => {
|
||||
const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
|
||||
const userIsGroupTa = useSelector(selectUserIsGroupTa);
|
||||
const userIsContentAuthor = getAuthenticatedUser().username === author;
|
||||
const { reasonCodesEnabled } = useSelector(selectModerationSettings);
|
||||
const userIsContentAuthor = getAuthenticatedUser().username === content.author;
|
||||
const canSeeLastEditOrClosedAlert = (userHasModerationPrivileges || userIsContentAuthor || userIsGroupTa);
|
||||
const canSeeReportedBanner = abuseFlagged;
|
||||
const canSeeReportedBanner = content.abuseFlagged;
|
||||
|
||||
return (
|
||||
(canSeeLastEditOrClosedAlert && (lastEdit?.reason || closed)) || (canSeeReportedBanner)
|
||||
(reasonCodesEnabled && canSeeLastEditOrClosedAlert && (content.lastEdit?.reason || content.closed))
|
||||
|| (content.abuseFlagged && canSeeReportedBanner)
|
||||
);
|
||||
};
|
||||
|
||||
export const useShowLearnersTab = () => useSelector(selectLearnersTabEnabled);
|
||||
|
||||
/**
|
||||
* React hook that gets the current topic ID from the current topic or category.
|
||||
* The topicId in the DiscussionContext only return the direct topicId from the URL.
|
||||
@@ -215,49 +188,41 @@ export const useCurrentDiscussionTopic = () => {
|
||||
return null;
|
||||
};
|
||||
|
||||
export const useUserPostingEnabled = () => {
|
||||
const isPostingEnabled = useSelector(selectIsPostingEnabled);
|
||||
const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
|
||||
export const useUserCanAddThreadInBlackoutDate = () => {
|
||||
const blackoutDateRange = useSelector(selectBlackoutDate);
|
||||
const isUserAdmin = useSelector(selectUserIsStaff);
|
||||
const userHasModerationPrivilages = useSelector(selectUserHasModerationPrivileges);
|
||||
const isUserGroupTA = useSelector(selectUserIsGroupTa);
|
||||
const isPrivileged = userHasModerationPrivileges || isUserGroupTA;
|
||||
const isCourseAdmin = useSelector(selectIsCourseAdmin);
|
||||
const isCourseStaff = useSelector(selectIsCourseStaff);
|
||||
const isInBlackoutDateRange = inBlackoutDateRange(blackoutDateRange);
|
||||
|
||||
return (isPostingEnabled || isPrivileged);
|
||||
return (!(isInBlackoutDateRange)
|
||||
|| (isUserAdmin || userHasModerationPrivilages || isUserGroupTA || isCourseAdmin || isCourseStaff));
|
||||
};
|
||||
|
||||
function camelToConstant(string) {
|
||||
return string.replace(/[A-Z]/g, (match) => `_${match}`).toUpperCase();
|
||||
}
|
||||
|
||||
export const useTourConfiguration = () => {
|
||||
const intl = useIntl();
|
||||
export const useTourConfiguration = (intl) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const { enableInContextSidebar } = useContext(DiscussionContext);
|
||||
const tours = useSelector(selectTours);
|
||||
|
||||
const handleOnDismiss = useCallback((id) => (
|
||||
dispatch(updateTourShowStatus(id))
|
||||
), []);
|
||||
|
||||
const handleOnEnd = useCallback((id) => (
|
||||
dispatch(updateTourShowStatus(id))
|
||||
), []);
|
||||
|
||||
const toursConfig = useMemo(() => (
|
||||
tours?.map((tour) => Object.keys(tourCheckpoints(intl)).includes(tour.tourName) && (
|
||||
{
|
||||
tourId: tour.tourName,
|
||||
advanceButtonText: intl.formatMessage(messages.advanceButtonText),
|
||||
dismissButtonText: intl.formatMessage(messages.dismissButtonText),
|
||||
endButtonText: intl.formatMessage(messages.endButtonText),
|
||||
enabled: tour && Boolean(tour.enabled && tour.showTour && !enableInContextSidebar),
|
||||
onDismiss: () => handleOnDismiss(tour.id),
|
||||
onEnd: () => handleOnEnd(tour.id),
|
||||
checkpoints: tourCheckpoints(intl)[camelToConstant(tour.tourName)],
|
||||
}
|
||||
))
|
||||
), [tours, enableInContextSidebar]);
|
||||
|
||||
return toursConfig;
|
||||
return tours.map((tour) => (
|
||||
{
|
||||
tourId: tour.tourName,
|
||||
advanceButtonText: intl.formatMessage(messages.advanceButtonText),
|
||||
dismissButtonText: intl.formatMessage(messages.dismissButtonText),
|
||||
endButtonText: intl.formatMessage(messages.endButtonText),
|
||||
enabled: tour && Boolean(tour.showTour && !enableInContextSidebar),
|
||||
onDismiss: () => dispatch(updateTourShowStatus(tour.id)),
|
||||
onEnd: () => dispatch(updateTourShowStatus(tour.id)),
|
||||
checkpoints: tourCheckpoints(intl)[camelToConstant(tour.tourName)],
|
||||
}
|
||||
));
|
||||
};
|
||||
|
||||
export const useDebounce = (value, delay) => {
|
||||
@@ -280,10 +245,3 @@ export const useDebounce = (value, delay) => {
|
||||
);
|
||||
return debouncedValue;
|
||||
};
|
||||
|
||||
export const useHasLikePermission = (contentType, id) => {
|
||||
const { postType } = useContext(PostCommentsContext);
|
||||
const content = { ...useSelector(ContentSelectors[contentType](id)), postType };
|
||||
|
||||
return checkPermissions(content, ContentActions.VOTE);
|
||||
};
|
||||
|
||||
@@ -8,36 +8,36 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
||||
import { AppProvider } from '@edx/frontend-platform/react';
|
||||
|
||||
import { initializeStore } from '../../store';
|
||||
import executeThunk from '../../test-utils';
|
||||
import DiscussionContext from '../common/context';
|
||||
import { executeThunk } from '../../test-utils';
|
||||
import { DiscussionContext } from '../common/context';
|
||||
import { getCourseConfigApiUrl } from './api';
|
||||
import { useCurrentDiscussionTopic, useUserPostingEnabled } from './hooks';
|
||||
import fetchCourseConfig from './thunks';
|
||||
import { useCurrentDiscussionTopic, useUserCanAddThreadInBlackoutDate } from './hooks';
|
||||
import { fetchCourseConfig } from './thunks';
|
||||
|
||||
const courseId = 'course-v1:edX+TestX+Test_Course';
|
||||
const courseConfigApiUrl = getCourseConfigApiUrl();
|
||||
let store;
|
||||
let axiosMock;
|
||||
|
||||
const generateApiResponse = (isPostingEnabled, hasModerationPrivileges = false) => ({
|
||||
isPostingEnabled,
|
||||
hasModerationPrivileges,
|
||||
const generateApiResponse = (blackouts = [], isCourseAdmin = false) => ({
|
||||
blackouts,
|
||||
hasModerationPrivileges: false,
|
||||
isGroupTa: false,
|
||||
isCourseAdmin: false,
|
||||
isCourseAdmin,
|
||||
isCourseStaff: false,
|
||||
isUserAdmin: false,
|
||||
});
|
||||
|
||||
describe('Hooks', () => {
|
||||
describe('useCurrentDiscussionTopic', () => {
|
||||
const ComponentWithHook = () => {
|
||||
function ComponentWithHook() {
|
||||
const topic = useCurrentDiscussionTopic();
|
||||
return (
|
||||
<div>
|
||||
{String(topic)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
function renderComponent({ topicId, category }) {
|
||||
return render(
|
||||
@@ -102,15 +102,15 @@ describe('Hooks', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('useUserPostingEnabled', () => {
|
||||
const ComponentWithHook = () => {
|
||||
const isUserPrivilegedInPostingRestriction = useUserPostingEnabled();
|
||||
describe('useUserCanAddThreadInBlackoutDate', () => {
|
||||
function ComponentWithHook() {
|
||||
const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
|
||||
return (
|
||||
<div>
|
||||
{String(isUserPrivilegedInPostingRestriction)}
|
||||
{String(userCanAddThreadInBlackoutDate)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
function renderComponent() {
|
||||
return render(
|
||||
@@ -121,7 +121,7 @@ describe('Hooks', () => {
|
||||
</IntlProvider>,
|
||||
);
|
||||
}
|
||||
describe('User can add Thread in Posting Restrictions ', () => {
|
||||
describe('User can add Thread in blackoutdates ', () => {
|
||||
beforeEach(() => {
|
||||
initializeMockApp({
|
||||
authenticatedUser: {
|
||||
@@ -136,34 +136,37 @@ describe('Hooks', () => {
|
||||
store = initializeStore();
|
||||
});
|
||||
|
||||
test('when posting is not disabled and Role is Learner return true', async () => {
|
||||
test('when blackoutdates are not active and Role is Learner return true', async () => {
|
||||
axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
|
||||
.reply(200, generateApiResponse(true, false));
|
||||
.reply(200, generateApiResponse([], false));
|
||||
await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
|
||||
const { queryByText } = renderComponent();
|
||||
expect(queryByText('true')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('when posting is not disabled and Role is not Learner return true', async () => {
|
||||
test('when blackoutdates are not active and Role is not Learner return true', async () => {
|
||||
axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
|
||||
.reply(200, generateApiResponse(true, true));
|
||||
.reply(200, generateApiResponse([], true));
|
||||
await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
|
||||
const { queryByText } = renderComponent();
|
||||
expect(queryByText('true')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('when posting is disabled and Role is Learner return false', async () => {
|
||||
test('when blackoutdates are active and Role is Learner return false', async () => {
|
||||
axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
|
||||
.reply(200, generateApiResponse(false, false));
|
||||
.reply(200, generateApiResponse([{
|
||||
start: '2022-11-25T00:00:00Z',
|
||||
end: '2050-11-25T23:59:00Z',
|
||||
}], false));
|
||||
await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
|
||||
const { queryByText } = renderComponent();
|
||||
expect(queryByText('false')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('when posting is disabled and Role is not Learner return true', async () => {
|
||||
test('when blackoutdates are active and Role is not Learner return true', async () => {
|
||||
axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
|
||||
.reply(200, generateApiResponse(false, true));
|
||||
await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
|
||||
.reply(200, generateApiResponse([
|
||||
{ start: '2022-11-25T00:00:00Z', end: '2050-11-25T23:59:00Z' }], true));
|
||||
const { queryByText } = renderComponent();
|
||||
expect(queryByText('true')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
import { createSelector } from '@reduxjs/toolkit';
|
||||
|
||||
import selectCourseTabs from '../../components/NavigationBar/data/selectors';
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import { PostsStatusFilter, ThreadType } from '../../data/constants';
|
||||
import { isCourseStatusValid } from '../utils';
|
||||
|
||||
export const selectAnonymousPostingConfig = state => ({
|
||||
allowAnonymous: state.config.allowAnonymous,
|
||||
@@ -15,12 +12,16 @@ export const selectUserIsStaff = state => state.config.isUserAdmin;
|
||||
|
||||
export const selectUserIsGroupTa = state => state.config.isGroupTa;
|
||||
|
||||
export const selectConfigLoadingStatus = state => state.config.status;
|
||||
export const selectconfigLoadingStatus = state => state.config.status;
|
||||
|
||||
export const selectLearnersTabEnabled = state => state.config.learnersTabEnabled;
|
||||
|
||||
export const selectUserRoles = state => state.config.userRoles;
|
||||
|
||||
export const selectDivisionSettings = state => state.config.settings;
|
||||
|
||||
export const selectBlackoutDate = state => state.config.blackouts;
|
||||
|
||||
export const selectGroupAtSubsection = state => state.config.groupAtSubsection;
|
||||
|
||||
export const selectIsCourseAdmin = state => state.config.isCourseAdmin;
|
||||
@@ -29,11 +30,10 @@ export const selectIsCourseStaff = state => state.config.isCourseStaff;
|
||||
|
||||
export const selectEnableInContext = state => state.config.enableInContext;
|
||||
|
||||
export const selectIsPostingEnabled = state => state.config.isPostingEnabled;
|
||||
|
||||
export const selectModerationSettings = state => ({
|
||||
postCloseReasons: state.config.postCloseReasons,
|
||||
editReasons: state.config.editReasons,
|
||||
reasonCodesEnabled: state.config.reasonCodesEnabled,
|
||||
});
|
||||
|
||||
export const selectDiscussionProvider = state => state.config.provider;
|
||||
@@ -64,29 +64,3 @@ export function selectTopicThreadCount(topicId) {
|
||||
export function selectPostThreadCount(state) {
|
||||
return state.threads.totalThreads;
|
||||
}
|
||||
|
||||
export const selectIsUserLearner = createSelector(
|
||||
selectUserHasModerationPrivileges,
|
||||
selectUserIsGroupTa,
|
||||
selectUserIsStaff,
|
||||
selectIsCourseAdmin,
|
||||
selectIsCourseStaff,
|
||||
selectCourseTabs,
|
||||
(
|
||||
userHasModerationPrivileges,
|
||||
userIsGroupTa,
|
||||
userIsStaff,
|
||||
userIsCourseAdmin,
|
||||
userIsCourseStaff,
|
||||
{ courseStatus },
|
||||
) => (
|
||||
(
|
||||
!userHasModerationPrivileges
|
||||
&& !userIsGroupTa
|
||||
&& !userIsStaff
|
||||
&& !userIsCourseAdmin
|
||||
&& !userIsCourseStaff
|
||||
&& isCourseStatusValid(courseStatus)
|
||||
) || false
|
||||
),
|
||||
);
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable no-param-reassign,import/prefer-default-export */
|
||||
import { createSlice } from '@reduxjs/toolkit';
|
||||
|
||||
import { RequestStatus } from '../../data/constants';
|
||||
@@ -6,6 +7,7 @@ const configSlice = createSlice({
|
||||
name: 'config',
|
||||
initialState: {
|
||||
status: RequestStatus.IN_PROGRESS,
|
||||
blackouts: [],
|
||||
allowAnonymous: false,
|
||||
allowAnonymousToPeers: false,
|
||||
userRoles: [],
|
||||
@@ -15,41 +17,32 @@ const configSlice = createSlice({
|
||||
isCourseAdmin: false,
|
||||
isCourseStaff: false,
|
||||
isUserAdmin: false,
|
||||
isPostingEnabled: false,
|
||||
learnersTabEnabled: false,
|
||||
settings: {
|
||||
divisionScheme: 'none',
|
||||
alwaysDivideInlineDiscussions: false,
|
||||
dividedInlineDiscussions: [],
|
||||
dividedCourseWideDiscussions: [],
|
||||
},
|
||||
reasonCodesEnabled: false,
|
||||
editReasons: [],
|
||||
postCloseReasons: [],
|
||||
enableInContext: false,
|
||||
},
|
||||
reducers: {
|
||||
fetchConfigRequest: (state) => (
|
||||
{
|
||||
...state,
|
||||
status: RequestStatus.IN_PROGRESS,
|
||||
}
|
||||
),
|
||||
fetchConfigSuccess: (state, { payload }) => {
|
||||
const newState = Object.assign(state, payload);
|
||||
newState.status = RequestStatus.SUCCESSFUL;
|
||||
return newState;
|
||||
fetchConfigRequest: (state) => {
|
||||
state.status = RequestStatus.IN_PROGRESS;
|
||||
},
|
||||
fetchConfigSuccess: (state, { payload }) => {
|
||||
state.status = RequestStatus.SUCCESSFUL;
|
||||
Object.assign(state, payload);
|
||||
},
|
||||
fetchConfigFailed: (state) => {
|
||||
state.status = RequestStatus.FAILED;
|
||||
},
|
||||
fetchConfigDenied: (state) => {
|
||||
state.status = RequestStatus.DENIED;
|
||||
},
|
||||
fetchConfigFailed: (state) => (
|
||||
{
|
||||
...state,
|
||||
status: RequestStatus.FAILED,
|
||||
}
|
||||
),
|
||||
fetchConfigDenied: (state) => (
|
||||
{
|
||||
...state,
|
||||
status: RequestStatus.DENIED,
|
||||
}
|
||||
),
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import { camelCaseObject } from '@edx/frontend-platform';
|
||||
import { logError } from '@edx/frontend-platform/logging';
|
||||
|
||||
@@ -18,7 +19,7 @@ import {
|
||||
* @param {string} courseId The course ID for the course to fetch config for.
|
||||
* @returns {(function(*): Promise<void>)|*}
|
||||
*/
|
||||
export default function fetchCourseConfig(courseId) {
|
||||
export function fetchCourseConfig(courseId) {
|
||||
return async (dispatch) => {
|
||||
try {
|
||||
let learnerSort = LearnersOrdering.BY_LAST_ACTIVITY;
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
import { PageBanner } from '@edx/paragon';
|
||||
|
||||
import { selectBlackoutDate } from '../data/selectors';
|
||||
import messages from '../messages';
|
||||
import { inBlackoutDateRange } from '../utils';
|
||||
|
||||
function BlackoutInformationBanner({
|
||||
intl,
|
||||
}) {
|
||||
const isDiscussionsBlackout = inBlackoutDateRange(useSelector(selectBlackoutDate));
|
||||
const [showBanner, setShowBanner] = useState(true);
|
||||
|
||||
return (
|
||||
<PageBanner
|
||||
variant="accentB"
|
||||
show={isDiscussionsBlackout && showBanner}
|
||||
dismissible
|
||||
onDismiss={() => setShowBanner(false)}
|
||||
>
|
||||
<div className="font-weight-500">
|
||||
{intl.formatMessage(messages.blackoutDiscussionInformation)}
|
||||
</div>
|
||||
</PageBanner>
|
||||
);
|
||||
}
|
||||
|
||||
BlackoutInformationBanner.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(BlackoutInformationBanner);
|
||||
@@ -5,10 +5,10 @@ import { initializeMockApp } from '@edx/frontend-platform';
|
||||
import { AppProvider } from '@edx/frontend-platform/react';
|
||||
|
||||
import { initializeStore } from '../../store';
|
||||
import DiscussionContext from '../common/context';
|
||||
import { DiscussionContext } from '../common/context';
|
||||
import { fetchConfigSuccess } from '../data/slices';
|
||||
import messages from '../messages';
|
||||
import DiscussionsRestrictionBanner from './DiscussionsRestrictionBanner';
|
||||
import BlackoutInformationBanner from './BlackoutInformationBanner';
|
||||
|
||||
let store;
|
||||
let container;
|
||||
@@ -20,13 +20,13 @@ activeEndDate.setDate(activeEndDate.getDate() + 2);
|
||||
activeStartDate = activeStartDate.toISOString();
|
||||
activeEndDate = activeEndDate.toISOString();
|
||||
|
||||
const getConfigData = (isPostingEnabled) => ({
|
||||
const getConfigData = (blackouts = []) => ({
|
||||
id: 'course-v1:edX+DemoX+Demo_Course',
|
||||
userRoles: ['Admin', 'Student'],
|
||||
hasModerationPrivileges: false,
|
||||
isGroupTa: false,
|
||||
isUserAdmin: false,
|
||||
isPostingEnabled,
|
||||
blackouts,
|
||||
});
|
||||
|
||||
function renderComponent() {
|
||||
@@ -34,7 +34,7 @@ function renderComponent() {
|
||||
<IntlProvider locale="en">
|
||||
<AppProvider store={store}>
|
||||
<DiscussionContext.Provider value={{ courseId }}>
|
||||
<DiscussionsRestrictionBanner />
|
||||
<BlackoutInformationBanner />
|
||||
</DiscussionContext.Provider>
|
||||
</AppProvider>
|
||||
</IntlProvider>,
|
||||
@@ -43,7 +43,7 @@ function renderComponent() {
|
||||
return container;
|
||||
}
|
||||
|
||||
describe('Discussions Restriction Banner', () => {
|
||||
describe('Blackout Information Banner', () => {
|
||||
beforeEach(async () => {
|
||||
initializeMockApp({
|
||||
authenticatedUser: {
|
||||
@@ -56,11 +56,13 @@ describe('Discussions Restriction Banner', () => {
|
||||
});
|
||||
|
||||
test.each([
|
||||
{ isPostingEnabled: false, visibility: true },
|
||||
{ isPostingEnabled: true, visibility: false },
|
||||
])('Test Discussions Restriction is visible on app load if posting is disabled', async ({ isPostingEnabled, visibility }) => {
|
||||
{ blackouts: [], visibility: false },
|
||||
{ blackouts: ['2021-12-31T10:15', '2021-12-31T10:20'], visibility: false },
|
||||
{ blackouts: [{ start: activeStartDate, end: activeEndDate }], visibility: true },
|
||||
{ blackouts: [{ start: activeEndDate, end: activeEndDate }], visibility: false },
|
||||
])('Test Blackout Banner is visible on app load if blackout date is active', async ({ blackouts, visibility }) => {
|
||||
store = initializeStore();
|
||||
await store.dispatch(fetchConfigSuccess(getConfigData(isPostingEnabled)));
|
||||
await store.dispatch(fetchConfigSuccess(getConfigData(blackouts)));
|
||||
renderComponent();
|
||||
if (visibility) {
|
||||
const element = await screen.findByRole('alert');
|
||||
@@ -1,39 +1,37 @@
|
||||
import React, { lazy, Suspense } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import { useSelector } from 'react-redux';
|
||||
import { Route, Routes } from 'react-router-dom';
|
||||
import { Route, Switch } from 'react-router';
|
||||
|
||||
import Spinner from '../../components/Spinner';
|
||||
import { Routes as ROUTES } from '../../data/constants';
|
||||
import { injectIntl } from '@edx/frontend-platform/i18n';
|
||||
|
||||
const PostEditor = lazy(() => import('../posts/post-editor/PostEditor'));
|
||||
const PostCommentsView = lazy(() => import('../post-comments/PostCommentsView'));
|
||||
import { Routes } from '../../data/constants';
|
||||
import { PostCommentsView } from '../post-comments';
|
||||
import { PostEditor } from '../posts';
|
||||
|
||||
const DiscussionContent = () => {
|
||||
function DiscussionContent() {
|
||||
const postEditorVisible = useSelector((state) => state.threads.postEditorVisible);
|
||||
|
||||
return (
|
||||
<div className="d-flex bg-light-400 flex-column w-75 w-xs-100 w-xl-75 align-items-center overflow-auto">
|
||||
<div className="d-flex bg-light-400 flex-column w-75 w-xs-100 w-xl-75 align-items-center">
|
||||
<div className="d-flex flex-column w-100">
|
||||
<Suspense fallback={(<Spinner />)}>
|
||||
<Routes>
|
||||
{postEditorVisible ? (
|
||||
<Route path={ROUTES.POSTS.NEW_POST} element={<PostEditor />} />
|
||||
) : (
|
||||
<>
|
||||
{ROUTES.POSTS.EDIT_POST.map(route => (
|
||||
<Route key={route} path={route} element={<PostEditor editExisting />} />
|
||||
))}
|
||||
{ROUTES.COMMENTS.PATH.map(route => (
|
||||
<Route key={route} path={route} element={<PostCommentsView />} />
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</Routes>
|
||||
</Suspense>
|
||||
{postEditorVisible ? (
|
||||
<Route path={Routes.POSTS.NEW_POST}>
|
||||
<PostEditor />
|
||||
</Route>
|
||||
) : (
|
||||
<Switch>
|
||||
<Route path={Routes.POSTS.EDIT_POST}>
|
||||
<PostEditor editExisting />
|
||||
</Route>
|
||||
<Route path={Routes.COMMENTS.PATH}>
|
||||
<PostCommentsView />
|
||||
</Route>
|
||||
</Switch>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default DiscussionContent;
|
||||
export default injectIntl(DiscussionContent);
|
||||
|
||||
@@ -1,37 +1,33 @@
|
||||
import React, {
|
||||
lazy, Suspense, useContext, useEffect, useRef,
|
||||
} from 'react';
|
||||
import React, { useContext, useEffect, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { useWindowSize } from '@openedx/paragon';
|
||||
import classNames from 'classnames';
|
||||
import { useSelector } from 'react-redux';
|
||||
import {
|
||||
Navigate, Route, Routes,
|
||||
} from 'react-router-dom';
|
||||
Redirect, Route, Switch, useLocation,
|
||||
} from 'react-router';
|
||||
|
||||
import Spinner from '../../components/Spinner';
|
||||
import { RequestStatus, Routes as ROUTES } from '../../data/constants';
|
||||
import DiscussionContext from '../common/context';
|
||||
import { useWindowSize } from '@edx/paragon';
|
||||
|
||||
import { RequestStatus, Routes } from '../../data/constants';
|
||||
import { DiscussionContext } from '../common/context';
|
||||
import {
|
||||
useContainerSize, useIsOnDesktop, useIsOnTablet, useIsOnXLDesktop,
|
||||
useContainerSize, useIsOnDesktop, useIsOnXLDesktop, useShowLearnersTab,
|
||||
} from '../data/hooks';
|
||||
import { selectConfigLoadingStatus, selectEnableInContext } from '../data/selectors';
|
||||
import { selectconfigLoadingStatus, selectEnableInContext } from '../data/selectors';
|
||||
import { TopicPostsView, TopicsView as InContextTopicsView } from '../in-context-topics';
|
||||
import { LearnerPostsView, LearnersView } from '../learners';
|
||||
import { PostsView } from '../posts';
|
||||
import { TopicsView as LegacyTopicsView } from '../topics';
|
||||
|
||||
const TopicPostsView = lazy(() => import('../in-context-topics/TopicPostsView'));
|
||||
const InContextTopicsView = lazy(() => import('../in-context-topics/TopicsView'));
|
||||
const LearnerPostsView = lazy(() => import('../learners/LearnerPostsView'));
|
||||
const LearnersView = lazy(() => import('../learners/LearnersView'));
|
||||
const PostsView = lazy(() => import('../posts/PostsView'));
|
||||
const LegacyTopicsView = lazy(() => import('../topics/TopicsView'));
|
||||
|
||||
const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => {
|
||||
export default function DiscussionSidebar({ displaySidebar, postActionBarRef }) {
|
||||
const location = useLocation();
|
||||
const isOnDesktop = useIsOnDesktop();
|
||||
const isOnXLDesktop = useIsOnXLDesktop();
|
||||
const isOnTablet = useIsOnTablet();
|
||||
const { enableInContextSidebar } = useContext(DiscussionContext);
|
||||
const enableInContext = useSelector(selectEnableInContext);
|
||||
const configStatus = useSelector(selectConfigLoadingStatus);
|
||||
const configStatus = useSelector(selectconfigLoadingStatus);
|
||||
const redirectToLearnersTab = useShowLearnersTab();
|
||||
const sidebarRef = useRef(null);
|
||||
const postActionBarHeight = useContainerSize(postActionBarRef);
|
||||
const { height: windowHeight } = useWindowSize();
|
||||
@@ -54,68 +50,59 @@ const DiscussionSidebar = ({ displaySidebar, postActionBarRef }) => {
|
||||
'd-flex overflow-auto box-shadow-centered-1': displaySidebar,
|
||||
'w-100': !isOnDesktop,
|
||||
'sidebar-desktop-width': isOnDesktop && !isOnXLDesktop,
|
||||
'sidebar-tablet-width': isOnTablet && !isOnDesktop,
|
||||
'w-25 sidebar-XL-width': isOnXLDesktop,
|
||||
'min-content-height': !enableInContextSidebar,
|
||||
})}
|
||||
data-testid="sidebar"
|
||||
>
|
||||
<Suspense fallback={(<Spinner />)}>
|
||||
<Routes>
|
||||
{enableInContext && !enableInContextSidebar && (
|
||||
<Route
|
||||
path={ROUTES.TOPICS.ALL}
|
||||
element={<InContextTopicsView />}
|
||||
/>
|
||||
)}
|
||||
{enableInContext && !enableInContextSidebar && (
|
||||
[
|
||||
ROUTES.TOPICS.TOPIC,
|
||||
ROUTES.TOPICS.CATEGORY,
|
||||
ROUTES.TOPICS.TOPIC_POST,
|
||||
ROUTES.TOPICS.TOPIC_POST_EDIT,
|
||||
].map((route) => (
|
||||
<Route
|
||||
key={route}
|
||||
path={route}
|
||||
element={<TopicPostsView />}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
{[
|
||||
ROUTES.POSTS.ALL_POSTS,
|
||||
ROUTES.POSTS.EDIT_ALL_POSTS,
|
||||
ROUTES.POSTS.MY_POSTS,
|
||||
ROUTES.POSTS.EDIT_MY_POSTS,
|
||||
ROUTES.TOPICS.CATEGORY,
|
||||
ROUTES.TOPICS.CATEGORY_POST,
|
||||
ROUTES.TOPICS.CATEGORY_POST_EDIT,
|
||||
ROUTES.TOPICS.TOPIC,
|
||||
ROUTES.TOPICS.TOPIC_POST,
|
||||
ROUTES.TOPICS.TOPIC_POST_EDIT,
|
||||
].map((route) => (
|
||||
<Route
|
||||
key={route}
|
||||
path={route}
|
||||
element={<PostsView />}
|
||||
/>
|
||||
))}
|
||||
{ROUTES.TOPICS.PATH.map(path => (
|
||||
<Route key={path} path={path} element={<LegacyTopicsView />} />
|
||||
))}
|
||||
{
|
||||
[ROUTES.LEARNERS.POSTS, ROUTES.LEARNERS.POSTS_EDIT].map((route) => (
|
||||
<Route key={route} path={route} element={<LearnerPostsView />} />
|
||||
))
|
||||
}
|
||||
<Route path={ROUTES.LEARNERS.PATH} element={<LearnersView />} />
|
||||
{configStatus === RequestStatus.SUCCESSFUL && (
|
||||
<Route path={`${ROUTES.DISCUSSIONS.PATH}/*`} element={<Navigate to="posts" />} />
|
||||
)}
|
||||
</Routes>
|
||||
</Suspense>
|
||||
<Switch>
|
||||
{enableInContext && !enableInContextSidebar && (
|
||||
<Route
|
||||
path={Routes.TOPICS.ALL}
|
||||
component={InContextTopicsView}
|
||||
exact
|
||||
/>
|
||||
)}
|
||||
{enableInContext && !enableInContextSidebar && (
|
||||
<Route
|
||||
path={[
|
||||
Routes.TOPICS.TOPIC,
|
||||
Routes.TOPICS.CATEGORY,
|
||||
Routes.TOPICS.TOPIC_POST,
|
||||
Routes.TOPICS.TOPIC_POST_EDIT,
|
||||
]}
|
||||
component={TopicPostsView}
|
||||
exact
|
||||
/>
|
||||
)}
|
||||
<Route
|
||||
path={[Routes.POSTS.ALL_POSTS, Routes.POSTS.MY_POSTS, Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}
|
||||
component={PostsView}
|
||||
/>
|
||||
<Route path={Routes.TOPICS.PATH} component={LegacyTopicsView} />
|
||||
{redirectToLearnersTab && (
|
||||
<Route path={Routes.LEARNERS.POSTS} component={LearnerPostsView} />
|
||||
)}
|
||||
{redirectToLearnersTab && (
|
||||
<Route path={Routes.LEARNERS.PATH} component={LearnersView} />
|
||||
)}
|
||||
{configStatus === RequestStatus.SUCCESSFUL && (
|
||||
<Redirect
|
||||
from={Routes.DISCUSSIONS.PATH}
|
||||
to={{
|
||||
...location,
|
||||
pathname: Routes.POSTS.ALL_POSTS,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Switch>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
DiscussionSidebar.defaultProps = {
|
||||
displaySidebar: false,
|
||||
postActionBarRef: null,
|
||||
};
|
||||
|
||||
DiscussionSidebar.propTypes = {
|
||||
@@ -125,10 +112,3 @@ DiscussionSidebar.propTypes = {
|
||||
PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
|
||||
]),
|
||||
};
|
||||
|
||||
DiscussionSidebar.defaultProps = {
|
||||
displaySidebar: false,
|
||||
postActionBarRef: null,
|
||||
};
|
||||
|
||||
export default React.memo(DiscussionSidebar);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user