Added useApi hook.

This commit is contained in:
Mike Cao 2022-02-22 23:52:31 -08:00
parent 7bd49e6caf
commit d19b6b5a82
22 changed files with 59 additions and 59 deletions

View File

@ -8,7 +8,7 @@ import FormLayout, {
FormMessage,
FormRow,
} from 'components/layout/FormLayout';
import usePost from 'hooks/usePost';
import useApi from 'hooks/useApi';
const initialValues = {
username: '',
@ -29,11 +29,11 @@ const validate = ({ user_id, username, password }) => {
};
export default function AccountEditForm({ values, onSave, onClose }) {
const post = usePost();
const { post } = useApi();
const [message, setMessage] = useState();
const handleSubmit = async values => {
const { ok, data } = await post('/api/account', values);
const { ok, data } = await post('/account', values);
if (ok) {
onSave();

View File

@ -8,7 +8,7 @@ import FormLayout, {
FormMessage,
FormRow,
} from 'components/layout/FormLayout';
import usePost from 'hooks/usePost';
import useApi from 'hooks/useApi';
const initialValues = {
current_password: '',
@ -37,11 +37,11 @@ const validate = ({ current_password, new_password, confirm_password }) => {
};
export default function ChangePasswordForm({ values, onSave, onClose }) {
const post = usePost();
const { post } = useApi();
const [message, setMessage] = useState();
const handleSubmit = async values => {
const { ok, data } = await post('/api/account/password', values);
const { ok, data } = await post('/account/password', values);
if (ok) {
onSave();

View File

@ -8,7 +8,7 @@ import FormLayout, {
FormMessage,
FormRow,
} from 'components/layout/FormLayout';
import useDelete from 'hooks/useDelete';
import useApi from 'hooks/useApi';
const CONFIRMATION_WORD = 'DELETE';
@ -27,11 +27,11 @@ const validate = ({ confirmation }) => {
};
export default function DeleteForm({ values, onSave, onClose }) {
const del = useDelete();
const { del } = useApi();
const [message, setMessage] = useState();
const handleSubmit = async ({ type, id }) => {
const { ok, data } = await del(`/api/${type}/${id}`);
const { ok, data } = await del(`/${type}/${id}`);
if (ok) {
onSave();

View File

@ -10,7 +10,7 @@ import FormLayout, {
FormRow,
} from 'components/layout/FormLayout';
import Icon from 'components/common/Icon';
import usePost from 'hooks/usePost';
import useApi from 'hooks/useApi';
import { setItem } from 'lib/web';
import { AUTH_TOKEN } from 'lib/constants';
import { setUser } from 'store/app';
@ -31,12 +31,12 @@ const validate = ({ username, password }) => {
};
export default function LoginForm() {
const post = usePost();
const { post } = useApi();
const router = useRouter();
const [message, setMessage] = useState();
const handleSubmit = async ({ username, password }) => {
const { ok, status, data } = await post('/api/auth/login', {
const { ok, status, data } = await post('/auth/login', {
username,
password,
});

View File

@ -8,7 +8,7 @@ import FormLayout, {
FormMessage,
FormRow,
} from 'components/layout/FormLayout';
import usePost from 'hooks/usePost';
import useApi from 'hooks/useApi';
const CONFIRMATION_WORD = 'RESET';
@ -27,11 +27,11 @@ const validate = ({ confirmation }) => {
};
export default function ResetForm({ values, onSave, onClose }) {
const post = usePost();
const { post } = useApi();
const [message, setMessage] = useState();
const handleSubmit = async ({ type, id }) => {
const { ok, data } = await post(`/api/${type}/${id}/reset`);
const { ok, data } = await post(`/${type}/${id}/reset`);
if (ok) {
onSave();

View File

@ -10,7 +10,7 @@ import FormLayout, {
} from 'components/layout/FormLayout';
import Checkbox from 'components/common/Checkbox';
import { DOMAIN_REGEX } from 'lib/constants';
import usePost from 'hooks/usePost';
import useApi from 'hooks/useApi';
const initialValues = {
name: '',
@ -34,11 +34,11 @@ const validate = ({ name, domain }) => {
};
export default function WebsiteEditForm({ values, onSave, onClose }) {
const post = usePost();
const { post } = useApi();
const [message, setMessage] = useState();
const handleSubmit = async values => {
const { ok, data } = await post('/api/website', values);
const { ok, data } = await post('/website', values);
if (ok) {
onSave();

View File

@ -9,7 +9,7 @@ import styles from './ActiveUsers.module.css';
export default function ActiveUsers({ websiteId, className, value, interval = 60000 }) {
const shareToken = useShareToken();
const { data } = useFetch(!value && `/api/website/${websiteId}/active`, {
const { data } = useFetch(!value && `/website/${websiteId}/active`, {
interval,
headers: { [TOKEN_HEADER]: shareToken?.token },
});

View File

@ -17,7 +17,7 @@ export default function EventsChart({ websiteId, className, token }) {
const shareToken = useShareToken();
const { data, loading } = useFetch(
`/api/website/${websiteId}/events`,
`/website/${websiteId}/events`,
{
params: {
start_at: +startDate,

View File

@ -22,7 +22,7 @@ export default function MetricsBar({ websiteId, className }) {
} = usePageQuery();
const { data, error, loading } = useFetch(
`/api/website/${websiteId}/stats`,
`/website/${websiteId}/stats`,
{
params: {
start_at: +startDate,

View File

@ -35,7 +35,7 @@ export default function MetricsTable({
} = usePageQuery();
const { data, loading, error } = useFetch(
`/api/website/${websiteId}/metrics`,
`/website/${websiteId}/metrics`,
{
params: {
type,

View File

@ -41,7 +41,7 @@ export default function WebsiteChart({
} = usePageQuery();
const { data, loading, error } = useFetch(
`/api/website/${websiteId}/pageviews`,
`/website/${websiteId}/pageviews`,
{
params: {
start_at: +startDate,

View File

@ -33,8 +33,8 @@ export default function RealtimeDashboard() {
const countryNames = useCountryNames(locale);
const [data, setData] = useState();
const [websiteId, setWebsiteId] = useState(0);
const { data: init, loading } = useFetch('/api/realtime/init');
const { data: updates } = useFetch('/api/realtime/update', {
const { data: init, loading } = useFetch('/realtime/init');
const { data: updates } = useFetch('/realtime/update', {
params: { start_at: data?.timestamp },
disabled: !init?.websites?.length || !data,
interval: REALTIME_INTERVAL,

View File

@ -21,7 +21,7 @@ export default function TestConsole() {
const [website, setWebsite] = useState();
const [show, setShow] = useState(true);
const { basePath } = useRouter();
const { data } = useFetch('/api/websites');
const { data } = useFetch('/websites');
if (!data || !user?.is_admin) {
return null;

View File

@ -37,7 +37,7 @@ const views = {
export default function WebsiteDetails({ websiteId }) {
const shareToken = useShareToken();
const { data } = useFetch(`/api/website/${websiteId}`, {
const { data } = useFetch(`/website/${websiteId}`, {
headers: { [TOKEN_HEADER]: shareToken?.token },
});
const [chartLoaded, setChartLoaded] = useState(false);

View File

@ -11,7 +11,7 @@ import Chart from 'assets/chart-bar.svg';
import styles from './WebsiteList.module.css';
export default function WebsiteList({ userId }) {
const { data } = useFetch('/api/websites', { params: { user_id: userId } });
const { data } = useFetch('/websites', { params: { user_id: userId } });
const [showCharts, setShowCharts] = useState(true);
if (!data) {

View File

@ -25,7 +25,7 @@ export default function AccountSettings() {
const [deleteAccount, setDeleteAccount] = useState();
const [saved, setSaved] = useState(0);
const [message, setMessage] = useState();
const { data } = useFetch(`/api/accounts`, {}, [saved]);
const { data } = useFetch(`/accounts`, {}, [saved]);
const Checkmark = ({ is_admin }) => (is_admin ? <Icon icon={<Check />} size="medium" /> : null);

View File

@ -36,9 +36,7 @@ export default function WebsiteSettings() {
const [showUrl, setShowUrl] = useState();
const [saved, setSaved] = useState(0);
const [message, setMessage] = useState();
const { data } = useFetch(`/api/websites` + (user.is_admin ? '?include_all=true' : ''), {}, [
saved,
]);
const { data } = useFetch(`/websites` + (user?.is_admin ? '?include_all=true' : ''), {}, [saved]);
const Buttons = row => (
<ButtonLayout align="right">

25
hooks/useApi.js Normal file
View File

@ -0,0 +1,25 @@
import { useCallback } from 'react';
import { useRouter } from 'next/router';
import { get, post, put, del } from 'lib/web';
export default function useApi() {
const { basePath } = useRouter();
return {
get: useCallback(async (url, params, headers) => {
return get(`${basePath}/api/${url}`, params, headers);
}, []),
post: useCallback(async (url, params, headers) => {
return post(`${basePath}/api/${url}`, params, headers);
}, []),
put: useCallback(async (url, params, headers) => {
return put(`${basePath}/api/${url}`, params, headers);
}, []),
del: useCallback(async (url, params, headers) => {
return del(`${basePath}/api/${url}`, params, headers);
}, []),
};
}

View File

@ -1,11 +0,0 @@
import { useCallback } from 'react';
import { useRouter } from 'next/router';
import { del } from 'lib/web';
export default function useDelete() {
const { basePath } = useRouter();
return useCallback(async (url, params, headers) => {
return del(`${basePath}${url}`, params, headers);
}, []);
}

View File

@ -1,14 +1,13 @@
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { get } from 'lib/web';
import { saveQuery } from 'store/queries';
import useApi from './useApi';
export default function useFetch(url, options = {}, update = []) {
const [response, setResponse] = useState();
const [error, setError] = useState();
const [loading, setLoadiing] = useState(false);
const [count, setCount] = useState(0);
const { basePath } = useRouter();
const { get } = useApi();
const { params = {}, headers = {}, disabled, delay = 0, interval, onDataLoad } = options;
async function loadData(params) {
@ -17,7 +16,7 @@ export default function useFetch(url, options = {}, update = []) {
setError(null);
const time = performance.now();
const { data, status, ok } = await get(`${basePath}${url}`, params, headers);
const { data, status, ok } = await get(url, params, headers);
await saveQuery(url, { time: performance.now() - time, completed: Date.now() });

View File

@ -1,11 +0,0 @@
import { useCallback } from 'react';
import { useRouter } from 'next/router';
import { post } from 'lib/web';
export default function usePost() {
const { basePath } = useRouter();
return useCallback(async (url, params, headers) => {
return post(`${basePath}${url}`, params, headers);
}, []);
}

View File

@ -568,7 +568,7 @@
"message.reset-warning": [
{
"type": 0,
"value": "Alle Daten für diese Website werden gelöscht, jedoch bleibt der tracking code bestehen."
"value": "Alle Daten für diese Webseite werden gelöscht, jedoch bleibt der Tracking Code bestehen."
}
],
"message.save-success": [