nkowaokwu/igbo-api-admin

Data entry platform for the Igbo API.

igbo-api-admin's Issues

Verify Audio Page

Is your feature request related to a problem? Please describe.
We want to make it incredibly easy for recorders to be able to verify existing work so they can contribute to the quality of the dataset.

Describe the solution you'd like
We want the system to pull example suggestions that have yet to have at least one approval to be verified.

• If an example suggestion has one denial, we do not serve that sentence back to verifiers to verify
• If an example suggestion has zero or one approval (not approved yet by the current user), that example suggestion will be served to that user
• If an example suggestion has two approvals, it can be confirmed and automatically merged into the system but still marked as collection according to #265
• The user will be able to skip example suggestions that cannot approve or deny
  • We will send an approval or denial request to the backend on each example suggestion
• Render a status bar for the verifier
• At the congrats page we can ask if they would like to go back to the homepage or continue verifying

Update Headword Tone Mark Checking Rules

Is your feature request related to a problem? Please describe.
The rules being used right now to see if a word is tone-marked correctly are overly complicated and doesn't properly follow the rules defined in the editing standards document.

Describe the solution you'd like
We want to update the accent mark logic to follow these two rules:

• A word cannot have any visible high tone marks
• A word cannot start with a down-step tone

Describe alternatives you've considered
N/A

Additional context
Here is the fill that responsible for checking the tone marks for a headword: https://github.com/nkowaokwu/igbo-api-admin/blob/main/src/shared/utils/flagHeadword.ts

Create a copy id component within the UserShow view

Is your feature request related to a problem? Please describe.
We want to make it even easier for admins of the Igbo API Editor Platform to copy the user id of the current user within the UserShow view.

Describe the solution you'd like
We already have an IdField.tsx component that takes in a record with an id to be copied to the user's clipboard. We want to create a new reusable component within this IdField.tsx component called CopyText.tsx (or something better) that's purely responsible for rendering the text and copying that text.

This new component will be rendered with the UserShow view beneath the user's email so that it's easier for admins to copy their IDs for various purposes.

Please refer to the screenshot to know where to place this new component.

Testing
Please write new Jest frontend tests to ensure that the component renders the text and the text is copied to a clipboard when clicked on.

Location to place the new CopyText.tsx component

npm install -g firebase firebase-cli is depreacated

When you run the command "npm install -g firebase firebase-cli" in this project, you may encounter an issue with a deprecated package. This means that the package you are using is no longer maintained and may contain security vulnerabilities or bugs. It is recommended that you update the package to the latest version or find an alternative package that performs the same function. Failing to address the deprecated package may cause issues with the project's stability and security in the future.

I recommend using npm install -g firebase-tools instead.

To install firebase-tools, please run the following command:

npm install -g firebase-tools

This will install the Firebase CLI tools and allow you to use the Firebase features in your project.

Upgrade AWS v2 to v3

Background

AWS released v3 of their JS SDK. To prevent any issues in the future, let's upgrade to the latest major version.

Cloud Function Logs

Render Personal Editor Stats in User Show page

Is your feature request related to a problem? Please describe.
Project owners want to get a better sense of what work individual editors, mergers, and admins have been doing on the platform. However, the only way for an individual to know about the work that's done for an individual is the editor, merger, or admin to go to their own dashboard to see their own personal stats.

Describe the solution you'd like

1. Update the list view for the user tab to allow admins to click on a show button that will take them to the show view for the individual user
2. Within the show view, render all information regarding the user (their name, email, permission level, and personal stats)

• The personal stats that would appear in this show view would be the same personal stats that appear on the dashboard - so we can reuse the same function

Describe alternatives you've considered
N/A

Additional context

• The ability to see the show view of an individual user should only be available to users of the platform that have an "Admin" permission level
  • If a user with a permission level below that attempts to view the page, they will be redirected away from the page

Expose an endpoint for the purpose of tracking referred users

Is your feature request related to a problem? Please describe.
In order to streamline the implementation of a referral code system, it is essential to establish a dedicated API endpoint tailored to monitor and allocate points to users who successfully refer other users.

Describe the solution you'd like
Expose an endpoint with the signature below

[POST] /referral?referral-code=<myawesomecode>

It should create a new referral with Mongodb's User Collection as described here #450.

1. Query the User collection described here #450 for the owner of the referral code
2. Use the response in the query above to create a Referral document also described here #450

Additional context

1. Software design document for inspiration.

Implement new Leaderboard page design

Is your feature request related to a problem? Please describe.
Update the current Leaderboard page to match designs in Figma

Describe the solution you'd like

• Igbo api admin leader board page to reflect new changes in Figma on both mobile and desktop.
• Implement the back button logic such that a left arrow is rendered if a leaderboard option is selected

Additional context

Create a `Corpus` Model

Is your feature request related to a problem? Please describe.
We want to be able to support long bodies of text along with audio. The Corpus model will enable us to do that.

Describe the solution you'd like
Create a new Corpus model that includes the following fields:

• body
• audio
• author

Describe alternatives you've considered
This is just the first version of the Corpus model

Additional context
N/A

Update text on Igbo Soundbox page to dynamically calculate new recording goals.

Is your feature request related to a problem? Please describe.
Update Your total goal is 4,000 text on Igbo Soundbox page to You have reached your goal, your new goal is [multiples of 2000 depending on the users total recordings].
For example a user with 7,000 recordings the text will read You have reached your goal, your new goal is 8,000.

Additional context

Apply light blue background to entire page on mobile

Is your feature request related to a problem? Please describe.
On mobile, there is a white section at the bottom of the screen that doesn't match the light blue background that should be the background for the entire page.

Describe the solution you'd like
Increase the size of the light blue background so it covers the entire screen, hiding the white background beneath it.

Screenshot

Create Recorded example sentences and Verified recorded screen

Is your feature request related to a problem? Please describe.
We would like to Redesign Leaderboard page

Describe the solution you'd like

• We want to show only the Recorded example sentences and Verified recorded sentence options for now. You can ignore the other four options in the mock since we don’t have a way for users to collect data for them.
• Despite this design being for mobile, make sure that it’s responsive on both desktop and mobile screens.
• For this first pass of the ticket, don’t implement the search bar as it will be implemented later when we have more leaderboards to search through.
• When you click on one of those leaderboard options, it should route you to the already existing leaderboard pages that exist in the codebase. To get this working, you will need to refactor a bit of code.
• You don’t need to implement the back button on mobile

Describe alternatives you've considered
Nil

Additional context
Figma link

A new IgboSoundbox Login link

Is your feature request related to a problem? Please describe.
We want to have add a new link on the current Igbo Editor Platform Login page , this link will route the user to a new url "http://localhost:3030/#/IgboSoundboxLogin". On this new url will serve a new React Component called IgboSoundboxLogin for the IgboSoundboxLogin Page

Describe the solution you'd like
I will add a Chakra UI Text component with an onClick Handle. The onClick Hnadle will call a function that will change the Current url to "http://localhost:3030/#/IgboSoundboxLogin" using the Javascript window.location.hash = "#/IgboSoundboxLogin";

Describe alternatives you've considered
The alternative would be to use the Chakra UI link component or the React Router Link component

Additional context
N/A

Convert the Personal Contributions section to become a grid.

Is your feature request related to a problem? Please describe.
The Personal Contributions section on the Dashboard of the Igbo API Editor Platform is too tall. We should convert it to 6 column'd grid that includes all the stats that spans the entire viewport of the screen. If on a mobile device, the column should shrink down to 2 so that it reads better on smaller screens.

Use TailwindCSS grid syntax.

Screenshot

Render Nsịbịdị Keyboard in Platform

Include `type` field on Example Suggestion

Is your feature request related to a problem? Please describe.
We want to be able to tell the difference between a regular example suggestion created by our lexicographers vs example suggestions that have been collected from the internet for data collection purposes.

Describe the solution you'd like
Expand the ExampleSuggestion model so it has a type field that can take either value:

• null for a regular, lexicographer-created suggestion document
• collection for data scraped and collected to be used as recording material

Igbo Definitions page on mobile doesn't span the entire screen

Is your feature request related to a problem? Please describe.
On mobile, the Igbo Definitions page doesn't span the entire width.

Describe the solution you'd like
Allow all the content on the screen to span the entire width of the device view on mobile.

Screenshots

Nkọwa okwu Bot not welcoming new members

Is your feature request related to a problem? Please describe.
We want the Nkọwa okwu (NkBot) bot to welcome new members, however, it's not doing that.
The last time a member was to join was on Jan 18, 2023 at 1:28pm EST.

Describe the solution you'd like
Look into why the bot isn't welcoming new members and fix it.

Upgrade firebase-tools to 11.30.0

update firebase-tools to version 11.30.0 to fix the emulator exited with 1 error

Investigate bug causing word duplication during merging of word suggestions

When a word suggestion is about to be merged, sometimes the process errors out and ends up creating duplicate words entries and this is caused by the program not seeing the Id of the original word from which the word suggestion was created.

Investigate this issue to find the cause of this bug

Render Nsịbịdị Word Suggestion Stat

Is your feature request related to a problem? Please describe.
We want to have a new stat on the dashboard that tracks how many word suggestions have Nsịbịdị

Convert constants into singular form names

Is your feature request related to a problem? Please describe.
We want the names of our constants to be in their singular form.

Describe the solution you'd like
Specifically, singularize the name of each of the following backend constants files found in the src/backend/shared/constants directory:

• Dialects
• GenericWordSegments
• MediaTypes
• ReviewActions
• StatTypes
• SuggestionTypes
• UserRoles
• WordAttributes
• WordTags

Complete each constant file in a separate PR
This allows more people to contribute to this issue while preventing any merge conflicts and possible production errors.

Expose an endpoint for the purpose of retrieving a user's referral code.

Is your feature request related to a problem? Please describe.
To enable users to access their individual referral codes, it is imperative to establish an API endpoint designed to facilitate the retrieval of a user's referral code.

Describe the solution you'd like

1. Expose an endpoint with the signature below

[GET] /user

2. It should communicate with Mongodb's User Collection as described here #450 and will return the entire user document containing a referral code.

Additional context

1. Software design document for inspiration.

Remove Firebase install step in README

Is your feature request related to a problem? Please describe.
We want the README to accurately represent the necessary steps to setup the project.

Describe the solution you'd like
Remove the line and code snippet that starts with: "Install the Firebase project's dependencies:"

Toggle Login header

Is your feature request related to a problem? Please describe.
When user tries to signup, the page's title says "Log in to your account" .

Describe the solution you'd like
This title should be dynamic depending on what the user is trying to do.

Additional context

igbo-api-admin Crowdsourcing

Is your feature request related to a problem? Please describe.
We want to implement a Crowdsourcing platform in our igbo-api-admin page to gather audio examples of Igbo words for the Igbo API data.

Describe the solution you'd like
Add a new navigation link to the igbo-api-admin platform where users can access the proposed Crowdsourcing page, record and upload audios, and get compensated for their work.

Describe alternatives you've considered
N/A

Additional context
N/A

Replace `uuid` to `ulid`

Is your feature request related to a problem? Please describe.
Let's avoid performance issues down the line by optimizing how we generated ids.

Describe the solution you'd like
Uninstall uuid and replace with ulid: https://github.com/ulid/javascript

Describe alternatives you've considered
N/A

Additional context
https://twitter.com/Faraaz98/status/1674533478032093184

Dialectal options overflow parent component

Issue

When there are multiple dialectal variation sections, the audio recording field options (record and restart buttons) overflow past the border of the gray box that the recording component lives in.

Ideal Solution

We want to have these options wrap into a new line if there's not enough space for these options to be rendered on the same line

Bug Screenshot

Update Dashboard Stats Chart

Is your feature request related to a problem? Please describe.
We want to have more clear designs for the lexicographers to rely on. Specifically, we would like to have more clear charts that show the total number of dialectal variations and examples merged.

Describe the solution you'd like
Implement the two charts presented in this design: https://www.figma.com/file/fYBkHmqkjeBFKExKFckfBi/Nk-Editor-Platform?node-id=0%3A1&t=gxbcqpMHsgm8wcu7-11

Describe alternatives you've considered
N/A

Additional context
We want to use Chart.js for these charts.

Remove outline on profile

Is your feature request related to a problem? Please describe.

The header has a blue outline around the users profile which contrasts with the green background

Describe the solution you'd like
I'd like to remove Remove the blue outline

Create Show View for Data Collection

Is your feature request related to a problem? Please describe.
We want to have a simplistic way of collecting a lot of Igbo audio data within the Igbo API Editor Platform. The best way is to have an intuitive user experience that streamlines the process of recording or verifying audio data.

Describe the solution you'd like
When a user navigates to the Data collection page, they will have the option to either:

1. Record audio for existing example suggestions that don't have audio, or
2. Verify (approve or deny) example suggestions that do have audio recorded

These should just be two buttons that will have the ability to navigate to another page. For the sake of this PR, there's no need to actually have these buttons navigate to any page.

Additional context
This PR relies on #262 being completed. So the majority of the logic can be written out, but the last 5% will be to place this show view within the new "Data Collection" Resource tab that @mazma1 is working on.

Convert `yup` to `Joi`

Is your feature request related to a problem? Please describe.
We want to use one data validation package. We will be using Joi for the frontend data validation package.

Specifically, the WordEditFormResolver, ExampleEditFormResolver, and CorpusEditFormResolver should be converted from yup to Joi. Then yup should be uninstalled from the project.

Pluralize `DocumentStatus`

Is your feature request related to a problem? Please describe.
We want to unify our codebase so that it's more clear the purpose of each module.

Describe the solution you'd like
Pluralize DocumentStatus -> DocumentStatuses.

Make sure to update import paths to this newly named file.

Record Page for Five Example Sentences

Is your feature request related to a problem? Please describe.
We want to be able to batch recording audio for example suggestions.

Describe the solution you'd like
Create a "Record" page that will pull five random example sentences to record audio for. This page should include the following features:

• The ability to skip sentences that are erroneous, incomplete sentences or the recorder doesn't know how to read
• Record audio button to record the audio
• Playback audio button to playback the recorded audio
• Confirm button to move onto the next sentence
• A progress bar to show the recorder how many sentences they have left
• A congrats/completion page:
  • This page will send all the recorded audio to the backend at the end
  • This page will ask them to either:
    • Go back to the homepage, or
    • Record audio for another five examples sentences

Create a "Sorry, no more sentences available" page

Is your feature request related to a problem? Please describe.
Whenever we have exhausted the amount of data that we have collected either for recording audio or verifying it, we want to tell the user that we have exhausted our resources.

Describe the solution you'd like
Create a new page that shows the message "Sorry, no more sentences available. Please check back later" to let the user know that there's no data to be recorded or verified.

Change fake URI path AWS

Is your feature request related to a problem? Please describe.
We want to change the fake Uri path from https://igbo-api-test-local/${mediaPath}/ to https://igbo-api-test-local.com/${mediaPath}/

Specifically, we want to add .com to the end of the hostname so that we can better match the expected functionality of AWS.

Describe the solution you'd like
Change that fake Uri path and update all tests that will be affected by this change.

Additional context
Line in initializeAPI.ts to change

Render Tooltip for Rerecord Audio Label

Is your feature request related to a problem? Please describe.
We render the "Rerecord Audio" label for words that have a broken audio file (audio that doesn't play back).

Describe the solution you'd like
In the case where the "Rerecord Audio" label appears, we want to use the Chakra Tooltip that renders the following message when the user hovers over the label:

The audio for this word is unable to load and may be broken. Please re-record the audio.

Describe alternatives you've considered
N/A

Additional context

Update Crowdsourcing button options' hover style

Background

We want to add a hover state for each of the crowdsourcing options that accomplish the following:

• Changes the background color to a slightly lighter color for each option
• Change the cursor's style to a pointer

PR

When you open a PR for this issue, please include a quick video of GIF showing the hover state in action!

Screenshot

Delete the `src/shared/constants/WordClass` file

Background

There are two WordClass files that exist in the database — one in the backend directory and another in the top-level shared directory.

Ideal Solution

Remove src/shared/constants/WordClass to only have src/backend/shared/constants/WordClass. Once the file has been deleted, you will need to update all the paths that pointed to the now deleted file to the existing WordClass file.

Chart Individual Contributor Amounts

Is your feature request related to a problem? Please describe.
Individual translators don't know how much they personally have contributed within a given timeline.

Describe the solution you'd like
Create a new page within the platform that can chart an individual contributor's work within a given time period. That time period could be a day, week, month, or year.

Describe alternatives you've considered
Adding more generic stats on the Dashboard homepage. But that doesn't really solve the problem of allowing an individual translator to know more about their contributions.

Additional context
N/A

Convert `Box` into `Button` for `CrowdsourcingProgressManager`

Is your feature request related to a problem? Please describe.
We want to make the Igbo API Editor Platform crowdsourcing homepage more accessible.

Describe the solution you'd like
Convert the Box component that renders each of our data collection options as a Button so the page is keyboard navigatable and screenreaders are more accurate.

Specifically, change the following usage: https://github.com/nkowaokwu/igbo-api-admin/blob/main/src/Core/Dashboard/components/CrowdsourcingProgressManager.tsx#L59-L82

Stabilise the build pipeline

Is your feature request related to a problem? Please describe.
Some tests have been failing on the build pipeline causing the workflow runs to fail

Describe the solution you'd like
Make modifications to the existing tests and add new ones where necessary to make the build pass and ultimately catch bugs before they make it into production

Describe alternatives you've considered
N/A

Additional context
N/A

Sidebar doesn't slide in and out

Is your feature request related to a problem? Please describe.
When the collapse/expand button for the platform's sidebar is clicked, nothing happens.

Describe the solution you'd like
When the button is clicked, the sidebar should slide in and out to allow the user to see more on their screen while on desktop.

Video of the bug
https://github.com/nkowaokwu/igbo-api-admin/assets/16169291/179be3d1-3713-4000-9423-7bfed8609fad

React Admin
Look into the react-admin documentation to learn more about the sidebar. That should hopefully provide more context on how we expanded the sidebar to make it custom, but please feel free to reach out for more clarity.

Create a Constructed Terms Tab

Is your feature request related to a problem? Please describe.
Ijemma suggested that we create a new tab within the Igbo API Editor Platform called Constructed Terms that will be word suggestions marked as constructed terms

Describe the solution you'd like
Within the list view of Constructed Terms, it will be a filtered list of Word Suggestions that have the isConstructedTerm field with a true value

• When creating a new Constructed Term within the list view, the isConstructedTerm will automatically be marked as truthy
• The Approvals and Denials options will be used to allow people to quickly vote on words to be moved to getting a Twitter poll
• We would need to update the documentation How to Use the Igbo API Editor Platform to include this new tab

Describe alternatives you've considered
N/A

Additional context
Notion document: https://www.notion.so/September-10-2022-Translator-Meeting-0d7df0b2c51a4afdab7400c1fe76cb26

Copy Firebase users to MongoDB and generate unique referral code

Is your feature request related to a problem? Please describe.
We want to copy firebase user accounts over to MongoDB as a prerequisite to creating a referral system. At the moment we have no way of assigning unique referral codes to existing users as well as tracking who referred who.

Describe the solution you'd like
Create a User Schema with the following structure

type User = {
  firebaseId: string; // self explanatory
  referralCode: string; // generated in the script below
}

Create a temp js script that pings Firebase for a list of existing users, loops through them and creates a new User Document. Or batch create User Documents by calling User.insertMany with an array of User Documents

As part of the migration process a unique referral code is generated for each User using nanoid.

const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const referral_code = nanoid.customAlphabet(`${alphabet}${new Date().valueOf()}`, 6);

await User.insertMany[{ firebaseId: 'awesome-id', referralCode}]

Additional context

1. Software design document for inspiration.
2. Please reach @ijemmao for direct access to firebase and mongoDB prod accounts.

Request to update Igbo API Editor Platform Readme Section Step 3

Is your feature request related to a problem? Please describe.
I was a bit confused understanding the step 3 in the readme section and what is exactly expected of me to do with the code snippet and the file path, here we have different files called index.js

Describe the solution you'd like
Here, we can specifically mention what and what should happen with the provided code snippet , in which file path we expect to see the file , more explanation of the code and in which we are expected to have the code as we have different index.js files

Describe alternatives you've considered
N/A

Additional context
N/A

Create a reusable component to manage going forward and backward for cards

Is your feature request related to a problem? Please describe.
We want our navigation controls to be consistent across the board when navigating between sentences that need audio recorded or verified, and words that need Igbo definitions. Currently, the Igbo definitions navigation system looks different from the example sentences' navigation system.

The look of the navigation system within VerifySentenceAudio.tsx and RecordSentenceAudio.tsx is the same aesthetic we want for Igbo definitions.

Describe the solution you'd like
Create a reusable React component that's able to take in callback methods that will get called when the forward and back buttons are called. Additionally, the component should keep track of the total number of elements in the array to paginate through and the current index within the array of elements.

Then use this reusable components within the following pages:

• VerifySentenceAudio.tsx
• RecordSentenceAudio.tsx
• IgboDefinitions.tsx

We want to change this

Into this

Create New "Data Collection" Tab

Is your feature request related to a problem? Please describe.
We want to start collecting data in a similar fashion to Mozilla Common Voice where they allow people to either record audio for example sentences or verify the quality and accuracy of recorded audio.

Describe the solution you'd like
We want to create a new tab called "Data Collection" that will be available right about the Users tab.
This tab should only appear for Admins since this is a Work in Progress (WIP) feature.
We just want to create a new tab with an empty show view that has nothing rendered within it

Send Slack Notif When Constructed Term Gets Merged

Is your feature request related to a problem? Please describe.
We want a way to automatically notify the Slack community when a new constructed term gets merged

Describe the solution you'd like
Whenever a brand new constructed term is created (meaning it has no parent Id) then we want to send a message to the Slack community, specifically the #translator community

Create Referral MongoDB Collection

Is your feature request related to a problem? Please describe.
A means to track users who have been referred to the platform as well as a way calculating referral points

Describe the solution you'd like
A MongoDB Collection for tracking referrals having a structure as thus;

type Referral = {
  referrerId: User;
  referredUserId: User;
}

Additional context

1. This ticket is dependent on #450
2. Software design document for inspiration.