use uuid

components/settings/UserSettings.js

@@ -8,7 +8,7 @@ import Icon from 'components/common/Icon';
 import Table from 'components/common/Table';
 import Modal from 'components/common/Modal';
 import Toast from 'components/common/Toast';
-import AccountEditForm from 'components/forms/AccountEditForm';
+import UserEditForm from 'components/forms/UserEditForm';
 import ButtonLayout from 'components/layout/ButtonLayout';
 import DeleteForm from 'components/forms/DeleteForm';
 import useFetch from 'hooks/useFetch';
@@ -17,21 +17,21 @@ import Plus from 'assets/plus.svg';
 import Trash from 'assets/trash.svg';
 import Check from 'assets/check.svg';
 import LinkIcon from 'assets/external-link.svg';
-import styles from './AccountSettings.module.css';
+import styles from './UserSettings.module.css';
 
-export default function AccountSettings() {
-  const [addAccount, setAddAccount] = useState();
-  const [editAccount, setEditAccount] = useState();
-  const [deleteAccount, setDeleteAccount] = useState();
+export default function UserSettings() {
+  const [addUser, setAddUser] = useState();
+  const [editUser, setEditUser] = useState();
+  const [deleteUser, setDeleteUser] = useState();
   const [saved, setSaved] = useState(0);
   const [message, setMessage] = useState();
-  const { data } = useFetch(`/accounts`, {}, [saved]);
+  const { data } = useFetch(`/users`, {}, [saved]);
 
   const Checkmark = ({ isAdmin }) => (isAdmin ? <Icon icon={<Check />} size="medium" /> : null);
 
   const DashboardLink = row => {
     return (
-      <Link href={`/dashboard/${row.accountUuid}/${row.username}`}>
+      <Link href={`/dashboard/${row.id}/${row.username}`}>
         <a>
           <Icon icon={<LinkIcon />} />
         </a>
@@ -41,11 +41,11 @@ export default function AccountSettings() {
 
   const Buttons = row => (
     <ButtonLayout align="right">
-      <Button icon={<Pen />} size="small" onClick={() => setEditAccount(row)}>
+      <Button icon={<Pen />} size="small" onClick={() => setEditUser(row)}>
         <FormattedMessage id="label.edit" defaultMessage="Edit" />
       </Button>
       {!row.isAdmin && (
-        <Button icon={<Trash />} size="small" onClick={() => setDeleteAccount(row)}>
+        <Button icon={<Trash />} size="small" onClick={() => setDeleteUser(row)}>
           <FormattedMessage id="label.delete" defaultMessage="Delete" />
         </Button>
       )}
@@ -84,9 +84,9 @@ export default function AccountSettings() {
   }
 
   function handleClose() {
-    setEditAccount(null);
-    setAddAccount(null);
-    setDeleteAccount(null);
+    setEditUser(null);
+    setAddUser(null);
+    setDeleteUser(null);
   }
 
   if (!data) {
@@ -97,33 +97,31 @@ export default function AccountSettings() {
     <>
       <PageHeader>
         <div>
-          <FormattedMessage id="label.accounts" defaultMessage="Accounts" />
+          <FormattedMessage id="label.users" defaultMessage="Users" />
         </div>
-        <Button icon={<Plus />} size="small" onClick={() => setAddAccount(true)}>
-          <FormattedMessage id="label.add-account" defaultMessage="Add account" />
+        <Button icon={<Plus />} size="small" onClick={() => setAddUser(true)}>
+          <FormattedMessage id="label.add-user" defaultMessage="Add user" />
         </Button>
       </PageHeader>
       <Table columns={columns} rows={data} />
-      {editAccount && (
-        <Modal title={<FormattedMessage id="label.edit-account" defaultMessage="Edit account" />}>
-          <AccountEditForm
-            values={{ ...editAccount, password: '' }}
+      {editUser && (
+        <Modal title={<FormattedMessage id="label.edit-user" defaultMessage="Edit user" />}>
+          <UserEditForm
+            values={{ ...editUser, password: '' }}
             onSave={handleSave}
             onClose={handleClose}
           />
         </Modal>
       )}
-      {addAccount && (
-        <Modal title={<FormattedMessage id="label.add-account" defaultMessage="Add account" />}>
-          <AccountEditForm onSave={handleSave} onClose={handleClose} />
+      {addUser && (
+        <Modal title={<FormattedMessage id="label.add-user" defaultMessage="Add user" />}>
+          <UserEditForm onSave={handleSave} onClose={handleClose} />
         </Modal>
       )}
-      {deleteAccount && (
-        <Modal
-          title={<FormattedMessage id="label.delete-account" defaultMessage="Delete account" />}
-        >
+      {deleteUser && (
+        <Modal title={<FormattedMessage id="label.delete-user" defaultMessage="Delete user" />}>
           <DeleteForm
-            values={{ type: 'accounts', id: deleteAccount.id, name: deleteAccount.username }}
+            values={{ type: 'users', id: deleteUser.id, name: deleteUser.username }}
             onSave={handleSave}
             onClose={handleClose}
           />

components/settings/WebsiteSettings.js

@@ -46,7 +46,7 @@ export default function WebsiteSettings() {
           icon={<LinkIcon />}
           size="small"
           tooltip={<FormattedMessage id="message.get-share-url" defaultMessage="Get share URL" />}
-          tooltipId={`button-share-${row.websiteUuid}`}
+          tooltipId={`button-share-${row.id}`}
           onClick={() => setShowUrl(row)}
         />
       )}
@@ -56,46 +56,42 @@ export default function WebsiteSettings() {
         tooltip={
           <FormattedMessage id="message.get-tracking-code" defaultMessage="Get tracking code" />
         }
-        tooltipId={`button-code-${row.websiteUuid}`}
+        tooltipId={`button-code-${row.id}`}
         onClick={() => setShowCode(row)}
       />
       <Button
         icon={<Pen />}
         size="small"
         tooltip={<FormattedMessage id="label.edit" defaultMessage="Edit" />}
-        tooltipId={`button-edit-${row.websiteUuid}`}
+        tooltipId={`button-edit-${row.id}`}
         onClick={() => setEditWebsite(row)}
       />
       <Button
         icon={<Reset />}
         size="small"
         tooltip={<FormattedMessage id="label.reset" defaultMessage="Reset" />}
-        tooltipId={`button-reset-${row.websiteUuid}`}
+        tooltipId={`button-reset-${row.id}`}
         onClick={() => setResetWebsite(row)}
       />
       <Button
         icon={<Trash />}
         size="small"
         tooltip={<FormattedMessage id="label.delete" defaultMessage="Delete" />}
-        tooltipId={`button-delete-${row.websiteUuid}`}
+        tooltipId={`button-delete-${row.id}`}
         onClick={() => setDeleteWebsite(row)}
       />
     </ButtonLayout>
   );
 
-  const DetailsLink = ({ websiteUuid, name, domain }) => (
-    <Link
-      className={styles.detailLink}
-      href="/websites/[...id]"
-      as={`/websites/${websiteUuid}/${name}`}
-    >
+  const DetailsLink = ({ id, name, domain }) => (
+    <Link className={styles.detailLink} href="/websites/[...id]" as={`/websites/${id}/${name}`}>
       <Favicon domain={domain} />
-      <OverflowText tooltipId={`${websiteUuid}-name`}>{name}</OverflowText>
+      <OverflowText tooltipId={`${id}-name`}>{name}</OverflowText>
     </Link>
   );
 
-  const Domain = ({ domain, websiteUuid }) => (
-    <OverflowText tooltipId={`${websiteUuid}-domain`}>{domain}</OverflowText>
+  const Domain = ({ domain, id }) => (
+    <OverflowText tooltipId={`${id}-domain`}>{domain}</OverflowText>
   );
 
   const adminColumns = [
@@ -112,7 +108,7 @@ export default function WebsiteSettings() {
       render: Domain,
     },
     {
-      key: 'account',
+      key: 'user',
       label: <FormattedMessage id="label.owner" defaultMessage="Owner" />,
       className: 'col-12 col-lg-4 col-xl-1',
     },
@@ -203,7 +199,7 @@ export default function WebsiteSettings() {
           title={<FormattedMessage id="label.reset-website" defaultMessage="Reset statistics" />}
         >
           <ResetForm
-            values={{ type: 'websites', id: resetWebsite.websiteUuid, name: resetWebsite.name }}
+            values={{ type: 'websites', id: resetWebsite.id, name: resetWebsite.name }}
             onSave={handleSave}
             onClose={handleClose}
           />
@@ -214,7 +210,7 @@ export default function WebsiteSettings() {
           title={<FormattedMessage id="label.delete-website" defaultMessage="Delete website" />}
         >
           <DeleteForm
-            values={{ type: 'websites', id: deleteWebsite.websiteUuid, name: deleteWebsite.name }}
+            values={{ type: 'websites', id: deleteWebsite.id, name: deleteWebsite.name }}
             onSave={handleSave}
             onClose={handleClose}
           />