added team model, loading user with team

src/app/UserWrapper.tsx

@@ -10,6 +10,7 @@ import { pond } from "protobuf-ts/pond";
 import NavigationContainer from '../navigation/NavigationContainer'
 import { GlobalState, GlobalStateAction, StateProvider } from '../providers/StateContainer'
 import { User } from '../models/user'
+import { Team } from '../models/team'
 
 const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState => {
   return {
@@ -33,10 +34,12 @@ export default function UserWrapper() {
   const loadUser = useCallback(() => {
     if (hasFetched.current) return;
     setLoading(true)
-    userAPI.getUser(user_id).then(resp => {
-      setUser(resp)
+    userAPI.getUserWithTeam(user_id).then(resp => {
+      console.log(resp.data.team)
+      if (resp.data.user) setUser(resp.data.user)
       setGlobal({
-        user: User.create(resp),
+        user: resp.data.user ? User.create(resp.data.user) : User.create(),
+        team: resp.data.team ? Team.create(resp.data.team) : Team.create(),
         as: "",
         showErrors: false,
         userTeamPermissions: [],

src/models/team.ts

@@ -0,0 +1,70 @@
+import { pond } from "protobuf-ts/pond";
+import { cloneDeep } from "lodash";
+import { or } from "../utils/types";
+
+export class Team {
+  public settings: pond.TeamSettings = pond.TeamSettings.create();
+  public status: pond.TeamStatus = pond.TeamStatus.create();
+  public permissions: pond.Permission[] = [];
+  public preferences: pond.TeamPreferences = pond.TeamPreferences.create();
+
+  public static create(pb?: pond.Team): Team {
+    let my = new Team();
+    if (pb) {
+      my.settings = pond.TeamSettings.fromObject(cloneDeep(or(pb.settings, {})));
+      my.status = pond.TeamStatus.fromObject(cloneDeep(or(pb.status, {})));
+      my.permissions = cloneDeep(pb.permissions);
+      my.preferences = pond.TeamPreferences.fromObject(cloneDeep(or(pb.preferences, {})));
+    }
+    return my;
+  }
+
+  public static any(data: any): Team {
+    return Team.create(pond.Team.fromObject(cloneDeep(data)));
+  }
+
+  public empty(): boolean {
+    return this.key() === "";
+  }
+
+  public key(): string {
+    return this.settings.key;
+  }
+
+  public id(): string {
+    return this.settings.key;
+  }
+
+  public name(): string {
+    return this.settings.name !== "" ? this.settings.name : "Team " + this.settings.key;
+  }
+
+  public static clone(other?: Team): Team {
+    if (other) {
+      return Team.create(
+        pond.Team.fromObject({
+          settings: pond.TeamSettings.fromObject(cloneDeep(or(other.settings, {}))),
+          status: pond.TeamStatus.fromObject(cloneDeep(or(other.status, {})))
+          //permissions: cloneDeep(other.permissions),
+          //preferences: pond.TeamPreferences.fromObject(cloneDeep(or(other.preferences, {})))
+        })
+      );
+    }
+    return Team.create();
+  }
+
+  public protobuf(): pond.Team {
+    return pond.Team.fromObject({
+      settings: this.settings,
+      status: this.status
+    });
+  }
+
+  /*public allowedTo(action: string): boolean {
+    return this.settings.actions.includes(action);
+  }
+
+  public hasFeature(flag: string): boolean {
+    return this.settings.features.includes(flag);
+  }*/
+}

src/providers/StateContainer.tsx

@@ -2,11 +2,12 @@ import { createContext, useContext, useReducer, Dispatch } from "react";
 // import { User } from "../models";
 import { pond } from "protobuf-ts/pond";
 import { User } from "../models/user";
+import { Team } from "../models/team";
 
 export interface GlobalState {
 //   tags: Tag[];
   user: User;
-//   team: Team;
+  team: Team;
   as: string;
 //   firmware: Map<string, Firmware>;
 //   newStructure: boolean;

src/providers/pond/userAPI.tsx

@@ -8,6 +8,9 @@ import { createContext, PropsWithChildren, useContext } from "react";
 // import { AxiosResponse } from "axios";
 import { useHTTP } from "../http";
 import { pondURL } from "./pond";
+import { AxiosResponse } from "axios";
+import { pond } from "protobuf-ts/pond";
+import { User } from "../../models/user";
 
 // export interface ListUsersResponse {
 //   users: User[];
@@ -25,12 +28,12 @@ export interface IUserAPIContext {
 //   listProfiles: () => Promise<pond.UserProfile[]>;
 //   listObjectUsers: (scope: Scope) => Promise<any>;
 //   updateObjectUsers: (scope: Scope, users: pond.IUser[]) => Promise<any>;
-  getUser: (id: string) => Promise<any>;
-  // getUserWithTeam: (
-  //   id: string,
-  //   team?: string,
-  //   scope?: Scope
-  // ) => Promise<AxiosResponse<pond.GetUserWithTeamResponse>>;
+  getUser: (id: string) => Promise<User>;
+  getUserWithTeam: (
+    id: string,
+    team?: string,
+    scope?: any
+  ) => Promise<AxiosResponse<pond.GetUserWithTeamResponse>>;
   // getProfile: (id: string) => Promise<pond.UserProfile>;
   // getUsers: (ids: string[]) => Promise<User[]>;
   // getProfiles: (ids: string[]) => Promise<pond.UserProfile[]>;
@@ -122,26 +125,26 @@ export default function UserProvider(props: PropsWithChildren<any>) {
     });
   };
 
-  // const getUserWithTeam = (
-  //   id: string,
-  //   team?: string,
-  //   scope?: Scope
-  // ): Promise<AxiosResponse<pond.GetUserWithTeamResponse>> => {
-  //   let partial = "/userWithTeam/" + id;
-  //   if (scope) partial += "?kind=" + scope.kind + "&key=" + scope.key;
-  //   if (team) {
-  //     if (partial.includes("?")) {
-  //       partial += "&team=" + team;
-  //     } else {
-  //       partial += "?team=" + team;
-  //     }
-  //   }
-  //   return new Promise(function(resolve, reject) {
-  //     get(pondURL(partial))
-  //       .then((response: any) => resolve(response))
-  //       .catch((error: any) => reject(error));
-  //   });
-  // };
+  const getUserWithTeam = (
+    id: string,
+    team?: string,
+    scope?: any
+  ): Promise<AxiosResponse<pond.GetUserWithTeamResponse>> => {
+    let partial = "/userWithTeam/" + id;
+    if (scope) partial += "?kind=" + scope.kind + "&key=" + scope.key;
+    if (team) {
+      if (partial.includes("?")) {
+        partial += "&team=" + team;
+      } else {
+        partial += "?team=" + team;
+      }
+    }
+    return new Promise(function(resolve, reject) {
+      get(pondURL(partial))
+        .then((response: any) => resolve(response))
+        .catch((error: any) => reject(error));
+    });
+  };
 
   // const getProfile = (id: string): Promise<pond.UserProfile> => {
   //   return new Promise((resolve, reject) => {
@@ -218,7 +221,7 @@ export default function UserProvider(props: PropsWithChildren<any>) {
         // listObjectUsers,
         // updateObjectUsers,
         getUser,
-        // getUserWithTeam,
+        getUserWithTeam,
         // getProfile,
         // getUsers,
         // getProfiles,

src/user/UserMenu.tsx

@@ -1,9 +1,10 @@
-import { Avatar, Button, PaletteColor, Theme, Typography, useTheme } from "@mui/material";
+import { Avatar, Box, Button, PaletteColor, Theme, Typography, useTheme } from "@mui/material";
 import { useGlobalState } from "../providers/StateContainer";
 import { getSecondaryColour, getSignatureAccentColour } from "../services/whiteLabel";
 import { makeStyles } from "@mui/styles";
 import { Person } from "@mui/icons-material";
 import { useEffect } from "react";
+import UserTeamName from "./UserTeamName";
 
 const useStyles = makeStyles((theme: Theme) => ({
   userAvatar: {
@@ -38,7 +39,7 @@ interface Props {
 export default function UserMenu(props: Props) {
 
     const { toggleTheme } = props;
-    const [{ user }] = useGlobalState();
+    const [{ user, team }] = useGlobalState();
     const classes = useStyles();
     const theme = useTheme();
 
@@ -47,6 +48,7 @@ export default function UserMenu(props: Props) {
     const hasAdmin = user.hasFeature ? user.hasFeature("admin") : false;
     const allowedToCopyToken = user.allowedTo("copy-token");
     const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
+    console.log(hasTeams)
     // const hasBilling = user.settings.useTeam
     //   ? userTeamPermissions.includes(pond.Permission.PERMISSION_BILLING)
     //   : true;
@@ -62,17 +64,10 @@ export default function UserMenu(props: Props) {
           aria-haspopup="true"
           // onClick={openUserMenu}
           className={classes.profileButton}>
-          <div style={{ display: "flex", flexDirection: "column" }}>
-            <Typography className={classes.profileName} variant="button">
-              {name}
-            </Typography>
-            {/* {team.settings.name && hasTeams && (
-              <Typography className={classes.profileName} variant="button">
-                ({team.settings.name})
-              </Typography>
-            )} */}
-          </div>
-          <div style={{ marginLeft: theme.spacing(1) }}>
+          <Box style={{ display: "flex", flexDirection: "column" }}>
+            <UserTeamName user={user} team={team} />
+          </Box>
+          <Box style={{ marginLeft: theme.spacing(1) }}>
             {/* {picture && hasTeams ? (
               <div>
                 <UserAvatar
@@ -95,10 +90,10 @@ export default function UserMenu(props: Props) {
               </Avatar>
             ) : ( */}
               <Avatar alt={name} src={picture} className={classes.userAvatar}>
-                {/* <Person /> */}
+                <Person />
               </Avatar>
             {/* )} */}
-          </div>
+          </Box>
         </Button>
     )
 }