Skip to main content

Work In Progress 3

· 2 min read
William Xiao
William Xiao
Developer
Justin Lieu
Justin Lieu
Developer
Matthew Kang
Matthew Kang
Developer
Jacob Zhu
Jacob Zhu
Developer
Kevin Xu
Kevin Xu
Developer

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​

Profile Default Data

We hooked up the state to display on our user profile settings page

User Profile Settings Page (Displaying from Redux Store)​

User Profile Settings Page

Redux Devtools Screenshot of State​

Redux Devtools Screenshot

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!​

Actions.js

Other Goals​

Stay tuned for more updates as we continue to refine and enhance Trek!