implemented the user view type and website sharing

components/common/Checkbox.js

@@ -1,18 +1,23 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import Icon from 'components/common/Icon';
 import Check from 'assets/check.svg';
 import styles from './Checkbox.module.css';
 
-function Checkbox({ name, value, label, onChange }) {
+function Checkbox({ name, value, label, onChange, valueArray }) {
   const ref = useRef();
+  const [isChecked, setIsChecked] = useState();
 
   const onClick = () => ref.current.click();
 
+  useEffect(() => {
+    setIsChecked((valueArray && valueArray.includes(value)) || (!valueArray && value));
+  }, [valueArray, value]);
+
   return (
     <div className={styles.container}>
       <div className={styles.checkbox} onClick={onClick}>
-        {value && <Icon icon={<Check />} size="small" />}
+        {isChecked && <Icon icon={<Check />} size="small" />}
       </div>
       <label className={styles.label} htmlFor={name} onClick={onClick}>
         {label}
@@ -22,7 +27,8 @@ function Checkbox({ name, value, label, onChange }) {
         className={styles.input}
         type="checkbox"
         name={name}
-        defaultChecked={value}
+        value={valueArray ? value : isChecked}
+        defaultChecked={isChecked}
         onChange={onChange}
       />
     </div>

components/forms/AccountEditForm.js

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Formik, Form, Field } from 'formik';
+import { Formik, Form, Field, useFormikContext, useField } from 'formik';
 import Button from 'components/common/Button';
+import Checkbox from 'components/common/Checkbox';
 import FormLayout, {
   FormButtons,
   FormError,
@@ -9,10 +10,13 @@ import FormLayout, {
   FormRow,
 } from 'components/layout/FormLayout';
 import useApi from 'hooks/useApi';
+import useFetch from 'hooks/useFetch';
 
 const initialValues = {
   username: '',
   password: '',
+  isViewer: false,
+  websiteIds: [],
 };
 
 const validate = ({ id, username, password }) => {
@@ -28,6 +32,44 @@ const validate = ({ id, username, password }) => {
   return errors;
 };
 
+const WebsiteSelect = props => {
+  const { data } = useFetch(`/websites`);
+  const [field, meta] = useField(props);
+  const {
+    values: { websiteIds },
+  } = useFormikContext();
+
+  return (
+    <>
+      {data && data.length > 0 && (
+        <div
+          style={{
+            maxHeight: '20vh',
+            overflowY: 'auto',
+            padding: '0 1rem',
+            margin: '0 20px',
+            background: 'var(--gray100)',
+            border: '1px solid var(--gray500)',
+            borderRadius: '5px',
+          }}
+        >
+          {data.map(item => (
+            <div key={`websiteIds-${item.id}`}>
+              <Checkbox
+                {...field}
+                value={item.id.toString()}
+                label={item.name}
+                valueArray={websiteIds}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+      {!!meta.touched && !!meta.error && <div>{meta.error}</div>}
+    </>
+  );
+};
+
 export default function AccountEditForm({ values, onSave, onClose }) {
   const { post } = useApi();
   const [message, setMessage] = useState();
@@ -52,7 +94,7 @@ export default function AccountEditForm({ values, onSave, onClose }) {
         validate={validate}
         onSubmit={handleSubmit}
       >
-        {() => (
+        {values => (
           <Form>
             <FormRow>
               <label htmlFor="username">
@@ -72,6 +114,20 @@ export default function AccountEditForm({ values, onSave, onClose }) {
                 <FormError name="password" />
               </div>
             </FormRow>
+            {!values.values.isAdmin && (
+              <FormRow>
+                <label />
+                <Field name="isViewer">
+                  {({ field }) => (
+                    <Checkbox
+                      {...field}
+                      label={<FormattedMessage id="label.is-viewer" defaultMessage="Viewer" />}
+                    />
+                  )}
+                </Field>
+              </FormRow>
+            )}
+            {values.values.isViewer && <WebsiteSelect name="websiteIds" />}
             <FormButtons>
               <Button type="submit" variant="action">
                 <FormattedMessage id="label.save" defaultMessage="Save" />

components/settings/AccountSettings.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import Link from 'next/link';
 import classNames from 'classnames';
@@ -26,6 +26,14 @@ export default function AccountSettings() {
   const [saved, setSaved] = useState(0);
   const [message, setMessage] = useState();
   const { data } = useFetch(`/accounts`, {}, [saved]);
+  const [formattedData, setFormattedData] = useState([]);
+
+  useEffect(() => {
+    if (data)
+      setFormattedData(
+        data.map(d => ({ ...d, websiteIds: d.viewwebsites.map(vw => vw.websiteId.toString()) })),
+      );
+  }, [data]);
 
   const Checkmark = ({ isAdmin }) => (isAdmin ? <Icon icon={<Check />} size="medium" /> : null);
 
@@ -103,7 +111,7 @@ export default function AccountSettings() {
           <FormattedMessage id="label.add-account" defaultMessage="Add account" />
         </Button>
       </PageHeader>
-      <Table columns={columns} rows={data} />
+      <Table columns={columns} rows={formattedData} />
       {editAccount && (
         <Modal title={<FormattedMessage id="label.edit-account" defaultMessage="Edit account" />}>
           <AccountEditForm

components/settings/WebsiteSettings.js

@@ -50,36 +50,44 @@ export default function WebsiteSettings() {
           onClick={() => setShowUrl(row)}
         />
       )}
-      <Button
-        icon={<Code />}
-        size="small"
-        tooltip={
-          <FormattedMessage id="message.get-tracking-code" defaultMessage="Get tracking code" />
-        }
-        tooltipId={`button-code-${row.websiteUuid}`}
-        onClick={() => setShowCode(row)}
-      />
-      <Button
-        icon={<Pen />}
-        size="small"
-        tooltip={<FormattedMessage id="label.edit" defaultMessage="Edit" />}
-        tooltipId={`button-edit-${row.websiteUuid}`}
-        onClick={() => setEditWebsite(row)}
-      />
-      <Button
-        icon={<Reset />}
-        size="small"
-        tooltip={<FormattedMessage id="label.reset" defaultMessage="Reset" />}
-        tooltipId={`button-reset-${row.websiteUuid}`}
-        onClick={() => setResetWebsite(row)}
-      />
-      <Button
-        icon={<Trash />}
-        size="small"
-        tooltip={<FormattedMessage id="label.delete" defaultMessage="Delete" />}
-        tooltipId={`button-delete-${row.websiteUuid}`}
-        onClick={() => setDeleteWebsite(row)}
-      />
+      {!user.isViewer && (
+        <Button
+          icon={<Code />}
+          size="small"
+          tooltip={
+            <FormattedMessage id="message.get-tracking-code" defaultMessage="Get tracking code" />
+          }
+          tooltipId={`button-code-${row.websiteUuid}`}
+          onClick={() => setShowCode(row)}
+        />
+      )}
+      {!user.isViewer && (
+        <Button
+          icon={<Pen />}
+          size="small"
+          tooltip={<FormattedMessage id="label.edit" defaultMessage="Edit" />}
+          tooltipId={`button-edit-${row.websiteUuid}`}
+          onClick={() => setEditWebsite(row)}
+        />
+      )}
+      {!user.isViewer && (
+        <Button
+          icon={<Reset />}
+          size="small"
+          tooltip={<FormattedMessage id="label.reset" defaultMessage="Reset" />}
+          tooltipId={`button-reset-${row.websiteUuid}`}
+          onClick={() => setResetWebsite(row)}
+        />
+      )}
+      {!user.isViewer && (
+        <Button
+          icon={<Trash />}
+          size="small"
+          tooltip={<FormattedMessage id="label.delete" defaultMessage="Delete" />}
+          tooltipId={`button-delete-${row.websiteUuid}`}
+          onClick={() => setDeleteWebsite(row)}
+        />
+      )}
     </ButtonLayout>
   );