File size: 3,816 Bytes
fed832e |
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 |
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { ActiveState } from '../models/misc';
import Modal from '../Modal';
import {
setSelectedDocs,
setSourceDocs,
selectSourceDocs,
selectSelectedDocs,
} from './preferenceSlice';
import { getDocs, Doc } from './preferenceApi';
export default function APIKeyModal({
modalState,
setModalState,
isCancellable = true,
}: {
modalState: ActiveState;
setModalState: (val: ActiveState) => void;
isCancellable?: boolean;
}) {
const dispatch = useDispatch();
const docs = useSelector(selectSourceDocs);
const selectedDoc = useSelector(selectSelectedDocs);
const [localSelectedDocs, setLocalSelectedDocs] = useState<Doc | null>(
selectedDoc,
);
const [isDocsListOpen, setIsDocsListOpen] = useState(false);
const [isError, setIsError] = useState(false);
function handleSubmit() {
if (!localSelectedDocs) {
setIsError(true);
} else {
dispatch(setSelectedDocs(localSelectedDocs));
setModalState('INACTIVE');
setIsError(false);
}
}
function handleCancel() {
setIsError(false);
setModalState('INACTIVE');
}
useEffect(() => {
async function requestDocs() {
const data = await getDocs();
dispatch(setSourceDocs(data));
}
requestDocs();
}, []);
return (
<Modal
handleSubmit={handleSubmit}
isCancellable={isCancellable}
handleCancel={handleCancel}
modalState={modalState}
errorMessage="Please select Source Documentation"
isError={isError}
render={() => {
return (
<article className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-t-lg bg-white p-6 shadow-lg">
<p className="text-xl text-jet">Select Source Documentation</p>
<p className="text-lg leading-5 text-gray-500">
Please select the library of documentation that you would like to
use with our app.
</p>
<div className="relative">
<div
className="h-10 w-full cursor-pointer border-b-2"
onClick={() => setIsDocsListOpen(!isDocsListOpen)}
>
{!localSelectedDocs ? (
<p className="py-3 text-gray-500">Select</p>
) : (
<p className="py-3">
{localSelectedDocs.name} {localSelectedDocs.version}
</p>
)}
</div>
{isDocsListOpen && (
<div className="absolute top-10 left-0 max-h-52 w-full overflow-y-scroll bg-white">
{docs ? (
docs.map((doc, index) => {
if (doc.model) {
return (
<div
key={index}
onClick={() => {
setLocalSelectedDocs(doc);
setIsDocsListOpen(false);
}}
className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
>
<p className="ml-5 py-3">
{doc.name} {doc.version}
</p>
</div>
);
}
})
) : (
<div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
<p className="ml-5 py-3">No default documentation.</p>
</div>
)}
</div>
)}
</div>
</article>
);
}}
/>
);
}
|