Implement card operations menu for flashcard overview page

[jacob-macleod]

Implement the "Rename" and "Delete" buttons for each flashcard which is accessed by clicking the three dot menu on the /flashcards page. This involves developing the frontend, including mobile support and loading animations, as well as the backend methods. Follow the UI designs.

If you're interested, please reply to this comment, and I'll send more detailed information, including showing the UI designs

[rkotchamp]

Hey i am interested in this react project. Do you mind telling me more

[jacob-macleod]

Great @rkotchamp! The react frontend and the python backend are two different codebases. The URL which the frontend uses to communicate with the API is stored in frontend/src/api/config.js, which links to the deployed website in production by default ([http://dolphinflashcards.com/api/](http://dolphinflashcards.com/api/)).

In this feature, you'd be updating the frontend code to properly develop the card operations menu, which is a menu with options like "Rename" or "Delete". I'm currently coming to the end of a big database refactor to switch databases, so the code to interact with the database has been completely changed. The new code is stored in a seperate branch. API methods need to be written to rename and delete cards. But since the code needs to be rewritten anyway, it makes sense if I add those changes to my branch where I'm working on the database refactor, which will be complete soon.

So you'd be updating the react frontend to:

• Decide what happens when you click the Rename and Delete buttons (for example, for the rename button, a text box should popup as a popup, and have a cancel and rename button). That rename button text to the text input could close the popup and make the flashcards displayed on the main page rerender.
• Implementing the above
• But this wouldn't actually interact with the API yet, so they won't actually do anything
• Instead, make it so when you press the "Rename" or "Delete" buttons, it alerts something like "Deleting (flashcard id) from (parent folder path)". This will make it easier to link the data to the API when I've finished the API changes

You will need to create an account (go to http://dolphinflashcards.com/dashboard), then generate an API request to create demo data for testing, since you can't create folders and flashcards with the frontend client yet. I'll tell you how to do that later, when I have time to test what I tell you to double check it works. Once you've done that, you can go to the flashcards page, and you should see the data. Note that if you haven't generated data with the API, the flashcards page will show a white screen - there's an unhandled exception when you don't have any data, which I'm working on fixing, but haven't merged that branch yet.

I'll send the UI designs in figma in a little while.

Sorry for my late reply! Let me know if you have any questions.

So I'd need to send you the UI designs and more information about the API before you'd be able to get started.

[jacob-macleod]

@rkotchamp I've invited your email address from your profile to Figma. The Prototype page stores the designs that are being developed. The "Card Operations" widget below is the one that you'd be working on, although what actually happens when you press each button hasn't been designed yet. The "move" button is currently the only functional one.