Issue 55 add member social media info

[bilibilistack]

#55

Change Summary

Add support for associating social media profiles with members, and displays these links throughout the application. The changes span the backend (models, serializers, admin, migrations) and the frontend (types, hooks, components, and pages). The main focus is to allow each member to have multiple social media links, which are then shown in member profiles and contributor listings.

Backend: Social Media Model and API Enhancements

• Added a new SocialMedia model linked to Member, with platform choices, link, and username fields. [1] [2]
• Updated serializers to include social media information for members and contributors, and created a SocialMediaSerializer. [1] [2]
• Modified the Django admin to allow inline editing of social media links for members.

Frontend: Type and Data Model Updates

• Extended TypeScript types for members and contributors to include an array of social media objects. [1] [2] [3] [4]

Frontend: Display of Social Media Links

• Updated the member profile component to show social media icons and usernames using react-social-icons.
• Modified game and games listing pages to display contributor social media icons fetched from the API. (client/src/pages/games/[id].tsxL110-R133, client/src/pages/games/index.tsxL128-R141)

Individual Games page:

Game Showcase Page:

Members Page:

Other Technical Updates

• Added the necessary imports for react-social-icons where social media links are displayed. (client/src/components/main/MemberProfile.tsxR4, client/src/pages/games/[id].tsxR4)
• Ensured the backend migration for the new SocialMedia model is included.
• Updated backend imports to include the new model.

Change Form

Fill this up (NA if not available). If a certain criteria is not met, can you please give a reason.

• The pull request title has an issue number
• The change works by "Smoke testing" or quick testing
• The change has tests
• The change has documentation

Other Information

[Is there anything in particular in the review that I should be aware of?]

[laurenpudz]

Could you please add screenshots of any UI changes :)

[bilibilistack]

Could you please add screenshots of any UI changes :)

Hi~ I just added the screenshots for the contributors/ members part on the pages. Please have a check and test it !~~

[SafetyInObscurity]

Very good job! This is ready for merging except that you've made the socialmediaName field unnecessary (which is a good thing). Before merging we should remove the field from the frontend and backend to simplify things.

[bilibilistack]

Very good job! This is ready for merging except that you've made the socialmediaName field unnecessary (which is a good thing). Before merging we should remove the field from the frontend and backend to simplify things.

Do you mean socialmediausername instead? The field socialmedianame is used to identify the platform (github, facebook etc.) so that we could display different platform icons. If we remove this field, we would not be able to display these corresponding icons.

[SafetyInObscurity]

Do you mean socialmediausername instead? The field socialmedianame is used to identify the platform (github, facebook etc.) so that we could display different platform icons. If we remove this field, we would not be able to display these corresponding icons.

According to how the frontend is structured, the socialMediaName isn't used to identify the platform, it's automatically derived from the link.

[bilibilistack]

Do you mean socialmediausername instead? The field socialmedianame is used to identify the platform (github, facebook etc.) so that we could display different platform icons. If we remove this field, we would not be able to display these corresponding icons.

According to how the frontend is structured, the socialMediaName isn't used to identify the platform, it's automatically derived from the link.

You are absolutely right, the react-social-icons will sniff the platform URL instead of we manually assign the platform logo. I will do the requested changes shortly.