use uuid

components/pages/DashboardEdit.js

@@ -24,7 +24,7 @@ export default function DashboardEdit({ websites }) {
   const ordered = useMemo(
     () =>
       websites
-        .map(website => ({ ...website, order: order.indexOf(website.websiteUuid) }))
+        .map(website => ({ ...website, order: order.indexOf(website.id) }))
         .sort(firstBy('order')),
     [websites, order],
   );
@@ -36,7 +36,7 @@ export default function DashboardEdit({ websites }) {
     const [removed] = orderedWebsites.splice(source.index, 1);
     orderedWebsites.splice(destination.index, 0, removed);
 
-    setOrder(orderedWebsites.map(website => website?.websiteUuid || 0));
+    setOrder(orderedWebsites.map(website => website?.id || 0));
   }
 
   function handleSave() {
@@ -76,12 +76,8 @@ export default function DashboardEdit({ websites }) {
                 ref={provided.innerRef}
                 style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
               >
-                {ordered.map(({ websiteUuid, name, domain }, index) => (
-                  <Draggable
-                    key={websiteUuid}
-                    draggableId={`${dragId}-${websiteUuid}`}
-                    index={index}
-                  >
+                {ordered.map(({ id, name, domain }, index) => (
+                  <Draggable key={id} draggableId={`${dragId}-${id}`} index={index}>
                     {(provided, snapshot) => (
                       <div
                         ref={provided.innerRef}

components/pages/RealtimeDashboard.js

@@ -32,7 +32,7 @@ export default function RealtimeDashboard() {
   const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
   const [data, setData] = useState();
-  const [websiteUuid, setWebsiteUuid] = useState(null);
+  const [websiteId, setWebsiteId] = useState(null);
   const { data: init, loading } = useFetch('/realtime/init');
   const { data: updates } = useFetch('/realtime/update', {
     params: { start_at: data?.timestamp },
@@ -50,8 +50,8 @@ export default function RealtimeDashboard() {
     if (data) {
       const { pageviews, sessions, events } = data;
 
-      if (websiteUuid) {
-        const { id } = init.websites.find(n => n.websiteUuid === websiteUuid);
+      if (websiteId) {
+        const { id } = init.websites.find(n => n.id === websiteId);
         return {
           pageviews: filterWebsite(pageviews, id),
           sessions: filterWebsite(sessions, id),
@@ -61,7 +61,7 @@ export default function RealtimeDashboard() {
     }
 
     return data;
-  }, [data, websiteUuid]);
+  }, [data, websiteId]);
 
   const countries = useMemo(() => {
     if (realtimeData?.sessions) {
@@ -118,9 +118,9 @@ export default function RealtimeDashboard() {
     <Page>
       <RealtimeHeader
         websites={websites}
-        websiteId={websiteUuid}
+        websiteId={websiteId}
         data={{ ...realtimeData, countries }}
-        onSelect={setWebsiteUuid}
+        onSelect={setWebsiteId}
       />
       <div className={styles.chart}>
         <RealtimeChart data={realtimeData} unit="minute" records={REALTIME_RANGE} />
@@ -128,10 +128,10 @@ export default function RealtimeDashboard() {
       <GridLayout>
         <GridRow>
           <GridColumn xs={12} lg={4}>
-            <RealtimeViews websiteId={websiteUuid} data={realtimeData} websites={websites} />
+            <RealtimeViews websiteId={websiteId} data={realtimeData} websites={websites} />
           </GridColumn>
           <GridColumn xs={12} lg={8}>
-            <RealtimeLog websiteId={websiteUuid} data={realtimeData} websites={websites} />
+            <RealtimeLog websiteId={websiteId} data={realtimeData} websites={websites} />
           </GridColumn>
         </GridRow>
         <GridRow>

components/pages/Settings.js

@@ -4,12 +4,12 @@ import { useRouter } from 'next/router';
 import Page from 'components/layout/Page';
 import MenuLayout from 'components/layout/MenuLayout';
 import WebsiteSettings from 'components/settings/WebsiteSettings';
-import AccountSettings from 'components/settings/AccountSettings';
+import UserSettings from 'components/settings/UserSettings';
 import ProfileSettings from 'components/settings/ProfileSettings';
 import useUser from 'hooks/useUser';
 
 const WEBSITES = '/settings';
-const ACCOUNTS = '/settings/accounts';
+const ACCOUNTS = '/settings/users';
 const PROFILE = '/settings/profile';
 
 export default function Settings() {
@@ -28,7 +28,7 @@ export default function Settings() {
       value: WEBSITES,
     },
     {
-      label: <FormattedMessage id="label.accounts" defaultMessage="Accounts" />,
+      label: <FormattedMessage id="label.users" defaultMessage="Users" />,
       value: ACCOUNTS,
       hidden: !user?.isAdmin,
     },
@@ -42,7 +42,7 @@ export default function Settings() {
     <Page>
       <MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}>
         {pathname === WEBSITES && <WebsiteSettings />}
-        {pathname === ACCOUNTS && <AccountSettings />}
+        {pathname === ACCOUNTS && <UserSettings />}
         {pathname === PROFILE && <ProfileSettings />}
       </MenuLayout>
     </Page>

components/pages/TestConsole.js

@@ -24,9 +24,9 @@ export default function TestConsole() {
     return null;
   }
 
-  const options = data.map(({ name, websiteUuid }) => ({ label: name, value: websiteUuid }));
-  const website = data.find(({ websiteUuid }) => websiteId === websiteUuid);
-  const selectedValue = options.find(({ value }) => value === website?.websiteUuid)?.value;
+  const options = data.map(({ name, id }) => ({ label: name, value: id }));
+  const website = data.find(({ id }) => websiteId === id);
+  const selectedValue = options.find(({ value }) => value === website?.id)?.value;
 
   function handleSelect(value) {
     router.push(`/console/${value}`);
@@ -46,7 +46,7 @@ export default function TestConsole() {
           <script
             async
             defer
-            data-website-id={website.websiteUuid}
+            data-website-id={website.id}
             src={`${basePath}/umami.js`}
             data-cache="true"
           />
@@ -104,13 +104,13 @@ export default function TestConsole() {
           <div className="row">
             <div className="col-12">
               <WebsiteChart
-                websiteId={website.websiteUuid}
+                websiteId={website.id}
                 title={website.name}
                 domain={website.domain}
                 showLink
               />
               <PageHeader>Events</PageHeader>
-              <EventsChart websiteId={website.websiteUuid} />
+              <EventsChart websiteId={website.id} />
             </div>
           </div>
         </>

components/pages/WebsiteList.js

@@ -27,7 +27,7 @@ export default function WebsiteList({ websites, showCharts, limit }) {
   const ordered = useMemo(
     () =>
       websites
-        .map(website => ({ ...website, order: websiteOrder.indexOf(website.websiteUuid) || 0 }))
+        .map(website => ({ ...website, order: websiteOrder.indexOf(website.id) || 0 }))
         .sort(firstBy('order')),
     [websites, websiteOrder],
   );
@@ -46,11 +46,11 @@ export default function WebsiteList({ websites, showCharts, limit }) {
 
   return (
     <div>
-      {ordered.map(({ websiteUuid, name, domain }, index) =>
+      {ordered.map(({ id, name, domain }, index) =>
         index < limit ? (
-          <div key={websiteUuid} className={styles.website}>
+          <div key={id} className={styles.website}>
             <WebsiteChart
-              websiteId={websiteUuid}
+              websiteId={id}
               title={name}
               domain={domain}
               showChart={showCharts}