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,7 +1,7 @@
 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';
@@ -9,13 +9,13 @@ 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;
 

lib/array.js

@@ -1,18 +0,0 @@
-export function chunk(arr, size) {
-  const chunks = [];
-
-  let index = 0;
-  while (index < arr.length) {
-    chunks.push(arr.slice(index, size + index));
-    index += size;
-  }
-
-  return chunks;
-}
-
-export function sortArrayByMap(arr, map = [], key) {
-  if (!arr) return [];
-  if (map.length === 0) return arr;
-
-  return map.map(id => arr.find(item => item[key] === id));
-}

lib/client.ts

@@ -1,14 +1,14 @@
 import { getItem, setItem, removeItem } from 'next-basics';
 import { AUTH_TOKEN } from './constants';
 
-export function getAuthToken() {
+export function getClientAuthToken() {
   return getItem(AUTH_TOKEN);
 }
 
-export function setAuthToken(token) {
+export function setClientAuthToken(token) {
   setItem(AUTH_TOKEN, token);
 }
 
-export function removeAuthToken() {
+export function removeClientAuthToken() {
   removeItem(AUTH_TOKEN);
 }

lib/middleware.ts

@@ -21,7 +21,7 @@ export const useSession = createMiddleware(async (req, res, next) => {
     return badRequest(res);
   }
 
-  req.session = session;
+  (req as any).session = session;
   next();
 });
 
@@ -50,6 +50,6 @@ export const useAuth = createMiddleware(async (req, res, next) => {
     user.isAdmin = user.role === ROLES.admin;
   }
 
-  req.auth = { user, token, shareToken, key };
+  (req as any).auth = { user, token, shareToken, key };
   next();
 });

lib/session.js

@@ -3,7 +3,7 @@ import { validate } from 'uuid';
 import { secret, uuid } from 'lib/crypto';
 import cache from 'lib/cache';
 import clickhouse from 'lib/clickhouse';
-import { getClientInfo, getJsonBody } from 'lib/request';
+import { getClientInfo, getJsonBody } from 'lib/detect';
 import { createSession, getSession, getWebsite } from 'queries';
 
 export async function findSession(req) {

pages/api/collect.ts

@@ -4,7 +4,7 @@ import ipaddr from 'ipaddr.js';
 import { createToken, unauthorized, send, badRequest, forbidden } from 'next-basics';
 import { savePageView, saveEvent } from 'queries';
 import { useCors, useSession } from 'lib/middleware';
-import { getJsonBody, getIpAddress } from 'lib/request';
+import { getJsonBody, getIpAddress } from 'lib/detect';
 import { secret } from 'lib/crypto';
 import { NextApiRequest, NextApiResponse } from 'next';
 

pages/logout.js

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
-import { removeItem, useApi } from 'next-basics';
-import { AUTH_TOKEN } from 'lib/constants';
+import useApi from 'hooks/useApi';
 import { setUser } from 'store/app';
+import { removeClientAuthToken } from 'lib/client';
 
 export default function LogoutPage() {
   const router = useRouter();
@@ -13,7 +13,7 @@ export default function LogoutPage() {
       await post('/logout');
     }
 
-    removeItem(AUTH_TOKEN);
+    removeClientAuthToken();
 
     logout();