Connected users with Kratos
This commit is contained in:
Valentino
Maarten de Waard
parent
b0af0de05b
commit
8da937d0c5
22 changed files with 479 additions and 228 deletions
|
|
@ -6,6 +6,7 @@ import { CogIcon, TrashIcon } from '@heroicons/react/outline';
|
|||
import { useUsers } from 'src/services/users';
|
||||
import { Table } from 'src/components';
|
||||
import { ConfirmationModal } from 'src/components/Modal';
|
||||
import { debounce } from 'lodash';
|
||||
import { UserModal } from './components/UserModal';
|
||||
|
||||
const pages = [{ name: 'Users', href: '#', current: true }];
|
||||
|
|
@ -14,37 +15,35 @@ export const Users: React.FC<RouteComponentProps> = () => {
|
|||
const [selectedRowsIds, setSelectedRowsIds] = useState({});
|
||||
const [deleteModal, setDeleteModal] = useState(false);
|
||||
const [configureModal, setConfigureModal] = useState(false);
|
||||
const [userId, setUserId] = useState(null);
|
||||
const [search, setSearch] = useState('');
|
||||
const { loadUsers, users } = useUsers();
|
||||
const { users, loadUsers } = useUsers();
|
||||
|
||||
const handleSearch = useCallback((event: any) => {
|
||||
const handleSearch = (event: any) => {
|
||||
setSearch(event.target.value);
|
||||
}, []);
|
||||
};
|
||||
|
||||
// TODO: Check why it needs any
|
||||
const allUsers: any = users.items;
|
||||
const debouncedSearch = useCallback(debounce(handleSearch, 250), []);
|
||||
|
||||
useEffect(() => {
|
||||
const asyncFc = async () => {
|
||||
try {
|
||||
await loadUsers();
|
||||
} catch {
|
||||
// continue
|
||||
}
|
||||
};
|
||||
loadUsers();
|
||||
|
||||
asyncFc();
|
||||
/* eslint-disable-next-line react-hooks/exhaustive-deps */
|
||||
return () => {
|
||||
debouncedSearch.cancel();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const filterSearch = useMemo(() => {
|
||||
return allUsers.filter((item: any) => item.name?.toLowerCase().includes(search.toLowerCase()));
|
||||
}, [search, allUsers]);
|
||||
return users.filter((item: any) => item.email?.toLowerCase().includes(search.toLowerCase()));
|
||||
}, [search, users]);
|
||||
|
||||
const deleteModalOpen = () => setDeleteModal(true);
|
||||
const deleteModalClose = () => setDeleteModal(false);
|
||||
|
||||
const configureModalOpen = () => setConfigureModal(true);
|
||||
const configureModalOpen = (id: any) => {
|
||||
setUserId(id);
|
||||
setConfigureModal(true);
|
||||
};
|
||||
const configureModalClose = () => setConfigureModal(false);
|
||||
|
||||
const columns: any = React.useMemo(
|
||||
|
|
@ -64,18 +63,15 @@ export const Users: React.FC<RouteComponentProps> = () => {
|
|||
accessor: 'status',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
Header: 'Last Sign-In',
|
||||
accessor: 'last_login',
|
||||
width: 'auto',
|
||||
},
|
||||
{
|
||||
Header: ' ',
|
||||
Cell: () => {
|
||||
Cell: (props: any) => {
|
||||
const { row } = props;
|
||||
|
||||
return (
|
||||
<div className="text-right opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={configureModalOpen}
|
||||
onClick={() => configureModalOpen(row.original.id)}
|
||||
type="button"
|
||||
className="inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
|
||||
>
|
||||
|
|
@ -127,7 +123,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
|
|||
<h1 className="text-3xl leading-6 font-bold text-gray-900">Users</h1>
|
||||
<div className="mt-3 sm:mt-0 sm:ml-4">
|
||||
<button
|
||||
onClick={configureModalOpen}
|
||||
onClick={() => configureModalOpen(null)}
|
||||
type="button"
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-800"
|
||||
>
|
||||
|
|
@ -139,23 +135,6 @@ export const Users: React.FC<RouteComponentProps> = () => {
|
|||
|
||||
<div className="flex justify-between w-100 my-3 items-center mb-5 ">
|
||||
<div className="flex items-center">
|
||||
{/* <div className="mr-3 inline-block shadow-sm">
|
||||
<label htmlFor="location" className="block text-sm font-medium text-gray-700 sr-only">
|
||||
Location
|
||||
</label>
|
||||
<select
|
||||
id="location"
|
||||
name="location"
|
||||
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-200 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"
|
||||
defaultValue="All users"
|
||||
>
|
||||
<option>All users</option>
|
||||
<option>Owner</option>
|
||||
<option>Admins</option>
|
||||
<option>Members</option>
|
||||
</select>
|
||||
</div> */}
|
||||
|
||||
<div className="inline-block">
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 sr-only">
|
||||
Search candidates
|
||||
|
|
@ -171,7 +150,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
|
|||
id="email"
|
||||
className="focus:ring-primary-500 focus:border-primary-500 block w-full rounded-md pl-10 sm:text-sm border-gray-200"
|
||||
placeholder="Search Users"
|
||||
onChange={handleSearch}
|
||||
onChange={debouncedSearch}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -196,7 +175,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
|
|||
<div className="-my-2 sm:-mx-6 lg:-mx-8">
|
||||
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
||||
<div className="shadow border-b border-gray-200 sm:rounded-lg">
|
||||
<Table data={filterSearch} columns={columns} getSelectedRowIds={selectedRows} selectable />
|
||||
<Table data={filterSearch as any} columns={columns} getSelectedRowIds={selectedRows} selectable />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -209,7 +188,7 @@ export const Users: React.FC<RouteComponentProps> = () => {
|
|||
body="Are you sure you want to delete this user? All of your data will be permanently removed. This action cannot be undone."
|
||||
/>
|
||||
|
||||
<UserModal open={configureModal} onClose={configureModalClose} onSave={configureModalClose} />
|
||||
<UserModal open={configureModal} onClose={configureModalClose} userId={userId} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Reference in a new issue