import useSWR from 'swr' import { DashboardProps } from "../common/dashboard-props"; import React, { useState, SetStateAction, Dispatch } from "react"; import { useAsyncEffect } from "use-async-effect"; import { Auth, API, Storage } from "aws-amplify"; import { callGraphQLWithSimpleInput, callGraphQLSimpleQuery } from "../common/common-types"; import { userInfoByRegStatus } from "../src/graphql/queries"; import { deleteuser } from "../src/graphql/mutations"; import { DeleteuserMutation, UserInfo, UserInfoByRegStatusQuery } from "../src/API"; import { GraphQLResult, GRAPHQL_AUTH_MODE } from "@aws-amplify/api"; import { ArrowLeft, ArrowRight, ArrowRightSquareFill, ArrowLeftSquareFill, Clipboard } from 'react-bootstrap-icons'; import Image from 'next/image'; import axios from 'axios'; interface BrowseUsersProps { selectedUser: UserInfo, userList: UserInfo[], fetchState: string, regStatusFilter: string, } interface BrowseUsersPropsWithStateInfo { props: BrowseUsersProps, setState: Dispatch>, } interface UserRowWithStateInfo { currentUser: UserInfo, props: BrowseUsersProps, setState: Dispatch>, } async function deleteUser(uInfo: UserInfo, state: BrowseUsersProps, setState: Dispatch>) { const variables = {userInfoAsJson: JSON.stringify(uInfo)}; const deleteUserResponse = await callGraphQLSimpleQuery( { query: deleteuser, authMode: GRAPHQL_AUTH_MODE.AMAZON_COGNITO_USER_POOLS, variables: variables, } ); console.log(deleteUserResponse); setState({ userList: [] as UserInfo[], selectedUser: {} as UserInfo, fetchState: 'filterChanged', regStatusFilter: state.regStatusFilter }) } async function fetchUsers(regStatusFilter: string = 'done'): Promise { let input = { companyid: 'Amazon', registrationstatus: regStatusFilter == 'done' ? {eq: 'done'} : {beginsWith: 'error-'}, limit: 12, }; // https://dev.to/rmuhlfeldner/how-to-use-an-aws-amplify-graphql-api-with-a-react-typescript-frontend-2g79 const { data } = await callGraphQLWithSimpleInput( { query: userInfoByRegStatus, authMode: GRAPHQL_AUTH_MODE.AMAZON_COGNITO_USER_POOLS, variables: input } ); return data?.userInfoByRegStatus?.items as UserInfo[]; } const UserDetail = (propsWithStateInfo: BrowseUsersPropsWithStateInfo) => { const uInfo = propsWithStateInfo.props.selectedUser; const [state, setState] = useState({imgLoaded: false, baseUrl: '', signedUrl: ''}); // reset if(uInfo && uInfo.faceimage && state.imgLoaded && state.baseUrl != uInfo.faceimage) { setState({imgLoaded: false, baseUrl: '', signedUrl: ''}); } useAsyncEffect(async isMounted => { if(uInfo && uInfo.faceimage && (!state.imgLoaded || state.baseUrl != uInfo.faceimage)) { const signedURL = await Storage.get(uInfo.faceimage.replace("public/", "")) as string; if (!isMounted()) return; setState({imgLoaded: true, signedUrl: signedURL, baseUrl: uInfo.faceimage}); } }); if (!uInfo || !uInfo.userid) { return (
); } else { return ( ); } } const UserTypeTabs = (propsWithStateInfo: BrowseUsersPropsWithStateInfo) => { const props = propsWithStateInfo.props; const setState = propsWithStateInfo.setState; return (
) } const UserEntry = (uRowWithStateInfo: UserRowWithStateInfo) => { const uInfo = uRowWithStateInfo.currentUser; const [state, setState] = useState({imgLoaded: false, signedUrl: ''}); useAsyncEffect(async isMounted => { if(!state.imgLoaded && uInfo && uInfo.faceimage) { const signedURL = await Storage.get(uInfo.faceimage.replace("public/", "")) as string; if (!isMounted()) return; setState({imgLoaded: true, signedUrl: signedURL}); } }); return ( uRowWithStateInfo.setState({userList: uRowWithStateInfo.props.userList, selectedUser: uInfo, fetchState: uRowWithStateInfo.props.fetchState, regStatusFilter: uRowWithStateInfo.props.regStatusFilter})} className="list-group-item list-group-item-action" aria-current="true">
{uInfo.firstname + ' ' + uInfo.lastname}
{'User id: ' + uInfo.userid}
{'Face id: ' + uInfo.faceid}
) } const UserList = (propsWithStateInfo: BrowseUsersPropsWithStateInfo) => { const props = propsWithStateInfo.props; return (
{props.userList.map((uInfo, index) => { var userRowWithStateInfo = { currentUser: uInfo, props: props, setState: propsWithStateInfo.setState, }; return ( ); })}
{ props.fetchState === 'postLoad' ? 'No users' : 'Please wait...' }
) } export const BrowseUsers = (dashProps: DashboardProps) => { const [state, setState] = useState({userList: [] as UserInfo[], selectedUser: {} as UserInfo, fetchState: 'initial', regStatusFilter: 'done'} as BrowseUsersProps); useAsyncEffect(async isMounted => { if (state.fetchState == 'initial' || state.fetchState == 'filterChanged') { const userList = await fetchUsers(state.regStatusFilter); if (!isMounted()) return; setState({ userList: userList, selectedUser: {} as UserInfo, fetchState: 'postLoad', regStatusFilter: state.regStatusFilter}); } }); const propsWithStateInfo = { props: state, setState: setState }; return (
); } export default BrowseUsers;