Feature: Add direct link to filters (using anchors or so) in the exercises page

[erikmd]

Related user(s):

No response

Related issue(s) or PR(s):

See also https://github.com/ocaml/ocaml.org/issues/2041#issuecomment-1938151989

Related project scope(s):

web-app UI

The problem:

https://ocaml-sf.org/learn-ocaml-public/#activity=exercises has 3 click-based filters (by category, by skill, by difficulty).

Wanted solution:

It could be nice to expose these filters from URL's hash property.

Considered alternatives:

No response

Additional context:

No response

[erikmd]

Cc @CJs0800 here is a list of potentially useful documentation to address this issue:

• some codebase entrypoint for this feature: this file: https://github.com/ocaml-sf/learn-ocaml/blob/87c7b7fe2698620213eeb5392a96f0f6c974c9af/src/app/learnocaml_index_main.ml#L258-L262
• https://developer.mozilla.org/en-US/docs/Web/API/Location/hash
• functions of utils.js_utils:

  val parse_fragment: unit -> (string * string) list
  val set_fragment: (string * string) list -> unit
  

• 3 subtasks:
  1. decide how to name the keys (e.g., difficulty=...) for the three kinds
  2. implement an auto-update the hash at each click on an accordion group, listing the canonicalized IDs for the open groups
  3. at the loading of the page, parse the fragment and open the tab/the open groups accordingly

[erikmd]

@CJs0800 FYI, two other links that may be useful for you to read, to understand the use of React in the frontend (app/ folder):

• https://ocaml.org/p/react/latest/doc/React/index.html
• https://erratique.ch/software/react/doc/