hackforla
Dev: Feature: Add new fields to the Database: to support for new social media URLs in the UI
Overview
We need to add new social media URLs to the database, so that we can add addition form fields to the Social Media validation page with customizable order and basic URL validation.
Details
- This issue is limited to updating the database with the new fields. There will be another issue for updating the UI
- #2281
- [ ] Database fields:
- [ ] URL: New social media fields that will have an unlimited number of Social Media links 1,2,3,4, etc to add or remove.
- [ ] Order number: Display order that supports drag and drop for the users to reorder them on food seeker side.
- [ ] Validation:
- [ ] All URL should start with 'https://' or 'http://'. (We assume this will prevent someone from entering @taylorswift instead of x.com/taylorswift)
- [ ] Hint/Remind users for misspellings (ex: when they type 'facebok', it should deliver an error message "Did you mean facebook? etc.)
Current UI
Future UI
Action Items
- [ ] Decide on how to represent this information in the database. The primary options are:
- [ ] Create separate tables stakeholder_social, stakeholder_log_social and stakeholder_best_social with fields for url, platform, displayOrder and foreign key back to the corresonding stakeholder* table.
- [ ] Alternatively, we could add a field to each of the tables that is a JSON representation of an array of {platform, url, displayOrder} objects. This is easier to change the backend processes, but harder to query.
- [ ] Create a table of known social media platforms for the social media entries to reference. This will at least have the Platform name, but it might be useful to also have maybe a regex to validate that urls are compliant and possibly a reference to the appropriate logo (though these last two fields might be just in the front-end).
- [ ] Implement the database changes and web api changes.
- [ ] Write a db migration script that moves the existing url data from the current separate fields to the new structure.
- [ ] Create a follow-on issue to remove the old fields that can be implemented after this feature is up an running succssfullly.
Resources/Instructions
- UI tool for drag and drop: https://mui.com/x/react-data-grid/row-ordering/
Database will have an unlimited number of Social Media links 1, 2, 3, 4, etc. and an order number, which can be changed by the front end.
Front end, can be seen here https://github.com/hackforla/food-oasis/issues/2281#issuecomment-2860951522 will consist of people adding a URL for any social media and then dragging to change the order of how they appear on the food seeker side.
Perform some kind of validation (all links should start with https://, if they do type facebok, it should deliver a error message saying did you mean facebook?, etc.)
When this issue is finished being written, ask dev lead if we need to make a separate issue that would be dependent on this issue, that new issue would take all the existing data from the specific fields (facebook, twitter, etc.) in the database and put them into this new storage structure with a default order.
@entrotech We think we would need both option 1 and 3, unless one of the tables in option 1 accomplishes the same thing as option 3. We definitely want to be able to query it in the future.
- [ ] Decide on how to represent this information in the database. The primary options are:
- [ ] Create a separate tables, probably stakeholder_social, stakeholder_log_social and stakeholder_best_social with fields for url, platform, displayOrder and foreign key back to the stakeholder* table.
- [ ] Alternatively, we could add a field to each of the tables that is a JSON representation of an array of {platform, url, displayOrder} objects. This is easier to change the backend processes, but harder to query.
- [ ] Create a table of known social media platforms for the social media entries to reference. This will at least have the Platform name, but it might be useful to also have maybe a regex to validate that urls are compliant and possibly a reference to the appropriate logo (though these last two fields might be just in the front-end).
Is this issue clear enough for us to put it into the prioritized backlog or we need to talk about it some more?
The first two list items were the two options, the third is required for either option. Modified the list structure accordingly.
We can update the list of platform with db migrations, but should probably create a lower priority issue to have an admin screen for editing the platform list.
