Implement profile page view

frontend/src/components/Snowflake.tsx

@@ -4,6 +4,7 @@ import {Redirect, Route, Switch} from "react-router-dom";
 import FeedPage from "./feed/FeedPage";
 import styles from './Snowflake.module.css';
 import OneOnOnesPage from "./one-on-ones/OneOnOnesPage";
+import ProfilePage from "./profile/ProfilePage";
 
 export default function Snowflake() {
   return (
@@ -16,6 +17,7 @@ export default function Snowflake() {
           </Route>
           <Route path="/feed" component={FeedPage}/>
           <Route path="/1-on-1s" component={OneOnOnesPage}/>
+          <Route path="/profile/:username" component={ProfilePage}/>
         </Switch>
       </div>
     </>

frontend/src/components/UserInfo.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import {User} from "../lib/auth";
+import {Link} from "react-router-dom";
+
+export default function UserInfo(props: User) {
+  const {name, profilePic, username, designation, teamName} = props;
+  return (
+    <div className="box block">
+      <div className="header pb-0 p-4 has-text-centered">
+        <figure className="avatar m-auto image mb-3 is-128x128">
+          <img alt={name}
+               title={name} className="is-rounded" src={profilePic}/>
+        </figure>
+        <h1 className="is-size-4">
+          <Link to={`/profile/${username}`}>
+            {name}
+          </Link>
+        </h1>
+        <p>
+          {designation} @ {teamName}
+        </p>
+      </div>
+      <hr/>
+      <div className="block summary pt-0 p-4 is-flex is-justify-content-space-around">
+        <div className="is-flex is-flex-direction-column is-align-items-center">
+                    <span className="given-count has-text-weight-bold is-size-4">
+                      {/*{{appreciations_given}}*/}
+                    </span>
+          <span className="is-uppercase">Given</span>
+        </div>
+        <div className="is-flex is-flex-direction-column is-align-items-center">
+                    <span className="received-count has-text-weight-bold is-size-4">
+                      {/*{{appreciations_received}}*/}
+                    </span>
+          <span className="is-uppercase">Received</span>
+        </div>
+      </div>
+    </div>);
+}

frontend/src/components/feed/CurrentUserInfo.tsx

@@ -1,41 +1,8 @@
 import {useAuth} from "../../hooks/use-auth";
-import {Link} from "react-router-dom";
 import React from "react";
+import UserInfo from "../UserInfo";
 
 export default function CurrentUserInfo() {
-  const auth = useAuth();
-  const {name, profilePic: avatar, username, designation, teamName} = auth.user!;
-
-  return (
-    <div className="box block">
-      <div className="header pb-0 p-4 has-text-centered">
-        <figure className="avatar m-auto image mb-3 is-128x128">
-          <img alt={name}
-               title={name} className="is-rounded" src={avatar}/>
-        </figure>
-        <h1 className="is-size-4">
-          <Link to={`/profile/${username}`}>
-            {name}
-          </Link>
-        </h1>
-        <p>
-          {designation} @ {teamName}
-        </p>
-      </div>
-      <hr/>
-      <div className="block summary pt-0 p-4 is-flex is-justify-content-space-around">
-        <div className="is-flex is-flex-direction-column is-align-items-center">
-                    <span className="given-count has-text-weight-bold is-size-4">
-                      {/*{{appreciations_given}}*/}
-                    </span>
-          <span className="is-uppercase">Given</span>
-        </div>
-        <div className="is-flex is-flex-direction-column is-align-items-center">
-                    <span className="received-count has-text-weight-bold is-size-4">
-                      {/*{{appreciations_received}}*/}
-                    </span>
-          <span className="is-uppercase">Received</span>
-        </div>
-      </div>
-    </div>);
+  const {user} = useAuth();
+  return user ? <UserInfo {...user} /> : <span>Logged out</span>;
 }

frontend/src/components/profile/ProfilePage.module.css

@@ -0,0 +1,3 @@
+.container {
+  width: 50rem;
+}

frontend/src/components/profile/ProfilePage.tsx

@@ -0,0 +1,81 @@
+import React, {useCallback} from "react";
+import {Link, Route, Switch, useParams, useRouteMatch} from "react-router-dom";
+import UserInfo from "../UserInfo";
+import {useAsync} from "../../hooks/use-async";
+import {userByUsername} from "../../lib/api";
+import Loading from "../Loading";
+import styles from './ProfilePage.module.css';
+
+type ProfilePageRouteParams = {
+  username: string
+}
+
+type TabItemProps = React.ComponentPropsWithoutRef<any> & {
+  path: string
+}
+
+function TabItem({path, children}: TabItemProps) {
+  const match = useRouteMatch(path);
+
+  const classes = [];
+
+  if (match && match.path === path && match.isExact) {
+    classes.push('is-active')
+  }
+
+  return (
+    <li className={classes.join(' ')}>{children}</li>
+  )
+}
+
+export default function ProfilePage() {
+  const {username} = useParams<ProfilePageRouteParams>();
+
+  const loadUserInfo = useCallback(() => userByUsername(username), [username]);
+  const {value: user, status} = useAsync(loadUserInfo);
+
+  const {path, url} = useRouteMatch();
+
+  return (
+    <div className={`container ${styles.container}`}>
+      {status === "pending" && <Loading/>}
+      {user && <UserInfo {...user} />}
+      {status === "success" && (
+        <div className="box">
+          <Switch>
+            <div className="tabs is-fullwidth is-medium">
+              <ul>
+                <TabItem path={path}>
+                  <Link to={url}>
+                    <span className="icon">
+                        <ion-icon name="information-circle-outline"/>
+                    </span>
+                    <span>About</span>
+                  </Link>
+                </TabItem>
+                <TabItem path={`${path}/mentions`}>
+                  <Link to={`${url}/mentions`}>
+                    <span className="icon is-medium">
+                        <ion-icon name="at-outline"/>
+                    </span>
+                    <span>Mentions</span>
+                  </Link>
+                </TabItem>
+                <TabItem path={`${path}/personal-objectives`}>
+                  <Link to={`${url}/personal-objectives`}>
+                    <span className="icon is-medium">
+                        <ion-icon name="rocket-outline"/>
+                    </span>
+                    <span>Personal Objectives</span>
+                  </Link>
+                </TabItem>
+              </ul>
+            </div>
+            <Route path={path}/>
+            <Route path={`${path}/mentions`}/>
+            <Route path={`${path}/personal-objectives`}/>
+          </Switch>
+        </div>)}
+    </div>
+  );
+}

frontend/src/lib/api.ts

@@ -51,26 +51,30 @@ async function get<T>(url: string): Promise<T> {
   return response.data
 }
 
-export async function appreciations(): Promise<Appreciation[]> {
+export function appreciations(): Promise<Appreciation[]> {
   return get("/api/appreciations");
 }
 
-export async function notificationCount(): Promise<number> {
+export function notificationCount(): Promise<number> {
   return get("/api/notifications/_count");
 }
 
-export async function appreciationComments(id: number): Promise<Comment[]> {
+export function appreciationComments(id: number): Promise<Comment[]> {
   return get(`/api/appreciations/${id}/comments`);
 }
 
-export async function appreciationLikes(id: number): Promise<Like[]> {
+export function appreciationLikes(id: number): Promise<Like[]> {
   return get(`/api/appreciations/${id}/likes`);
 }
 
-export async function oneOnOnes(): Promise<OneOnOne[]> {
+export function oneOnOnes(): Promise<OneOnOne[]> {
   return get("/api/one_on_ones")
 }
 
-export async function oneOnOneById(id: number | string): Promise<OneOnOneDetail> {
+export function oneOnOneById(id: number | string): Promise<OneOnOneDetail> {
   return get(`/api/one_on_ones/${id}`)
 }
+
+export function userByUsername(username: string): Promise<User> {
+  return get(`/api/users/${username}`)
+}

snowflake/controllers/api/users.py

@@ -1,6 +1,7 @@
 from flask import Blueprint, request
+from flask_login import login_required
 
-from .response import bad_request
+from .response import bad_request, not_found
 from ...models import User
 from ...schemas.user import UserSchema
 
@@ -10,6 +11,7 @@
 
 
 @blueprint.route('/_autocomplete')
+@login_required
 def autocomplete():
     term = request.args.get('q')
 
@@ -19,3 +21,14 @@ def autocomplete():
     users = User.find_by_name_prefix(term)
 
     return schema.jsonify(users, many=True)
+
+
+@blueprint.route('/<username>')
+@login_required
+def get_user_by_id(username):
+    user = User.get_by_username(username)
+
+    if not user:
+        return not_found()
+
+    return schema.jsonify(user)