modal window only appears if the problem is solved

mraron · Sep 26, 2023 · f095322 · f095322
1 parent 7d8d28f
commit f095322
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 37 deletions.
diff --git a/frontend/src/RoutingComponent.js b/frontend/src/RoutingComponent.js
@@ -58,7 +58,7 @@ function RoutingComponent() {
         const routeIndex = findRouteIndex(routes, location.pathname);
         if (routeIndex !== -1) {
             const params = extractParams(location.pathname, routes[routeIndex]);
-            console.log(params)
+            console.log(params);
             document.title = t(titles[routes[routeIndex]], { params });
         } else {
             document.title = "njudge";

diff --git a/frontend/src/components/container/TagListFrame.js b/frontend/src/components/container/TagListFrame.js
@@ -19,8 +19,8 @@ export function LinkTag({ data }) {
 }
 
 function TagListFrame({ title, titleComponent, tag: Tag = DefaultTag, tags }) {
-    console.log(tags)
-    console.log("nigga")
+    console.log(tags);
+    console.log("nigga");
     const tagsContent = tags.map((item, index) => (
         <div className="flex m-1" key={index}>
             <Tag data={item} key={index} />

diff --git a/frontend/src/components/container/modal/Modal.js b/frontend/src/components/container/modal/Modal.js
@@ -1,21 +1,32 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClose } from "@fortawesome/free-solid-svg-icons";
 
-function Modal({children, isOpen, onClose}) {
+function Modal({ children, isOpen, onClose }) {
     return (
         <>
-            {isOpen &&
-                <div className="z-40 fixed inset-0 bg-black opacity-50" onClick={onClose}>
-                    <button onClick={onClose} className="flex items-center justify-center absolute top-2 right-2 p-2 rounded-full bg-transparent hover:bg-grey-100 dark:hover:bg-grey-800">
-                        <FontAwesomeIcon icon={faClose} className="w-6 h-6 text-white" />
+            {isOpen && (
+                <div
+                    className="z-40 fixed inset-0 bg-black opacity-50"
+                    onClick={onClose}>
+                    <button
+                        onClick={onClose}
+                        className="flex items-center justify-center absolute top-2 right-2 p-2 rounded-full bg-transparent hover:bg-grey-100 dark:hover:bg-grey-800">
+                        <FontAwesomeIcon
+                            icon={faClose}
+                            className="w-6 h-6 text-white"
+                        />
                     </button>
-                </div>}
-            {isOpen &&
-                <div className="z-50 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" onClick={(event) => event.stopPropagation()}>
+                </div>
+            )}
+            {isOpen && (
+                <div
+                    className="z-50 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+                    onClick={(event) => event.stopPropagation()}>
                     {children}
-                </div>}
+                </div>
+            )}
         </>
-    )
+    );
 }
 
-export default Modal
+export default Modal;
diff --git a/frontend/src/components/container/modal/TagModal.js b/frontend/src/components/container/modal/TagModal.js
@@ -8,27 +8,39 @@ import TagDropdown from "../../input/TagDropdown";
 import SVGTitleComponent from "../../svg/SVGTitleComponent";
 import JudgeDataContext from "../../../contexts/judgeData/JudgeDataContext";
 
-function TagModal({isOpen, onClose}) {
-    const { t } = useTranslation()
-    const { judgeData } = useContext(JudgeDataContext)
+function TagModal({ isOpen, onClose }) {
+    const { t } = useTranslation();
+    const { judgeData } = useContext(JudgeDataContext);
     const titleComponent = (
-        <SVGTitleComponent svg={<FontAwesomeIcon icon={faTags} className="w-5 h-5 mr-2" />} title={t("tag_modal.title")} />
-    )
+        <SVGTitleComponent
+            svg={<FontAwesomeIcon icon={faTags} className="w-5 h-5 mr-2" />}
+            title={t("tag_modal.title")}
+        />
+    );
     return (
         <Modal isOpen={isOpen} onClose={onClose}>
             <RoundedFrame titleComponent={titleComponent} cls="shadow-md">
                 <div className="w-96 px-6 py-5">
                     <div className="mb-5">
-                        <TagDropdown itemNames={judgeData.tags.map(t)} initTags={[0, 1]} />
+                        <TagDropdown
+                            itemNames={judgeData.tags.map(t)}
+                            initTags={[0, 1]}
+                        />
                     </div>
                     <div className="flex justify-center">
-                        <button className="w-full btn-indigo padding-btn-default mr-2">{t("tag_modal.save")}</button>
-                        <button className="w-full btn-gray padding-btn-default" onClick={onClose}>{t("tag_modal.cancel")}</button>
+                        <button className="w-full btn-indigo padding-btn-default mr-2">
+                            {t("tag_modal.save")}
+                        </button>
+                        <button
+                            className="w-full btn-gray padding-btn-default"
+                            onClick={onClose}>
+                            {t("tag_modal.cancel")}
+                        </button>
                     </div>
                 </div>
             </RoundedFrame>
         </Modal>
-    )
+    );
 }
 
-export default TagModal
+export default TagModal;
diff --git a/frontend/src/components/input/TagDropdown.js b/frontend/src/components/input/TagDropdown.js
@@ -32,7 +32,7 @@ function TagDropdown({ id, label, itemNames, initTags = [], onChange }) {
     const [tags, setTags] = useState(initTags);
     useEffect(() => {
         if (onChange) {
-            onChange(tags)
+            onChange(tags);
         }
     }, [onChange, tags]);
 

diff --git a/frontend/src/config/RouteConfig.js b/frontend/src/config/RouteConfig.js
@@ -20,9 +20,9 @@ export const routeMap = {
     admin: "/user/admin/",
 };
 
-const apiRoot = "https://127.0.0.1:5555/api/v2"
+const apiRoot = "https://127.0.0.1:5555/api/v2";
 
 export function apiRoute(route) {
-    console.log(`${apiRoot}${route}`)
-    return `${apiRoot}${route}`
+    console.log(`${apiRoot}${route}`);
+    return `${apiRoot}${route}`;
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -101,7 +101,7 @@
 }
 
 #root {
-    @apply h-full antialiased bg-grey-900 text-textcol
+    @apply h-full antialiased bg-grey-900 text-textcol;
 }
 
 .padding-btn-default {

diff --git a/frontend/src/pages/problem/ProblemStatement.js b/frontend/src/pages/problem/ProblemStatement.js
@@ -32,8 +32,8 @@ import TagModal from "../../components/container/modal/TagModal";
 
 function ProblemInfo({ info }) {
     const { t } = useTranslation();
-    const { theme } = useContext(ThemeContext)
-    const [isModalOpen, setModalOpen] = useState(false)
+    const { theme } = useContext(ThemeContext);
+    const [isModalOpen, setModalOpen] = useState(false);
     const tagsContent = (
         <div className="flex-col">
             <div className="flex flex-wrap mb-4">
@@ -42,9 +42,17 @@ function ProblemInfo({ info }) {
                         {t(tagName)}
                     </span>
                 ))}
-                <button className="tag flex items-center" key={info.tags.length} onClick={() => setModalOpen(true)}>
-                    <FontAwesomeIcon icon={theme === "light"? faPenToSquare: faEdit} className="w-3 h-3" />
-                </button>
+                {info.isSolved && (
+                    <button
+                        className="tag flex items-center"
+                        key={info.tags.length}
+                        onClick={() => setModalOpen(true)}>
+                        <FontAwesomeIcon
+                            icon={theme === "light" ? faPenToSquare : faEdit}
+                            className="w-3 h-3"
+                        />
+                    </button>
+                )}
             </div>
         </div>
     );
@@ -56,7 +64,12 @@ function ProblemInfo({ info }) {
     );
     return (
         <>
-            <TagModal isOpen={isModalOpen} onClose={() => setModalOpen(false)}/>
+            {info.isSolved && (
+                <TagModal
+                    isOpen={isModalOpen}
+                    onClose={() => setModalOpen(false)}
+                />
+            )}
             <MapDataFrame
                 titleComponent={titleComponent}
                 data={[
@@ -212,7 +225,9 @@ function ProblemAttachment({ type, name, href }) {
         <li>
             <a
                 className="link no-underline flex items-start my-0.5"
-                href={apiRoute(href)} download="statement.pdf" target="_blank">
+                href={apiRoute(href)}
+                download="statement.pdf"
+                target="_blank">
                 {type === "file" && (
                     <SVGAttachmentFile cls="w-5 h-5 mr-2 shrink-0" />
                 )}
@@ -280,7 +295,9 @@ function ProblemStatement({ data }) {
                         <div className="w-full px-4 py-3 sm:px-6 sm:py-5 flex">
                             <div className="w-full mr-3 min-w-0">
                                 <DropdownMenu
-                                    itemNames={data.attachments.statements.map(item => item.name)}
+                                    itemNames={data.attachments.statements.map(
+                                        (item) => item.name,
+                                    )}
                                     onChange={setStatementIndex}
                                 />
                             </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -101,7 +101,7 @@ @@
     }
     #root {
-        @apply h-full antialiased bg-grey-900 text-textcol
+        @apply h-full antialiased bg-grey-900 text-textcol;
     }
     .padding-btn-default {
@@ Expand Down @@