File size: 3,534 Bytes
ec4551b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 'use client';
import React, { useCallback, useEffect, useState } from 'react';
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
import useSWR from 'swr';
import { Select } from '@gitroom/react/form/select';
import { useToaster } from '@gitroom/react/toaster/toaster';
import { useT } from '@gitroom/react/translation/get.transation.service.client';
type ShortLinkPreference = 'ASK' | 'YES' | 'NO';
interface ShortlinkPreferenceResponse {
shortlink: ShortLinkPreference;
}
export const useShortlinkPreference = () => {
const fetch = useFetch();
const load = useCallback(async () => {
return (await fetch('/settings/shortlink')).json();
}, []);
return useSWR<ShortlinkPreferenceResponse>('shortlink-preference', load, {
revalidateOnFocus: false,
revalidateOnReconnect: false,
revalidateIfStale: false,
revalidateOnMount: true,
refreshWhenHidden: false,
refreshWhenOffline: false,
});
};
const ShortlinkPreferenceComponent = () => {
const t = useT();
const fetch = useFetch();
const toaster = useToaster();
const { data, isLoading, mutate } = useShortlinkPreference();
const [localValue, setLocalValue] = useState<ShortLinkPreference>('ASK');
// Sync local state with fetched data
useEffect(() => {
if (data?.shortlink) {
setLocalValue(data.shortlink);
}
}, [data]);
const handleChange = useCallback(
async (event: React.ChangeEvent<HTMLSelectElement>) => {
const newValue = event.target.value as ShortLinkPreference;
// Update local state immediately
setLocalValue(newValue);
await fetch('/settings/shortlink', {
method: 'POST',
body: JSON.stringify({ shortlink: newValue }),
});
mutate({ shortlink: newValue });
toaster.show(t('settings_updated', 'Settings updated'), 'success');
},
[fetch, mutate, toaster, t]
);
if (isLoading) {
return (
<div className="my-[16px] mt-[16px] bg-sixth border-fifth border rounded-[4px] p-[24px]">
<div className="animate-pulse">{t('loading', 'Loading...')}</div>
</div>
);
}
return (
<div className="my-[16px] mt-[16px] bg-sixth border-fifth border rounded-[4px] p-[24px] flex flex-col gap-[24px]">
<div className="mt-[4px]">
{t('shortlink_settings', 'Shortlink Settings')}
</div>
<div className="flex items-center justify-between gap-[24px]">
<div className="flex flex-col flex-1">
<div className="text-[14px]">
{t('shortlink_preference', 'Shortlink Preference')}
</div>
<div className="text-[12px] text-customColor18">
{t(
'shortlink_preference_description',
'Control how URLs in your posts are handled. Shortlinks provide click statistics.'
)}
</div>
</div>
<div className="w-[200px]">
<Select
name="shortlink"
label=""
disableForm={true}
hideErrors={true}
value={localValue}
onChange={handleChange}
>
<option value="ASK">
{t('shortlink_ask', 'Ask every time')}
</option>
<option value="YES">
{t('shortlink_yes', 'Always shortlink')}
</option>
<option value="NO">
{t('shortlink_no', 'Never shortlink')}
</option>
</Select>
</div>
</div>
</div>
);
};
export default ShortlinkPreferenceComponent;
|