Refactored useApi usage.

components/common/Calendar.js

@@ -17,9 +17,9 @@ import {
   isAfter,
 } from 'date-fns';
 import { Button, Icon } from 'react-basics';
+import { chunkArray } from 'next-basics';
 import useLocale from 'hooks/useLocale';
 import { dateFormat } from 'lib/date';
-import { chunk } from 'lib/array';
 import { getDateLocale } from 'lib/lang';
 import Chevron from 'assets/chevron-down.svg';
 import Cross from 'assets/times.svg';
@@ -142,7 +142,7 @@ const DaySelector = ({ date, minDate, maxDate, locale, onSelect }) => {
         </tr>
       </thead>
       <tbody>
-        {chunk(days, 7).map((week, i) => (
+        {chunkArray(days, 7).map((week, i) => (
           <tr key={i}>
             {week.map((day, j) => {
               const disabled = isBefore(day, minDate) || isAfter(day, maxDate);
@@ -181,7 +181,7 @@ const MonthSelector = ({ date, minDate, maxDate, locale, onSelect }) => {
   return (
     <table>
       <tbody>
-        {chunk(months, 3).map((row, i) => (
+        {chunkArray(months, 3).map((row, i) => (
           <tr key={i}>
             {row.map((month, j) => {
               const disabled =
@@ -246,7 +246,7 @@ const YearSelector = ({ date, minDate, maxDate, onSelect }) => {
       <div className={styles.middle}>
         <table>
           <tbody>
-            {chunk(years, 5).map((row, i) => (
+            {chunkArray(years, 5).map((row, i) => (
               <tr key={i}>
                 {row.map((n, j) => (
                   <td

components/forms/LoginForm.js

@@ -9,9 +9,9 @@ import {
   Icon,
 } from 'react-basics';
 import { useRouter } from 'next/router';
-import { useApi } from 'next-basics';
+import useApi from 'hooks/useApi';
 import { setUser } from 'store/app';
-import { setAuthToken } from 'lib/client';
+import { setClientAuthToken } from 'lib/client';
 import Logo from 'assets/logo.svg';
 import styles from './Form.module.css';
 
@@ -23,7 +23,7 @@ export default function LoginForm() {
   const handleSubmit = async data => {
     mutate(data, {
       onSuccess: async ({ token, user }) => {
-        setAuthToken(token);
+        setClientAuthToken(token);
         setUser(user);
 
         await router.push('/websites');

components/forms/ShareUrlForm.js

@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
-import { getAuthToken } from 'lib/client';
+import { getClientAuthToken } from 'lib/client';
 import { getRandomChars, useApi } from 'next-basics';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import {
@@ -16,7 +16,7 @@ import {
 export default function ShareUrlForm({ websiteId, data, onSave }) {
   const { name, shareId } = data;
   const [id, setId] = useState(shareId);
-  const { post } = useApi(getAuthToken());
+  const { post } = useApi(getClientAuthToken());
   const { mutate, error } = useMutation(({ shareId }) =>
     post(`/websites/${websiteId}`, { shareId }),
   );

components/forms/TeamAddForm.js

@@ -1,12 +1,12 @@
 import { useRef } from 'react';
 import { Form, FormInput, FormButtons, TextField, Button } from 'react-basics';
-import { useApi } from 'next-basics';
+import useApi from 'hooks/useApi';
 import styles from './Form.module.css';
 import { useMutation } from '@tanstack/react-query';
-import { getAuthToken } from 'lib/client';
+import { getClientAuthToken } from 'lib/client';
 
 export default function TeamAddForm({ onSave, onClose }) {
-  const { post } = useApi(getAuthToken());
+  const { post } = useApi(getClientAuthToken());
   const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
   const ref = useRef(null);
 

components/forms/TeamEditForm.js

@@ -1,11 +1,11 @@
 import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
 import { useMutation } from '@tanstack/react-query';
 import { useRef } from 'react';
-import { useApi } from 'next-basics';
-import { getAuthToken } from 'lib/client';
+import useApi from 'hooks/useApi';
+import { getClientAuthToken } from 'lib/client';
 
 export default function TeamEditForm({ teamId, data, onSave }) {
-  const { post } = useApi(getAuthToken());
+  const { post } = useApi(getClientAuthToken());
   const { mutate, error } = useMutation(data => post(`/teams/${teamId}`, data));
   const ref = useRef(null);
 

components/forms/UserDeleteForm.js

@@ -1,13 +1,13 @@
 import { useMutation } from '@tanstack/react-query';
-import { getAuthToken } from 'lib/client';
-import { useApi } from 'next-basics';
+import { getClientAuthToken } from 'lib/client';
+import useApi from 'hooks/useApi';
 import { Button, Form, FormButtons, FormInput, SubmitButton, TextField } from 'react-basics';
 import styles from './Form.module.css';
 
 const CONFIRM_VALUE = 'DELETE';
 
 export default function UserDeleteForm({ userId, onSave, onClose }) {
-  const { del } = useApi(getAuthToken());
+  const { del } = useApi(getClientAuthToken());
   const { mutate, error, isLoading } = useMutation(data => del(`/users/${userId}`, data));
 
   const handleSubmit = async data => {

components/forms/UserEditForm.js

@@ -9,8 +9,8 @@ import {
 } from 'react-basics';
 import { useRef } from 'react';
 import { useMutation } from '@tanstack/react-query';
-import { useApi } from 'next-basics';
-import { getAuthToken } from 'lib/client';
+import useApi from 'hooks/useApi';
+import { getClientAuthToken } from 'lib/client';
 import { ROLES } from 'lib/constants';
 import styles from './UserForm.module.css';
 
@@ -27,7 +27,7 @@ const items = [
 
 export default function UserEditForm({ data, onSave }) {
   const { id } = data;
-  const { post } = useApi(getAuthToken());
+  const { post } = useApi(getClientAuthToken());
   const { mutate, error } = useMutation(({ username }) => post(`/user/${id}`, { username }));
   const ref = useRef(null);
 

components/forms/UserPasswordForm.js

@@ -1,8 +1,8 @@
 import { useRef } from 'react';
 import { Form, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
-import { useApi } from 'next-basics';
+import useApi from 'hooks/useApi';
 import { useMutation } from '@tanstack/react-query';
-import { getAuthToken } from 'lib/client';
+import { getClientAuthToken } from 'lib/client';
 import styles from './UserPasswordForm.module.css';
 import useUser from 'hooks/useUser';
 
@@ -13,7 +13,7 @@ export default function UserPasswordForm({ onSave, userId }) {
 
   const isCurrentUser = !userId || id === userId;
   const url = isCurrentUser ? `/users/${id}/password` : `/users/${id}`;
-  const { post } = useApi(getAuthToken());
+  const { post } = useApi(getClientAuthToken());
   const { mutate, error, isLoading } = useMutation(data => post(url, data));
   const ref = useRef(null);
 

components/forms/WebsiteAddForm.js

@@ -1,13 +1,13 @@
 import { useRef } from 'react';
 import { Form, FormInput, FormButtons, TextField, Button, SubmitButton } from 'react-basics';
-import { useApi } from 'next-basics';
+import useApi from 'hooks/useApi';
 import styles from './Form.module.css';
 import { useMutation } from '@tanstack/react-query';
-import { getAuthToken } from 'lib/client';
+import { getClientAuthToken } from 'lib/client';
 import { DOMAIN_REGEX } from 'lib/constants';
 
 export default function WebsiteAddForm({ onSave, onClose }) {
-  const { post } = useApi(getAuthToken());
+  const { post } = useApi(getClientAuthToken());
   const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
   const ref = useRef(null);
 

components/forms/WebsiteDeleteForm.js

@@ -1,13 +1,13 @@
 import { useMutation } from '@tanstack/react-query';
-import { getAuthToken } from 'lib/client';
-import { useApi } from 'next-basics';
+import { getClientAuthToken } from 'lib/client';
+import useApi from 'hooks/useApi';
 import { Button, Form, FormButtons, FormInput, SubmitButton, TextField } from 'react-basics';
 import styles from './Form.module.css';
 
 const CONFIRM_VALUE = 'DELETE';
 
 export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
-  const { del } = useApi(getAuthToken());
+  const { del } = useApi(getClientAuthToken());
   const { mutate, error, isLoading } = useMutation(data => del(`/websites/${websiteId}`, data));
 
   const handleSubmit = async data => {

components/forms/WebsiteEditForm.js

@@ -1,12 +1,12 @@
 import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
 import { useMutation } from '@tanstack/react-query';
 import { useRef } from 'react';
-import { useApi } from 'next-basics';
-import { getAuthToken } from 'lib/client';
+import useApi from 'hooks/useApi';
+import { getClientAuthToken } from 'lib/client';
 import { DOMAIN_REGEX } from 'lib/constants';
 
 export default function WebsiteEditForm({ websiteId, data, onSave }) {
-  const { post } = useApi(getAuthToken());
+  const { post } = useApi(getClientAuthToken());
   const { mutate, error } = useMutation(data => post(`/websites/${websiteId}`, data));
   const ref = useRef(null);
 

components/forms/WebsiteResetForm.js

@@ -1,13 +1,13 @@
 import { useMutation } from '@tanstack/react-query';
-import { getAuthToken } from 'lib/client';
-import { useApi } from 'next-basics';
+import { getClientAuthToken } from 'lib/client';
+import useApi from 'hooks/useApi';
 import { Button, Form, FormButtons, FormInput, SubmitButton, TextField } from 'react-basics';
 import styles from './Form.module.css';
 
 const CONFIRM_VALUE = 'RESET';
 
 export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
-  const { post } = useApi(getAuthToken());
+  const { post } = useApi(getClientAuthToken());
   const { mutate, error, isLoading } = useMutation(data =>
     post(`/websites/${websiteId}/reset`, data),
   );

components/pages/TeamDetails.js

@@ -1,18 +1,18 @@
 import { useEffect, useState } from 'react';
 import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
 import { useQuery } from '@tanstack/react-query';
-import { useApi } from 'next-basics';
+import useApi from 'hooks/useApi';
 import Link from 'next/link';
 import Page from 'components/layout/Page';
 import TeamEditForm from 'components/forms/TeamEditForm';
 import PageHeader from 'components/layout/PageHeader';
-import { getAuthToken } from 'lib/client';
+import { getClientAuthToken } from 'lib/client';
 import TeamMembersTable from '../tables/TeamMembersTable';
 
 export default function TeamDetails({ teamId }) {
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('general');
-  const { get } = useApi(getAuthToken());
+  const { get } = useApi(getClientAuthToken());
   const { toast, showToast } = useToast();
   const { data, isLoading } = useQuery(
     ['team', teamId],

components/pages/TeamsList.js

@@ -1,18 +1,18 @@
 import { useState } from 'react';
 import { Button, Icon, Modal, useToast, Flexbox } from 'react-basics';
-import { useApi } from 'next-basics';
+import useApi from 'hooks/useApi';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import TeamAddForm from 'components/forms/TeamAddForm';
 import PageHeader from 'components/layout/PageHeader';
 import TeamsTable from 'components/tables/TeamsTable';
 import Page from 'components/layout/Page';
-import { getAuthToken } from 'lib/client';
+import { getClientAuthToken } from 'lib/client';
 import { useQuery } from '@tanstack/react-query';
 
 export default function TeamsList() {
   const [edit, setEdit] = useState(false);
   const [update, setUpdate] = useState(0);
-  const { get } = useApi(getAuthToken());
+  const { get } = useApi(getClientAuthToken());
   const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));
   const hasData = data && data.length !== 0;
   const { toast, showToast } = useToast();

components/pages/UserSettings.js

@@ -4,8 +4,8 @@ import UserEditForm from 'components/forms/UserEditForm';
 import UserPasswordForm from 'components/forms/UserPasswordForm';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
-import { getAuthToken } from 'lib/client';
-import { useApi } from 'next-basics';
+import { getClientAuthToken } from 'lib/client';
+import useApi from 'hooks/useApi';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
@@ -14,7 +14,7 @@ import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
 export default function UserSettings({ userId }) {
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('general');
-  const { get } = useApi(getAuthToken());
+  const { get } = useApi(getClientAuthToken());
   const { toast, showToast } = useToast();
   const router = useRouter();
   const { data, isLoading } = useQuery(

components/pages/UsersList.js

@@ -3,15 +3,15 @@ import PageHeader from 'components/layout/PageHeader';
 import UsersTable from 'components/tables/UsersTable';
 import { useState } from 'react';
 import { Button, Icon, useToast } from 'react-basics';
-import { getAuthToken } from 'lib/client';
+import { getClientAuthToken } from 'lib/client';
 import { useMutation } from '@tanstack/react-query';
-import { useApi } from 'next-basics';
+import useApi from 'hooks/useApi';
 
 export default function UsersList() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
   const { toast, showToast } = useToast();
-  const { post } = useApi(getAuthToken());
+  const { post } = useApi(getClientAuthToken());
   const { mutate, isLoading } = useMutation(data => post('/api-key', data));
 
   const handleSave = () => {

components/pages/WebsiteSettings.js

@@ -1,21 +1,21 @@
 import { useEffect, useState } from 'react';
 import { Breadcrumbs, Item, Tabs, useToast, Button, Icon } from 'react-basics';
 import { useQuery } from '@tanstack/react-query';
-import { useApi } from 'next-basics';
+import useApi from 'hooks/useApi';
 import Link from 'next/link';
 import Page from 'components/layout/Page';
 import WebsiteEditForm from 'components/forms/WebsiteEditForm';
 import WebsiteReset from 'components/forms/WebsiteReset';
 import PageHeader from 'components/layout/PageHeader';
 import TrackingCodeForm from 'components/forms/TrackingCodeForm';
 import ShareUrlForm from 'components/forms/ShareUrlForm';
-import { getAuthToken } from 'lib/client';
+import { getClientAuthToken } from 'lib/client';
 import ExternalLink from 'assets/external-link.svg';
 
 export default function Websites({ websiteId }) {
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('general');
-  const { get } = useApi(getAuthToken());
+  const { get } = useApi(getClientAuthToken());
   const { toast, showToast } = useToast();
   const { data, isLoading } = useQuery(
     ['website', websiteId],

components/pages/WebsitesList.js

@@ -1,19 +1,19 @@
 import { useState } from 'react';
 import { Button, Icon, Modal, useToast, Flexbox } from 'react-basics';
-import { useApi } from 'next-basics';
+import useApi from 'hooks/useApi';
 import { useQuery } from '@tanstack/react-query';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import WebsiteAddForm from 'components/forms/WebsiteAddForm';
 import PageHeader from 'components/layout/PageHeader';
 import WebsitesTable from 'components/tables/WebsitesTable';
 import Page from 'components/layout/Page';
-import { getAuthToken } from 'lib/client';
+import { getClientAuthToken } from 'lib/client';
 import useUser from 'hooks/useUser';
 
 export default function WebsitesList() {
   const [edit, setEdit] = useState(false);
   const [update, setUpdate] = useState(0);
-  const { get } = useApi(getAuthToken());
+  const { get } = useApi(getClientAuthToken());
   const { user } = useUser();
   const { data, isLoading, error } = useQuery(['websites', update], () =>
     get(`/users/${user.id}/websites`),

components/tables/UsersTable.js

@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import { formatDistance } from 'date-fns';
-import { getAuthToken } from 'lib/client';
-import { useApi } from 'next-basics';
+import { getClientAuthToken } from 'lib/client';
+import useApi from 'hooks/useApi';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import {
@@ -26,7 +26,7 @@ const defaultColumns = [
 
 export default function UsersTable({ columns = defaultColumns, onLoading, onAddKeyClick }) {
   const [values, setValues] = useState(null);
-  const { get } = useApi(getAuthToken());
+  const { get } = useApi(getClientAuthToken());
   const { data, isLoading, error } = useQuery(['user'], () => get(`/users`));
   const hasData = data && data.length !== 0;