profiles-react-materialize

Client side for storyteller:profiles-server package in React and Materialize CSS. Build on top of socialize:user-profile package.

UNDER DEVELOPMENT

Settings components

• <UserChangeName />
• <UserChangeBio />
• <UserChangeAvatar /> WIP

User profile page

<UserProfile /> Creates a user profile page to display all the information to everyone.

Friendships

socialize:friendships is implemented in this package. <UserFriendsRequests /> serves as a dedicated component to view the friendship requests to the user.

Feed

socialize:feed is implemented in this package to show user a Facebook like feed on their profile page

• <UserFeed userId="userId" />
• <NewFeedPost />

Routes

1//user profiles
2FlowRouter.route("/profile", {
3  name: "profile-personal",
4  triggersEnter: [usersOnly],
5  action: () => {
6    ReactLayout.render(MainLayout, { content: <UserProfile user={Meteor.users.findOne(Meteor.userId())} />,
7     footer: "long"})
8  }
9})
10
11FlowRouter.route("/profile/:username", {
12  name: "profile",
13  action: (params, queryParams) => {
14   //check if user exists
15   if(params.username !== null && ! Meteor.users({username: params.username})){
16     //show 404
17     console.log("User not found!")
18   }
19
20   //if username null, go to the currently logged in user
21   if(params.username === null){
22     if(Meteor.userId()){
23       FlowRouter.go("/profile")
24     } else {
25       //show 404
26       console.log("User not found!")
27     }
28   }
29   ReactLayout.render(MainLayout, { content: <UserProfile user={params.username} />,
30    footer: "long"})
31 }
32})

Loader

The code allows for you to add your own custom loader. Just name the component Loader and it will work.