69 lines
1.4 KiB
TypeScript
69 lines
1.4 KiB
TypeScript
|
|
import React, { useState, useMemo, useEffect } from 'react';
|
|
import { useApi } from './useApi';
|
|
import './App.css';
|
|
|
|
const Cluster = () => {
|
|
return (
|
|
<div className='Cluster'>cluster</div>
|
|
);
|
|
};
|
|
|
|
type Identity = {
|
|
lastName: string,
|
|
middleName: string,
|
|
firstName: string,
|
|
descriptors: number[],
|
|
id: number
|
|
displayName: string,
|
|
};
|
|
|
|
interface IdentitiesProps {
|
|
identities: Identity[]
|
|
};
|
|
|
|
const Identities = ({ identities } : IdentitiesProps) => {
|
|
const identitiesJSX = useMemo(() =>
|
|
identities.map((identity) => {
|
|
const idPath = String(identity.id % 100).padStart(2, '0');
|
|
return (<img
|
|
key={identity.id}
|
|
alt={identity.id.toString()}
|
|
src={`/faces/${idPath}/${identity.id}.jpg`}/>);
|
|
}
|
|
), [ identities ]);
|
|
|
|
return (
|
|
<div className='Identities'>
|
|
{ identitiesJSX }
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const App = () => {
|
|
const [identities, setIdentities] = useState<Identity[]>([]);
|
|
const { loading, data } = useApi(
|
|
'../api/v1/faces'
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (data && data.length) {
|
|
setIdentities(data as Identity[]);
|
|
}
|
|
}, [data]);
|
|
|
|
return (
|
|
<div className="App">
|
|
<div className="Worksheet">
|
|
{ loading && <div>Loading...</div> }
|
|
{ !loading && <>
|
|
<Cluster/>
|
|
<Identities identities={identities}/>
|
|
</> }
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|