updated variables names to make a bit more sense :) #2
34
src/App.tsx
34
src/App.tsx
@ -17,42 +17,38 @@ const uri =
|
||||
"https://login.microsoft.com/{tenant}/.well-known/openid-configuration";
|
||||
|
||||
function App() {
|
||||
const [domain, setDomain] = useState<string>(location.hash.replace("#", ""));
|
||||
const [input, setInput] = useState<string>(location.hash.replace("#", ""));
|
||||
const [tenantId, setTenantId] = useState<string | null>(null);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
// const location = useLocation();
|
||||
const [debouncedDomain, setDebouncedDomain] = useDebounce<string>(
|
||||
domain,
|
||||
500
|
||||
);
|
||||
const [domain, setDomain] = useDebounce<string>(input, 500);
|
||||
const onChange = async (event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setDomain(event.target.value);
|
||||
setInput(event.target.value);
|
||||
|
||||
useEffect(() => {
|
||||
location.hash = debouncedDomain;
|
||||
location.hash = domain;
|
||||
if (
|
||||
(!debouncedDomain.includes("@") && !debouncedDomain.includes(".")) ||
|
||||
debouncedDomain.includes(" ") ||
|
||||
debouncedDomain.endsWith(".") ||
|
||||
debouncedDomain.length < 3 ||
|
||||
debouncedDomain.length > 254
|
||||
(!domain.includes("@") && !domain.includes(".")) ||
|
||||
domain.includes(" ") ||
|
||||
domain.endsWith(".") ||
|
||||
domain.length < 3 ||
|
||||
domain.length > 254
|
||||
) {
|
||||
setTenantId(null);
|
||||
setIsLoading(false);
|
||||
setError("Please enter a valid email address or domain.");
|
||||
return;
|
||||
}
|
||||
if (debouncedDomain.includes("@")) {
|
||||
const parts = debouncedDomain.split("@");
|
||||
if (domain.includes("@")) {
|
||||
const parts = domain.split("@");
|
||||
setIsLoading(false);
|
||||
setDebouncedDomain(parts[parts.length - 1]);
|
||||
setDomain(parts[parts.length - 1]);
|
||||
return;
|
||||
}
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
(async function () {
|
||||
const response = await fetch(uri.replace("{tenant}", debouncedDomain));
|
||||
const response = await fetch(uri.replace("{tenant}", domain));
|
||||
const body = await response.json();
|
||||
if (!response.ok) {
|
||||
setTenantId(null);
|
||||
@ -64,7 +60,7 @@ function App() {
|
||||
setTenantId(myTenantId);
|
||||
setIsLoading(false);
|
||||
})();
|
||||
}, [debouncedDomain, setDebouncedDomain]);
|
||||
}, [domain, setDomain]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -112,7 +108,7 @@ function App() {
|
||||
<Input
|
||||
placeholder="Enter your email address or domain"
|
||||
onChange={onChange}
|
||||
value={domain}
|
||||
value={input}
|
||||
/>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
Loading…
x
Reference in New Issue
Block a user