resolved permission error from permissions coming back as string

src/navigation/Router.tsx

@@ -52,6 +52,10 @@ export default function Router(props: Props) {
           {/* Page routes */}
           <Route index element={hello()} />
           <Route path="/teams" element={<Teams/>} />
+          {/* <Route
+            path="/teams/:teamID"
+            element={<Team />}
+          /> */}
           {/* <Route path="blogs" element={<Blogs />} />
           <Route path="contact" element={<Contact />} />
           <Route path="*" element={<NoPage />} /> */}

src/providers/pond/userAPI.tsx

@@ -120,7 +120,21 @@ export default function UserProvider(props: PropsWithChildren<any>) {
     if (scope) partial += "?kind=" + scope.kind + "&key=" + scope.key;
     return new Promise(function(resolve, reject) {
       get(pondURL(partial))
-        .then((response: any) => resolve(response.data))
+        .then((response: any) => {
+          let data = response.data
+          if (Array.isArray(data.permissions)) {
+            data.permissions = data.permissions.map((perm: unknown) => {
+              const mappedPerm = pond.Permission[perm as keyof typeof pond.Permission];
+              return mappedPerm !== undefined ? mappedPerm : null; // Return null for invalid keys
+            }).filter(Boolean); // Optionally filter out any null values
+          } else {
+            console.error("data.permissions is not an array or does not exist");
+            data.permissions = [];
+          }
+          
+          // data.permissions = data.permissions.map((perm: unknown) => pond.Permission[perm as unknown as keyof typeof pond.Permission]);
+          resolve(data)
+        })
         .catch((error: any) => reject(error));
     });
   };

src/teams/TeamActions.tsx

@@ -159,7 +159,7 @@ export default function TeamActions(props: Props) {
           label={label}
           isDialogOpen={openState.removeSelf}
           closeDialogCallback={(removeSelf: boolean) => {
-            console.log(removeSelf)
+            // console.log(removeSelf)
             if (removeSelf) refreshCallback()
             setOpenState({ ...openState, removeSelf: false })
           }}
@@ -168,7 +168,6 @@ export default function TeamActions(props: Props) {
     );
   };
 
-  // console.log(permissions)
   const canWrite = permissions.includes(pond.Permission.PERMISSION_WRITE);
   return (
     <React.Fragment>

src/teams/TeamList.tsx

@@ -28,10 +28,10 @@ import PrevIcon from "@mui/icons-material/NavigateBefore";
 import LastIcon from "@mui/icons-material/SkipNext";
 import FirstIcon from "@mui/icons-material/SkipPrevious";
 import TeamSettings from "./TeamSettings";
-import { Add, AddBox, AddOutlined } from "@mui/icons-material";
+import { AddBox } from "@mui/icons-material";
 import { cloneDeep } from "lodash";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
-import { makeStyles, styled } from "@mui/styles";
+import { makeStyles } from "@mui/styles";
 import TeamActions from "./TeamActions";
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -76,9 +76,7 @@ const limits = [
   }
 ];
 
-interface Props {}
+export default function TeamList() {
-
-export default function TeamList(props: Props) {
   const classes = useStyles();
   const [teams, setTeams] = useState<pond.Team[]>([]);
   const teamAPI = useTeamAPI();
@@ -98,22 +96,6 @@ export default function TeamList(props: Props) {
   const [userId, setUserId] = useState<string | undefined>(undefined);
   const [isUser, setIsUser] = useState<boolean>(true);
 
-  // const ColorAdd = styled(Add)((theme: Theme) => ({
-  //   color: theme.palette.getContrastText(theme.palette.primary.main),
-  //   backgroundColor: theme.palette.primary.main,
-  //   marginTop: 'auto',
-  //   marginBottom: 'auto',
-  //   borderRadius: '4px',
-  //   '&:hover': {
-  //     backgroundColor: theme.palette.primary.light,
-  //     cursor: 'pointer',
-  //   },
-  //   '&:disabled': {
-  //     backgroundColor: 'rgba(0,0,0,0)',
-  //     color: theme.palette.getContrastText(theme.palette.primary.main),
-  //   },
-  // }));
-
   useEffect(() => {
     if (as.includes("auth0")) setAsUser(as);
   }, [as]);
@@ -130,6 +112,13 @@ export default function TeamList(props: Props) {
     setIsUser(userId === asUser);
   }, [userId, asUser]);
 
+  // Convert string array to valid Permission[] array
+  // const convertToPermissions = (permissions: any[]): pond.Permission[] => {
+  //   return permissions
+  //     .map(p => p as any as pond.Permission) // Type assertion to treat strings as Permission
+  //     .filter(p => Object.entries(pond.Permission).includes(p)); // Filter to ensure valid Permission values
+  // };
+
   const loadTeams = useCallback(() => {
     setLoading(true);
     let newTeamPerms: pond.Permission[][] = [];
@@ -145,6 +134,16 @@ export default function TeamList(props: Props) {
             userAPI
               .getUser(u, teamScope(team.settings?.key))
               .then(resp => {
+                // let permissions: pond.Permission[] = resp.permissions.map(perm => pond.Permission[perm as unknown as keyof typeof pond.Permission]);
+                // console.log(resp.permissions)
+                // console.log(typeof(resp.permissions))
+                resp.permissions.forEach(p => { 
+                  // console.log('Value:', p, 'Type:', typeof p); 
+                }); 
+                // permissions.forEach(p => { 
+                  // console.log('Value:', p, 'Type:', typeof p); 
+                // }); 
+                // console.log('Expected Value:', pond.Permission.PERMISSION_WRITE, 'Type:', typeof pond.Permission.PERMISSION_WRITE); 
                 newTeamPerms[index] = resp.permissions;
                 newTeamPrefs[index] = resp.preferences;
               })
@@ -183,7 +182,7 @@ export default function TeamList(props: Props) {
                 <ListItemAvatar>
                   <Avatar
                     onClick={() => {
-                      if (team.settings) history("teams/" + team.settings.key);
+                      if (team.settings) history(team.settings.key);
                     }}
                     src={team.settings?.avatar}
                     alt=""
@@ -195,7 +194,7 @@ export default function TeamList(props: Props) {
                     <div
                       className={classes.clickable}
                       onClick={() => {
-                        if (team.settings) history("teams/" + team.settings.key);
+                        if (team.settings) history(team.settings.key);
                       }}>
                       {team.settings?.name}
                     </div>
@@ -219,7 +218,6 @@ export default function TeamList(props: Props) {
                       if (preferences) {
                         let newTeamPrefs = cloneDeep(teamPrefs);
                         newTeamPrefs[index].notify = !newTeamPrefs[index].notify;
-                        console.log(newTeamPrefs[index]);
                         teamAPI
                           .updatePreferences(
                             Team.create(team).key(),
@@ -227,7 +225,7 @@ export default function TeamList(props: Props) {
                             getContextKeys(),
                             getContextTypes()
                           )
-                          .then(resp => {
+                          .then(() => {
                             setTeamPrefs(newTeamPrefs);
                           });
                         // setTeamPrefs(newTeamPrefs)