import React, { useEffect, useState } from 'react'; import { Helmet } from 'react-helmet'; import { Server } from '@/api/server/getServer'; import { ApplicationStore } from '@/state'; import getServers from '@/api/getServers'; import ServerRow from '@/components/dashboard/ServerRow'; import Spinner from '@/components/elements/Spinner'; import PageContentBlock from '@/components/elements/PageContentBlock'; import useFlash from '@/plugins/useFlash'; import { useStoreState } from 'easy-peasy'; import { usePersistedState } from '@/plugins/usePersistedState'; import Switch from '@/components/elements/Switch'; import tw from 'twin.macro'; import useSWR from 'swr'; import { PaginatedResult } from '@/api/http'; import Pagination from '@/components/elements/Pagination'; export default () => { const { clearFlashes, clearAndAddHttpError } = useFlash(); const [ page, setPage ] = useState(1); const { rootAdmin } = useStoreState(state => state.user.data!); const [ showOnlyAdmin, setShowOnlyAdmin ] = usePersistedState('show_all_servers', false); const name = useStoreState((state: ApplicationStore) => state.settings.data!.name); const { data: servers, error } = useSWR>( [ '/api/client/servers', showOnlyAdmin, page ], () => getServers({ onlyAdmin: showOnlyAdmin, page }), ); useEffect(() => { if (error) clearAndAddHttpError({ key: 'dashboard', error }); if (!error) clearFlashes('dashboard'); }, [ error ]); return ( {name} | Dashboard {rootAdmin &&

{showOnlyAdmin ? 'Showing other\'s servers' : 'Showing your servers'}

setShowOnlyAdmin(s => !s)} />
} {!servers ? : {({ items }) => ( items.length > 0 ? items.map((server, index) => ( 0 ? tw`mt-2` : undefined} /> )) :

{showOnlyAdmin ? 'There are no other servers to display.' : 'There are no servers associated with your account.' }

)}
}
); };