Disable filter and display no stories in “Browse stories” if user has…

[jennifer-lu]

… no approved languages

Notion ticket link

Disable filter and display no stories in “Browse stories” if user has no approved languages

Implementation description

• Disable filter and display "No Stories Found" box on browse stories page if user has no approved languages for translation or review

Steps to test

1. Sign up as someone new or login as someone with no approved languages
2. Click on browse stories tab
3. Observe no filters and "No Stories Found" box
4. Please check that other tabs still work
5. Please check that browse stories tab still works for users with approved languages (e.g. Dwight Translator English (US))

What should reviewers focus on?

• Does it work
• Does the code look ok

Checklist

• My PR name is descriptive and in imperative tense
• My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
• For backend changes, I have run the appropriate linters: docker exec -it planet-read_py-backend_1 /bin/bash -c "black . && isort --profile black ." and I have generated new migrations: flask db migrate -m "<your message>"
• I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

[jennifer-lu]

Removed css and replaced with Chakra for "No Stories Found" box.

[github-actions]

Visit the preview URL for this PR (updated for commit 112c75e):

https://planet-read-uwbp--pr333-bug-no-approved-ebqoed0v.web.app

_{(expires Thu, 20 Jan 2022 21:35:53 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[gaoxk]

very nice! ty for dealing with left over linting issues