Work In Progress 3
All members of Trekkers are thrilled to share our third work-in-progress update for Trek.
In Progress 3, we have added Redux to Trek, by thinking of the main type of data we will be storing and about how we would like this data to be “connected” to our components.
Redux
As mentioned in the introduction, we have begun the integration of Redux into our application.
Default Data and Display on Page
Here is the default data that we used to initialize our profile settings reducer.
Profile Default Data
We hooked up the state to display on our user profile settings page
User Profile Settings Page (Displaying from Redux Store)
Redux Devtools Screenshot of State
Our 3 minimum actions
Action #1: addProfileCurrentLocation
This action handles the addition of a "current location" of a user to their profile.
Code:
export const addProfileCurrentLocation = (location: string) => ({
type: ADD_PROFILE_CURRENT_LOCATION,
payload: location
})
Action #2: addProfileInterest and removeProfileInterest
These two actions handles the interests of a user, allowing them to add new interests, and remove old unwanted ones freely.
Code:
export const addProfileInterest = (interest: string[]) => ({
type: ADD_PROFILE_INTEREST,
payload: interest
})
export const removeProfileInterest = (location: string) => ({
type: REMOVE_PROFILE_INTEREST,
payload: interest
})
Action #3: addProfileSocialAccount
This action handles addition of social media account links (Facebook, Instagram, Twitter, YouTube)
Code:
export const addProfileSocialAccount = (accountType: SocialMediaAccounts, url: string) => ({
type: ADD_PROFILE_SOCIAL_ACCOUNT,
payload: { accountType, url }
});
Of course, we also have many other actions and plan to add more as complexity of the project increases!
Other Goals
Stay tuned for more updates as we continue to refine and enhance Trek!
