Giter VIP home page Giter VIP logo

frontend-app-discussions's Introduction

frontend-app-discussions

Codecov 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.

Cloning and Startup

  1. Clone your new repo:
git clone https://github.com/openedx/frontend-app-discussions.git
  1. Install npm dependencies:
cd frontend-app-discussions && npm install
  1. Start the dev server:
npm start

The dev server is running at http://localhost:2002.

Plugins

This MFE can be customized using Frontend Plugin Framework.

The parts of this MFE that can be customized in that manner are documented here.

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. For anything non-trivial, the best path is to open an issue in this repository with as many details about the issue you are facing as you can provide.

https://github.com/openedx/frontend-app-discussions/issues

For more information about these options, see the Getting Help page.

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

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

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.

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 [email protected].

Project Structure

The source for this project is organized into nested submodules according to the ADR Feature-based Application Organization.

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 for details.

Internationalization

Please see edx/frontend-platform's i18n module for documentation on internationalization. The documentation explains how to use it, and the How To has more detail.

Reporting Security Issues

Please do not report security issues in public. Please email [email protected].

frontend-app-discussions's People

Contributors

0x29a avatar a-asad avatar ahtishamshahid avatar asadazam93 avatar awais-ansari avatar ayesha-waris avatar bilalqamar95 avatar brian-smith-tcril avatar cup0fcoffee avatar dmytroalipov avatar edx-requirements-bot avatar edx-semantic-release avatar feanil avatar ihor-romaniuk avatar jawayria avatar keithgg avatar lunyachek avatar mashal-m avatar mehaknasir avatar muhammadadeeltajamul avatar omarithawi avatar renovate[bot] avatar saadyousafarbi avatar sarina avatar sundasnoreen12 avatar tecoholic avatar timmc-edx avatar tnamgyal avatar vladislavkeblysh avatar xitij2000 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

frontend-app-discussions's Issues

Different type of hover on buttons

STR:

  1. Create a post
  2. Create a response in this post
  3. Hover on the response (will see the additional menu with add a comment, like, etc.)
  4. Hover "Add comment"
  5. Hover "like"
  6. Observe the result

image

Add support for runtime configuration

frontend-platform supports runtime configuration since 2.5.0 (see the PR that introduced it), but it requires MFE cooperation. We should avoid making configuration values constant, in order to make it possible to change them after initialization.

Failure on stage

The change was first merged to master in 9f84230, but it was reported to introduce an issue as described in #382. The change was reverted by 67b0b33.

We need to either try and reproduce the issue to gather more data, or try to find out what's wrong by analyzing the code.

PRs

Master branch not working with tutor

Hi. I'm running openedx palm 3 with tutor. When switching the discussions MFE to the master branch, after launch, I get this page:

fc855bc0de8bf78905148bb6929a458cc62b1fa2

The said line is const { params: { page } } = useRouteMatch(`${Routes.COMMENTS.PAGE}?`);. So I assume that the useRouteMatch function is returning null. Can you please help me with this?

This issue was first posted in the forum.

Favicon and siteName not rendering in the title on Tutor

Issue

When we use this MFE on Tutor, I haven't had the opportunity to test it on devstack, the favicon and siteName in the title do not render. Similarly, the title is not translated into the current language, it always shows in English as is defined in the index.html file:

<title>Discussions | <%= process.env.SITE_NAME %></title>

Possible Reason

This is likely due to this MFE trying to access the favicon directly in the assets folder as it is being done here:

import './assets/favicon.ico';

In the other MFEs, they use the react-helmet package to override the head tag, similar to how it is being done in the profile MFE here.

How to reproduce

  1. Install any version of tutor
  2. Create a superuser using the command: tutor local do createuser --staff --superuser yourusername [email protected]
  3. Sign in to tutor with the created user
  4. Import the demo course using the command: tutor local do importdemocourse
  5. Visit the discussions page for the demo course at this url
  6. The favicon and the sitename will not render.

Or you can just visit the sandbox environment, which is running Tutor version 17.0.0. You can visit it at this link

It's possible to vote for your own posts in Discussions MFE

The user has the opportunity to vote for his post:
screen_67

But if you look at how it worked for Discussion XBlock, you can see that the ability to vote for your post is blocked and the button is not active for the user:
screen_68

I found in the documentation that the user should not be able to vote for his post Discussions Docs

I found out that this resolution is obtained on the backend. But this is not used to Discussion MFE.

It might be worth paying attention to this.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource Name Replacement PR?
npm babel-plugin-react-intl Unavailable

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • fix(deps): update dependency @edx/frontend-component-header to v5.3.4
  • fix(deps): update dependency @openedx/frontend-slot-footer to v1.0.3
  • fix(deps): update dependency @edx/frontend-platform to v8.1.1
  • fix(deps): update dependency @openedx/paragon to v22.7.0
  • fix(deps): update dependency dompurify to v2.5.6
  • chore(deps): update dependency axios to v1
  • chore(deps): update dependency axios-mock-adapter to v2
  • chore(deps): update dependency eslint-plugin-simple-import-sort to v12
  • chore(deps): update dependency glob to v11
  • chore(deps): update dependency husky to v9
  • chore(deps): update dependency node to v20
  • chore(deps): update testing-library monorepo (major) (@testing-library/jest-dom, @testing-library/react, @testing-library/user-event)
  • fix(deps): update dependency @reduxjs/toolkit to v2
  • fix(deps): update dependency @tinymce/tinymce-react to v5
  • fix(deps): update dependency dompurify to v3
  • fix(deps): update dependency react-redux to v9
  • fix(deps): update dependency redux to v5
  • fix(deps): update dependency tinymce to v7
  • fix(deps): update dependency yup to v1
  • fix(deps): update react monorepo to v18 (major) (react, react-dom)
  • 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/add-depr-ticket-to-depr-board.yml
.github/workflows/add-remove-label-on-comment.yml
.github/workflows/ci.yml
  • actions/checkout v4
  • actions/setup-node v4
  • codecov/codecov-action v4
.github/workflows/commitlint.yml
.github/workflows/lockfileversion-check.yml
.github/workflows/self-assign-issue.yml
npm
package.json
  • @edx/brand ^1.2.2
  • @edx/frontend-component-header 5.3.0
  • @edx/frontend-platform 8.0.0
  • @edx/openedx-atlas ^0.6.0
  • @openedx/frontend-slot-footer ^1.0.2
  • @openedx/paragon ^22.1.1
  • @reduxjs/toolkit 1.9.7
  • @tinymce/tinymce-react 3.13.1
  • babel-polyfill 6.26.0
  • classnames 2.5.1
  • core-js 3.21.1
  • dompurify ^2.4.3
  • formik 2.4.5
  • lodash.snakecase 4.1.1
  • prop-types 15.8.1
  • raw-loader 4.0.2
  • react 17.0.2
  • react-dom 17.0.2
  • 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
  • timeago.js 4.0.2
  • tinymce 5.10.7
  • yup 0.32.11
  • @edx/browserslist-config 1.2.0
  • @edx/reactifex 1.1.0
  • @openedx/frontend-build 14.0.3
  • @testing-library/jest-dom 5.17.0
  • @testing-library/react 12.1.5
  • @testing-library/user-event 13.5.0
  • axios ^0.28.0
  • axios-mock-adapter 1.22.0
  • babel-plugin-react-intl 8.2.25
  • eslint-plugin-simple-import-sort 7.0.0
  • glob 7.2.0
  • husky 7.0.4
  • jest 29.7.0
  • rosie 2.1.1
nvm
.nvmrc
  • node 18

  • Check this box to trigger a request for Renovate to run again on this repository

Decoding problem in posts preview body for non-lating alphabet languages

There is a problem in the left vertical list of the posts titles with the preview of the post body: The post body is not decoded correctly if it's written in a non-latin alphabet (For the Greek language in my case), as it is shown on my screenshot here.

Discussions_Decoding_Problem

The solution I have found and tested is quite simple though.

In the file frontend-app-discussions/src/discussions/posts/post/PostLink.jsx
at the beginning you have to import 'he':

import he from 'he';

and at the following line:

{isPostPreviewAvailable(previewBody) ? previewBody : intl.formatMessage(messages.postWithoutPreview)}

you have to decode the previewBody like so:

{isPostPreviewAvailable(previewBody) ? he.decode(previewBody) : intl.formatMessage(messages.postWithoutPreview)}

And that fixes the problem.

That's my solution but I guess there are other ways to deal with it as well...

Back button does not work from Discussion

Expected behavior

Clicking your browser's "back" button from the Discussion tab should take you to the previous page.

Steps to reproduce

  1. Start on any course page, such as https://apps.redwood.demo.edly.io/learning/course/course-v1:HinaX+HX101+2024_T2/home
  2. Click on "Discussion".
  3. Use your browser's back button.
  4. Witness a brief moment of "All posts sorted by recent activity" on the left.

The URL changes briefly from
https://apps.redwood.demo.edly.io/discussions/course-v1:HinaX+HX101+2024_T2/posts
to
https://apps.redwood.demo.edly.io/discussions/course-v1:HinaX+HX101+2024_T2/
and then back to
https://apps.redwood.demo.edly.io/discussions/course-v1:HinaX+HX101+2024_T2/posts

The original issue was reported on the BTR board as part of the redwood testing effort: openedx/wg-build-test-release#346

Node 20 upgrade

Description

See the parent ticket for the general description and motivation, openedx/public-engineering#267. Make sure to follow its recommendations for each step of the process.

Tasks

Upgrade React JS to v17

This repo is currently using React JS v16. We need to upgrade it to React 17 before moving to latest React version(v18).
React 17 doesn’t add any new developer-facing features, so its upgrade might not cause any breaking changes. Our end goal is to upgrade React to v18 but v18 no longer support enzyme, so we are upgrading to React 17 and then we’ll migrate from enzyme.

Epic Link

React 17 upgrade

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.