mirror of
https://github.com/kremalicious/umami.git
synced 2024-12-24 02:06:19 +01:00
Added useApi hook.
This commit is contained in:
parent
7bd49e6caf
commit
d19b6b5a82
@ -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();
|
||||
|
@ -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();
|
||||
|
@ -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();
|
||||
|
@ -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,
|
||||
});
|
||||
|
@ -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();
|
||||
|
@ -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();
|
||||
|
@ -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 },
|
||||
});
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -35,7 +35,7 @@ export default function MetricsTable({
|
||||
} = usePageQuery();
|
||||
|
||||
const { data, loading, error } = useFetch(
|
||||
`/api/website/${websiteId}/metrics`,
|
||||
`/website/${websiteId}/metrics`,
|
||||
{
|
||||
params: {
|
||||
type,
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
@ -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) {
|
||||
|
@ -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);
|
||||
|
||||
|
@ -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
25
hooks/useApi.js
Normal 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);
|
||||
}, []),
|
||||
};
|
||||
}
|
@ -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);
|
||||
}, []);
|
||||
}
|
@ -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() });
|
||||
|
||||
|
@ -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);
|
||||
}, []);
|
||||
}
|
@ -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": [
|
||||
|
Loading…
Reference in New Issue
Block a user