remove list users (#21)

src/context/index.ts

@@ -55,11 +55,6 @@ export type AppContextType = {
     fetch: (roleName: string) => Promise<boolean>;
     fetchRoles: () => Promise<void>;
   };
-  users: {
-    data: User[] | null;
-    loading: boolean;
-    fetch: () => Promise<User[] | null>;
-  };
   me: {
     data: User | null;
     loading: boolean;

src/pages/admin/index.tsx

@@ -1,6 +1,6 @@
-import { CalendarIcon, ClipboardCopyIcon } from '@heroicons/react/outline';
+import { CalendarIcon } from '@heroicons/react/outline';
 import { useSlashAuth } from '@slashauth/slashauth-react';
-import { useCallback, useContext, useMemo, useRef } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import { PrimaryButton } from '../../common/components/Buttons';
 import { LoggedOut } from '../../common/components/LoggedOut';
 import { NotAuthorized } from '../../common/components/NotAuthorized';
@@ -19,30 +19,16 @@ import TopBar from '../../features/top-bar';
 import { SlashauthEvent } from '../../model/event';
 import adminGradient from '../../common/gradients/admin-gradient.png';
 import { StripedTable } from '../../common/components/table/striped';
-import { shortenAddress } from '../../util/address';
-import { toast } from 'react-hot-toast';
 import { classNames } from '../../util/classnames';
 import { AddFileModalContents } from '../../features/add-file/modal';
 import { Link } from 'react-router-dom';
 
 export const AdminPage = () => {
   const modalContext = useContext(ModalContext);
-  const { events, roles, users, files } = useContext(AppContext);
+  const { events, roles, files } = useContext(AppContext);
 
   const { isAuthenticated } = useSlashAuth();
 
-  const listDivRef = useRef<HTMLDivElement>(null);
-
-  const handleListScroll = useCallback(() => {
-    if (
-      // If has more
-      listDivRef.current &&
-      listDivRef.current.scrollHeight > 0
-    ) {
-      // Fetch more
-    }
-  }, []);
-
   const handleUpload = useCallback(
     async (input: {
       name: string;
@@ -118,49 +104,6 @@ export const AdminPage = () => {
     );
   }, [events]);
 
-  const userContents = useMemo(() => {
-    if (!users.data || users.loading) {
-      return <BeatLoader />;
-    }
-
-    return (
-      <StripedTable
-        columnNames={['Address', 'Nickname', 'Roles', 'Last Accessed']}
-        elements={users.data.map((user) => ({
-          id: user.address,
-          columns: [
-            <div className="flex flex-row items-center space-x-2">
-              <div className="text-sm">{shortenAddress(user.address)}</div>
-              <ClipboardCopyIcon
-                className="w-4 h-4 cursor-pointer"
-                onMouseDown={(e) => e.stopPropagation()}
-                onMouseUp={(e) => e.stopPropagation()}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  navigator.clipboard.writeText(user.address);
-                  toast.success('Copied to clipboard', {
-                    duration: 1000,
-                    id: 'copyable-text-div',
-                  });
-                }}
-              />
-            </div>,
-            <span
-              className={classNames(
-                'text-sm',
-                !user.nickname && 'text-gray-300 italic'
-              )}
-            >
-              {user.nickname || 'No nickname'}
-            </span>,
-            <span>{(user.roles || []).sort().join(', ')}</span>,
-            <span>{new Date(user.dateTime).toLocaleDateString()}</span>,
-          ],
-        }))}
-      />
-    );
-  }, [users.data, users.loading]);
-
   const fileContents = useMemo(() => {
     if (!files.data || files.loading) {
       return <BeatLoader />;
@@ -207,20 +150,6 @@ export const AdminPage = () => {
 
     return (
       <div className="mt-8 divide-y-4 divide-gray-400">
-        <div className="flex flex-col justify-between w-full mb-8">
-          <div className="text-[24px] font-semibold text-left">
-            Track Your App Users
-          </div>
-          <div className="mt-4 overflow-hidden border border-gray-200 rounded-lg">
-            <div
-              ref={listDivRef}
-              className="overflow-hidden overflow-y-auto text-left max-h-96"
-              onScroll={handleListScroll}
-            >
-              {userContents}
-            </div>
-          </div>
-        </div>
         <div className="flex flex-col justify-between w-full pt-8 mt-8">
           <div className="flex items-center justify-between w-full mb-4">
             <div className="text-[24px] font-semibold text-left">
@@ -253,11 +182,9 @@ export const AdminPage = () => {
     eventsContent,
     fileContents,
     handleAddEvent,
-    handleListScroll,
     handleUploadFile,
     isAuthenticated,
     roles.data,
-    userContents,
   ]);
 
   return (

src/providers/app-provider.tsx

@@ -34,11 +34,6 @@ const AppProvider = ({ children }: Props) => {
     [roleName: string]: FetchedData<boolean>;
   }>({});
 
-  const [users, setUsers] = useState<FetchedData<User[]>>({
-    data: undefined,
-    loading: false,
-  });
-
   const [me, setMe] = useState<FetchedData<User>>({
     data: undefined,
     loading: false,
@@ -234,37 +229,6 @@ const AppProvider = ({ children }: Props) => {
       });
     }, [appMetadata, config, getTokens]);
 
-  const fetchUsers = useCallback(async (): Promise<User[] | null> => {
-    if (!isAuthenticated) {
-      return null;
-    }
-    setUsers((existing) => ({
-      ...existing,
-      loading: true,
-    }));
-
-    return getTokens().then((token) => {
-      const api = new API(config, token);
-      return api
-        .getUsers()
-        .then((users) => {
-          setUsers({
-            data: users,
-            loading: false,
-          });
-          return users;
-        })
-        .catch((err) => {
-          console.error('Error fetching users: ', err);
-          setUsers({
-            data: null,
-            loading: false,
-          });
-          return null;
-        });
-    });
-  }, [config, getTokens, isAuthenticated]);
-
   const fetchEvents = useCallback(async (): Promise<
     SlashauthEvent[] | null
   > => {
@@ -506,7 +470,6 @@ const AppProvider = ({ children }: Props) => {
   ) {
     if (roles[RoleNameAdmin].data && isAuthenticated) {
       fetchEvents();
-      fetchUsers();
       listFiles();
     }
     setLastRoleDataAdmin(roles[RoleNameAdmin].data);
@@ -551,10 +514,6 @@ const AppProvider = ({ children }: Props) => {
           fetch: fetchRoleData,
           fetchRoles,
         },
-        users: {
-          ...users,
-          fetch: fetchUsers,
-        },
         me: {
           ...me,
           fetch: fetchMe,