Fixed share page. Updated data tables to be responsive.

src/app/(main)/settings/teams/TeamsTable.js

@@ -3,16 +3,17 @@ import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 import { ROLES } from 'lib/constants';
 import Link from 'next/link';
-import { Button, GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
+import { Button, GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
 import TeamDeleteButton from './TeamDeleteButton';
 import TeamLeaveButton from './TeamLeaveButton';
 
 export function TeamsTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
+  const breakpoint = useBreakpoint();
 
   return (
-    <GridTable data={data}>
+    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
       <GridColumn name="owner" label={formatMessage(labels.owner)}>
         {row => row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username}

src/app/(main)/settings/users/UsersTable.js

@@ -1,4 +1,4 @@
-import { Button, Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
+import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
 import { formatDistance } from 'date-fns';
 import Link from 'next/link';
 import { ROLES } from 'lib/constants';
@@ -9,22 +9,19 @@ import UserDeleteButton from './UserDeleteButton';
 export function UsersTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
   const { dateLocale } = useLocale();
+  const breakpoint = useBreakpoint();
 
   return (
-    <GridTable data={data}>
-      <GridColumn
-        name="username"
-        label={formatMessage(labels.username)}
-        width={'minmax(200px, 2fr)'}
-      />
-      <GridColumn name="role" label={formatMessage(labels.role)}>
+    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
+      <GridColumn name="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} />
+      <GridColumn name="role" label={formatMessage(labels.role)} width={'120px'}>
         {row =>
           formatMessage(
             labels[Object.keys(ROLES).find(key => ROLES[key] === row.role)] || labels.unknown,
           )
         }
       </GridColumn>
-      <GridColumn name="created" label={formatMessage(labels.created)}>
+      <GridColumn name="created" label={formatMessage(labels.created)} width={'100px'}>
         {row =>
           formatDistance(new Date(row.createdAt), new Date(), {
             addSuffix: true,

src/app/(main)/settings/websites/WebsitesDataTable.tsx

@@ -6,7 +6,6 @@ import useApi from 'components/hooks/useApi';
 import DataTable from 'components/common/DataTable';
 import useFilterQuery from 'components/hooks/useFilterQuery';
 import useCache from 'store/cache';
-import { useBreakpoint } from 'react-basics';
 
 export interface WebsitesDataTableProps {
   allowEdit?: boolean;
@@ -25,7 +24,7 @@ function useWebsites({ includeTeams, onlyTeams }) {
 
   return useFilterQuery(
     ['websites', { includeTeams, onlyTeams, modified }],
-    params => {
+    (params: any) => {
       return get(`/users/${user?.id}/websites`, {
         includeTeams,
         onlyTeams,
@@ -46,7 +45,6 @@ export function WebsitesDataTable({
   children,
 }: WebsitesDataTableProps) {
   const queryResult = useWebsites({ includeTeams, onlyTeams });
-  const breakpoint = useBreakpoint();
 
   return (
     <DataTable queryResult={queryResult}>
@@ -57,7 +55,6 @@ export function WebsitesDataTable({
           showActions={showActions}
           allowEdit={allowEdit}
           allowView={allowView}
-          cardMode={['xs', 'sm', 'md'].includes(breakpoint)}
         >
           {children}
         </WebsitesTable>

src/app/(main)/settings/websites/WebsitesTable.js

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { Button, Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
+import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import useUser from 'components/hooks/useUser';
 
@@ -9,14 +9,14 @@ export function WebsitesTable({
   showActions,
   allowEdit,
   allowView,
-  cardMode,
   children,
 }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
+  const breakpoint = useBreakpoint();
 
   return (
-    <GridTable data={data} cardMode={cardMode}>
+    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
       <GridColumn name="domain" label={formatMessage(labels.domain)} />
       {showTeam && (

src/app/share/[...id]/Footer.js

@@ -1,3 +1,4 @@
+'use client';
 import { CURRENT_VERSION, HOMEPAGE_URL } from 'lib/constants';
 import styles from './Footer.module.css';
 

src/app/share/[...id]/Footer.module.css

@@ -1,10 +1,10 @@
 .footer {
   display: flex;
   flex-direction: row;
+  align-items: center;
   justify-content: flex-end;
   font-size: var(--font-size-sm);
-  line-height: 30px;
-  margin: 40px 0;
+  height: 100px;
 }
 
 .footer a {

src/app/share/[...id]/Header.js

@@ -1,3 +1,4 @@
+'use client';
 import { Icon, Text } from 'react-basics';
 import Link from 'next/link';
 import LanguageButton from 'components/input/LanguageButton';

src/app/share/[...id]/Header.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   width: 100%;
   height: 100px;
 }
@@ -38,10 +39,3 @@
     min-width: 100%;
   }
 }
-
-@media only screen and (max-width: 768px) {
-  .buttons,
-  .links {
-    display: none;
-  }
-}

src/app/share/[...id]/Share.js

@@ -1,13 +1,25 @@
 'use client';
-import WebsiteDetails from '../../(main)/websites/[id]/WebsiteDetails';
+import WebsiteDetails from 'app/(main)/websites/[id]/WebsiteDetails';
 import useShareToken from 'components/hooks/useShareToken';
+import styles from './Share.module.css';
+import Page from 'components/layout/Page';
+import Header from './Header';
+import Footer from './Footer';
 
-export default function ({ shareId }) {
-  const shareToken = useShareToken(shareId);
+export default function Share({ shareId }) {
+  const { shareToken, isLoading } = useShareToken(shareId);
 
-  if (!shareToken) {
+  if (isLoading || !shareToken) {
     return null;
   }
 
-  return <WebsiteDetails websiteId={shareToken.websiteId} />;
+  return (
+    <div className={styles.container}>
+      <Page>
+        <Header />
+        <WebsiteDetails websiteId={shareToken.websiteId} />
+        <Footer />
+      </Page>
+    </div>
+  );
 }

src/app/share/[...id]/Share.module.css

@@ -0,0 +1,4 @@
+.container {
+  flex: 1;
+  min-height: calc(100vh - 200px);
+}

src/app/share/[...id]/page.tsx

@@ -1,5 +1,5 @@
 import Share from './Share';
 
 export default function ({ params: { id } }) {
-  return <Share shareId={id} />;
+  return <Share shareId={id[0]} />;
 }

src/components/common/DataTable.module.css

@@ -30,6 +30,9 @@
   min-height: 70px;
   align-items: center;
   min-width: min-content;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .body > div > div > div {

src/components/hooks/useShareToken.js

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import useStore, { setShareToken } from 'store/app';
 import useApi from './useApi';
 
@@ -6,23 +5,16 @@ const selector = state => state.shareToken;
 
 export function useShareToken(shareId) {
   const shareToken = useStore(selector);
-  const { get } = useApi();
+  const { get, useQuery } = useApi();
+  const { isLoading, error } = useQuery(['share', shareId], async () => {
+    const data = await get(`/share/${shareId}`);
 
-  async function loadToken(id) {
-    const data = await get(`/share/${id}`);
+    setShareToken(data);
 
-    if (data) {
-      setShareToken(data);
-    }
-  }
+    return data;
+  });
 
-  useEffect(() => {
-    if (shareId) {
-      loadToken(shareId);
-    }
-  }, [shareId]);
-
-  return shareToken;
+  return { shareToken, isLoading, error };
 }
 
 export default useShareToken;

src/components/input/LanguageButton.module.css

@@ -1,7 +1,6 @@
 .menu {
-  display: flex;
-  flex-flow: row wrap;
-  min-width: 640px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
   padding: 10px;
   background: var(--base50);
   z-index: var(--z-index-popup);
@@ -14,7 +13,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-width: calc(100% / 3);
+  min-width: 200px;
   border-radius: 5px;
   padding: 5px 10px;
 }
@@ -32,3 +31,15 @@
 .icon {
   color: var(--primary400);
 }
+
+@media screen and (max-width: 992px) {
+  .menu {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .menu {
+    transform: translateX(40px);
+  }
+}

src/components/layout/Page.module.css

@@ -3,6 +3,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  width: 100%;
   max-width: 1320px;
   min-height: calc(100vh - 60px);
   margin: 0 auto;

src/pages/api/auth/login.ts

@@ -15,6 +15,7 @@ import {
 } from 'next-basics';
 import { getUserByUsername } from 'queries';
 import * as yup from 'yup';
+import { ROLES } from 'lib/constants';
 
 const log = debug('umami:auth');
 
@@ -62,7 +63,7 @@ export default async (
 
       return ok(res, {
         token,
-        user: { id, username, role, createdAt },
+        user: { id, username, role, createdAt, isAdmin: role === ROLES.admin },
       });
     }
 

src/pages/api/users/index.ts

@@ -7,6 +7,7 @@ import { pageInfo } from 'lib/schema';
 import { NextApiResponse } from 'next';
 import { badRequest, hashPassword, methodNotAllowed, ok, unauthorized } from 'next-basics';
 import { createUser, getUserByUsername, getUsers } from 'queries';
+import * as yup from 'yup';
 
 export interface UsersRequestQuery extends SearchFilter {}
 export interface UsersRequestBody {
@@ -16,7 +17,6 @@ export interface UsersRequestBody {
   role: Role;
 }
 
-import * as yup from 'yup';
 const schema = {
   GET: yup.object().shape({
     ...pageInfo,