From 126884d72abe935bcc3bc53236d2c7a31f588441 Mon Sep 17 00:00:00 2001
From: Timofey Obraztsov <35554964+TimTimich6@users.noreply.github.com>
Date: Sat, 9 Dec 2023 05:40:10 -0500
Subject: [PATCH] Change anchor popup to button for AP prereqs (#386)

* change popup to button for ap prereqs

---------

Co-authored-by: Timofey Obraztsov <timofeyobraztsov@dhcp-v070-225.mobile.uci.edu>
---
 site/src/component/PrereqTree/PrereqTree.tsx | 134 +++++++++----------
 1 file changed, 63 insertions(+), 71 deletions(-)

diff --git a/site/src/component/PrereqTree/PrereqTree.tsx b/site/src/component/PrereqTree/PrereqTree.tsx
index 68df7650..5832263f 100644
--- a/site/src/component/PrereqTree/PrereqTree.tsx
+++ b/site/src/component/PrereqTree/PrereqTree.tsx
@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
-import './PrereqTree.scss';
-import { Grid, Popup } from 'semantic-ui-react';
+import React, { FC } from "react";
+import "./PrereqTree.scss";
+import { Grid, Popup } from "semantic-ui-react";
 
-import { PrerequisiteJSONNode, PrerequisiteJSON, CourseGQLData, CourseLookup } from '../../types/types';
+import { PrerequisiteJSONNode, PrerequisiteJSON, CourseGQLData, CourseLookup } from "../../types/types";
 
 interface NodeProps {
   node: string;
@@ -13,17 +13,25 @@ interface NodeProps {
 
 const Node: FC<NodeProps> = (props) => {
   return (
-    <div style={{ padding: '1px 0' }} className={`node-container ${props.node}`} key={props.index}>
+    <div style={{ padding: "1px 0" }} className={`node-container ${props.node}`} key={props.index}>
       <Popup
         trigger={
-          <a href={'/course/' + props.label.replace(/\s+/g, '')} role='button' style={{ padding: '0.5rem' }} className={'node ui button'}>
-            {props.label}
-          </a>
+          !props.label.startsWith("AP ") ? (
+            <a href={"/course/" + props.label.replace(/\s+/g, "")} role="button" style={{ padding: "0.5rem" }} className={`node ui button`}>
+              {props.label}
+            </a>
+          ) : (
+            <button style={{ padding: "0.5rem" }} className={`node ui button`}>{`${props.label}`}</button>
+          )
         }
-        content={props.content} basic position='top center' wide='very' />
+        content={props.content}
+        basic
+        position="top center"
+        wide="very"
+      />
     </div>
   );
-}
+};
 
 interface TreeProps {
   prerequisiteNames: CourseLookup;
@@ -34,94 +42,83 @@ interface TreeProps {
 
 const Tree: FC<TreeProps> = (props) => {
   let prerequisite = props.prerequisiteJSON;
-  let isValueNode = typeof prerequisite === 'string';
+  let isValueNode = typeof prerequisite === "string";
 
   // if value is a string, render leaf node
   if (isValueNode) {
-    let id = (prerequisite as string).replace(/\s+/g, '');
+    let id = (prerequisite as string).replace(/\s+/g, "");
     let content = prerequisite;
     if (props.prerequisiteNames.hasOwnProperty(id)) {
       content = props.prerequisiteNames[id].title;
     }
     return (
-      <li key={props.index} className={'prerequisite-node'}>
-        <Node label={prerequisite as string} content={content as string} node={'prerequisite-node'} />
+      <li key={props.index} className={"prerequisite-node"}>
+        <Node label={prerequisite as string} content={content as string} node={"prerequisite-node"} />
       </li>
-    )
+    );
   }
   // if value is an object, render the rest of the sub tree
   else {
     return (
-      <div style={{ margin: 'auto 0' }} className={'prerequisite-node'}>
-        <div style={{ display: 'inline-flex', flexDirection: 'row', padding: '0.5rem 0' }}>
-          <span style={{ margin: 'auto' }}>
-            <div className='prereq-branch'>
-              {prerequisite.hasOwnProperty('OR') ? 'one of' : 'all of'}
-            </div>
+      <div style={{ margin: "auto 0" }} className={"prerequisite-node"}>
+        <div style={{ display: "inline-flex", flexDirection: "row", padding: "0.5rem 0" }}>
+          <span style={{ margin: "auto" }}>
+            <div className="prereq-branch">{prerequisite.hasOwnProperty("OR") ? "one of" : "all of"}</div>
           </span>
-          <div className='prereq-clump'>
-            <ul className='prereq-list'>
-              {(prerequisite as PrerequisiteJSON)[Object.keys(prerequisite)[0]].map(
-                (child, index) => (
-                  <Tree key={`tree-${index}`} prerequisiteNames={props.prerequisiteNames} index={index} prerequisiteJSON={child} />
-                )
-              )}
+          <div className="prereq-clump">
+            <ul className="prereq-list">
+              {(prerequisite as PrerequisiteJSON)[Object.keys(prerequisite)[0]].map((child, index) => (
+                <Tree key={`tree-${index}`} prerequisiteNames={props.prerequisiteNames} index={index} prerequisiteJSON={child} />
+              ))}
             </ul>
           </div>
         </div>
       </div>
-    )
+    );
   }
-}
+};
 
-interface PrereqProps extends CourseGQLData {
-}
+interface PrereqProps extends CourseGQLData {}
 
 const PrereqTree: FC<PrereqProps> = (props) => {
-  let hasPrereqs = props.prerequisite_tree !== '';
+  let hasPrereqs = props.prerequisite_tree !== "";
   let hasDependencies = Object.keys(props.prerequisite_for).length !== 0;
 
   if (props.id === undefined) return <></>;
   else if (!hasPrereqs && !hasDependencies)
     return (
-      <div className='missing-tree'>
-        <p>
-          No Dependencies or Prerequisites!
-        </p>
+      <div className="missing-tree">
+        <p>No Dependencies or Prerequisites!</p>
       </div>
     );
   return (
     <div>
-      <Grid.Row className='prereq'>
+      <Grid.Row className="prereq">
         <div
           style={{
-            display: 'inline-flex',
-            flexDirection: 'row',
-            width: 'fit-content',
-            justifyContent: 'center',
-            margin: 'auto'
+            display: "inline-flex",
+            flexDirection: "row",
+            width: "fit-content",
+            justifyContent: "center",
+            margin: "auto",
           }}
         >
           {/* Display dependencies */}
           {hasDependencies && (
             <>
-              <ul style={{ padding: '0', display: 'flex' }}>
-                <div className='dependency-list-branch'>
-                  {Object.values(props.prerequisite_for).map(
-                    (dependency, index) => (
-                      <li key={`dependency-node-${index}`} className={'dependency-node'}>
-                        <Node label={dependency.department + ' ' + dependency.number} content={dependency.title} node={'dependency-node'} />
-                      </li>
-                    )
-                  )}
+              <ul style={{ padding: "0", display: "flex" }}>
+                <div className="dependency-list-branch">
+                  {Object.values(props.prerequisite_for).map((dependency, index) => (
+                    <li key={`dependency-node-${index}`} className={"dependency-node"}>
+                      <Node label={dependency.department + " " + dependency.number} content={dependency.title} node={"dependency-node"} />
+                    </li>
+                  ))}
                 </div>
               </ul>
 
-              <div style={{ display: 'inline-flex', flexDirection: 'row', marginLeft: '0.5rem' }}>
-                <span style={{ margin: 'auto 1rem' }}>
-                  <div className='dependency-needs dependency-branch'>
-                    needs
-                  </div>
+              <div style={{ display: "inline-flex", flexDirection: "row", marginLeft: "0.5rem" }}>
+                <span style={{ margin: "auto 1rem" }}>
+                  <div className="dependency-needs dependency-branch">needs</div>
                 </span>
               </div>
             </>
@@ -134,16 +131,12 @@ const PrereqTree: FC<PrereqProps> = (props) => {
           </div>} */}
 
           {/* Display the class id */}
-          <Node label={props.id} content={props.title} node={'course-node'} />
+          <Node label={props.id} content={props.title} node={"course-node"} />
 
           {/* Spawns the root of the prerequisite tree */}
           {hasPrereqs && (
-            <div style={{ display: 'flex' }}>
-              <Tree
-                prerequisiteNames={props.prerequisite_list}
-                prerequisiteJSON={JSON.parse(props.prerequisite_tree)}
-              />
-
+            <div style={{ display: "flex" }}>
+              <Tree prerequisiteNames={props.prerequisite_list} prerequisiteJSON={JSON.parse(props.prerequisite_tree)} />
             </div>
           )}
 
@@ -152,14 +145,13 @@ const PrereqTree: FC<PrereqProps> = (props) => {
               No Prerequisites!
             </p>
           </div>} */}
-
         </div>
-        {props.prerequisite_text !== '' && (
+        {props.prerequisite_text !== "" && (
           <div
             style={{
-              padding: '1em',
-              backgroundColor: '#f5f5f5',
-              marginTop: '2em',
+              padding: "1em",
+              backgroundColor: "#f5f5f5",
+              marginTop: "2em",
             }}
           >
             <p>
@@ -171,6 +163,6 @@ const PrereqTree: FC<PrereqProps> = (props) => {
       </Grid.Row>
     </div>
   );
-}
+};
 
-export default PrereqTree;
\ No newline at end of file
+export default PrereqTree;