mirror of https://github.com/arc53/DocsGPT
Merge pull request #120 from ajaythapliyal/ui-cleanup
Nick's feedback List : 1, 2, 4, 6pull/122/head
Alex
2 years ago
committed by
GitHub
commit
3e5a686a73
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H4L2 16V2H18V14Z" fill="black" fill-opacity="0.54"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 249 B |
@ -1,132 +1,132 @@
|
|||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
import { ActiveState } from '../models/misc';
|
import { ActiveState } from '../models/misc';
|
||||||
import {
|
import {
|
||||||
setSelectedDocs,
|
setSelectedDocs,
|
||||||
setSourceDocs,
|
setSourceDocs,
|
||||||
selectSourceDocs,
|
selectSourceDocs,
|
||||||
} from './preferenceSlice';
|
} from './preferenceSlice';
|
||||||
import { getDocs, Doc } from './selectDocsApi';
|
import { getDocs, Doc } from './selectDocsApi';
|
||||||
|
|
||||||
export default function APIKeyModal({
|
export default function APIKeyModal({
|
||||||
modalState,
|
modalState,
|
||||||
setModalState,
|
setModalState,
|
||||||
isCancellable = true,
|
isCancellable = true,
|
||||||
}: {
|
}: {
|
||||||
modalState: ActiveState;
|
modalState: ActiveState;
|
||||||
setModalState: (val: ActiveState) => void;
|
setModalState: (val: ActiveState) => void;
|
||||||
isCancellable?: boolean;
|
isCancellable?: boolean;
|
||||||
}) {
|
}) {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const docs = useSelector(selectSourceDocs);
|
const docs = useSelector(selectSourceDocs);
|
||||||
const [localSelectedDocs, setLocalSelectedDocs] = useState<Doc | null>(null);
|
const [localSelectedDocs, setLocalSelectedDocs] = useState<Doc | null>(null);
|
||||||
const [isDocsListOpen, setIsDocsListOpen] = useState(false);
|
const [isDocsListOpen, setIsDocsListOpen] = useState(false);
|
||||||
const [isError, setIsError] = useState(false);
|
const [isError, setIsError] = useState(false);
|
||||||
|
|
||||||
function handleSubmit() {
|
function handleSubmit() {
|
||||||
if (!localSelectedDocs) {
|
if (!localSelectedDocs) {
|
||||||
setIsError(true);
|
setIsError(true);
|
||||||
} else {
|
} else {
|
||||||
dispatch(setSelectedDocs(localSelectedDocs));
|
dispatch(setSelectedDocs(localSelectedDocs));
|
||||||
setModalState('INACTIVE');
|
setModalState('INACTIVE');
|
||||||
setLocalSelectedDocs(null);
|
setLocalSelectedDocs(null);
|
||||||
setIsError(false);
|
setIsError(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleCancel() {
|
function handleCancel() {
|
||||||
setLocalSelectedDocs(null);
|
setLocalSelectedDocs(null);
|
||||||
setIsError(false);
|
setIsError(false);
|
||||||
setModalState('INACTIVE');
|
setModalState('INACTIVE');
|
||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function requestDocs() {
|
async function requestDocs() {
|
||||||
const data = await getDocs();
|
const data = await getDocs();
|
||||||
dispatch(setSourceDocs(data));
|
dispatch(setSourceDocs(data));
|
||||||
}
|
}
|
||||||
|
|
||||||
requestDocs();
|
requestDocs();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`${
|
className={`${
|
||||||
modalState === 'ACTIVE' ? 'visible' : 'hidden'
|
modalState === 'ACTIVE' ? 'visible' : 'hidden'
|
||||||
} absolute z-30 h-screen w-screen bg-gray-alpha`}
|
} absolute z-30 h-screen w-screen bg-gray-alpha`}
|
||||||
>
|
>
|
||||||
<article className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
|
<article className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
|
||||||
<p className="text-xl text-jet">Select Source Documentation</p>
|
<p className="text-xl text-jet">Select Source Documentation</p>
|
||||||
<p className="text-lg leading-5 text-gray-500">
|
<p className="text-md leading-6 text-gray-500">
|
||||||
Please select the library of documentation that you would like to use
|
Please select the library of documentation that you would like to use
|
||||||
with our app.
|
with our app.
|
||||||
</p>
|
</p>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div
|
<div
|
||||||
className="h-10 w-full cursor-pointer border-b-2"
|
className="h-10 w-full cursor-pointer border-b-2"
|
||||||
onClick={() => setIsDocsListOpen(!isDocsListOpen)}
|
onClick={() => setIsDocsListOpen(!isDocsListOpen)}
|
||||||
>
|
>
|
||||||
{!localSelectedDocs ? (
|
{!localSelectedDocs ? (
|
||||||
<p className="py-3 text-gray-500">Select</p>
|
<p className="py-3 text-gray-500">Select</p>
|
||||||
) : (
|
) : (
|
||||||
<p className="py-3">
|
<p className="py-3">
|
||||||
{localSelectedDocs.name} {localSelectedDocs.version}
|
{localSelectedDocs.name} {localSelectedDocs.version}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{isDocsListOpen && (
|
{isDocsListOpen && (
|
||||||
<div className="absolute top-10 left-0 max-h-52 w-full overflow-y-scroll bg-white">
|
<div className="absolute top-10 left-0 max-h-52 w-full overflow-y-scroll bg-white">
|
||||||
{docs ? (
|
{docs ? (
|
||||||
docs.map((doc, index) => {
|
docs.map((doc, index) => {
|
||||||
if (doc.model) {
|
if (doc.model) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setLocalSelectedDocs(doc);
|
setLocalSelectedDocs(doc);
|
||||||
setIsDocsListOpen(false);
|
setIsDocsListOpen(false);
|
||||||
}}
|
}}
|
||||||
className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
|
className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
|
||||||
>
|
>
|
||||||
<p className="ml-5 py-3">
|
<p className="ml-5 py-3">
|
||||||
{doc.name} {doc.version}
|
{doc.name} {doc.version}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
) : (
|
) : (
|
||||||
<div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
|
<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>
|
<p className="ml-5 py-3">No default documentation.</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-row-reverse">
|
<div className="flex flex-row-reverse">
|
||||||
{isCancellable && (
|
{isCancellable && (
|
||||||
<button
|
<button
|
||||||
onClick={() => handleCancel()}
|
onClick={() => handleCancel()}
|
||||||
className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
|
className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
handleSubmit();
|
handleSubmit();
|
||||||
}}
|
}}
|
||||||
className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
|
className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
|
||||||
>
|
>
|
||||||
Save
|
Save
|
||||||
</button>
|
</button>
|
||||||
{isError && (
|
{isError && (
|
||||||
<p className="mr-auto text-sm text-red-500">
|
<p className="mr-auto text-sm text-red-500">
|
||||||
Please select source documentation.
|
Please select source documentation.
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue