fix state variable, shadow style

pennlabs · Apr 9, 2024 · 7305882 · 7305882
1 parent bf2aaec
commit 7305882
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 45 deletions.
diff --git a/frontend/degree-plan/components/FourYearPlanPage.tsx b/frontend/degree-plan/components/FourYearPlanPage.tsx
@@ -104,7 +104,6 @@ const FourYearPlanPage = ({
   const ref = useRef(null);
 
   // search panel
-  const [searchedRuleId, setSearchedRuleId] = useState(-1);
   const [searchPanelOpen, setSearchPanelOpen] = useState<boolean>(false);
   const [searchRuleId, setSearchRuleId] = useState<Rule["id"] | null>(null);
   const [searchRuleQuery, setSearchRuleQuery] = useState<string | null>(null); // a query object
@@ -198,14 +197,12 @@ const FourYearPlanPage = ({
                         setModalKey={setModalKey}
                         setModalObject={setModalObject}
                         isLoading={isLoadingDegreeplans}
-                        searchedRuleId={searchedRuleId}
-                        setSearchedRuleId={setSearchedRuleId}
                         activeDegreeplan={activeDegreeplan}
                       />
                     </PanelInteriorWrapper>
                     {searchPanelOpen && (
                       <PanelInteriorWrapper $minWidth={"40%"} $maxWidth={"43%"}>
-                        <SearchPanel activeDegreeplanId={activeDegreeplan ? activeDegreeplan.id : null} setSearchedRuleId={setSearchedRuleId}/>
+                        <SearchPanel activeDegreeplanId={activeDegreeplan ? activeDegreeplan.id : null} setSearchedRuleId={setSearchRuleId}/>
                       </PanelInteriorWrapper>
                     )}
                   </PanelWrapper>

diff --git a/frontend/degree-plan/components/Requirements/QObject.tsx b/frontend/degree-plan/components/Requirements/QObject.tsx
@@ -81,8 +81,7 @@ const SearchConditionWrapper = styled(BaseCourseContainer)<{$isSearched: boolean
     cursor: pointer;
     padding: .5rem .75rem;
     ${props => !!props.$isSearched && `
-        border-radius: 10px;
-        box-shadow: 8px 6px 10px 8px #00000026;
+        box-shadow: 0px 0px 10px 2px var(--primary-color-dark);
     `}
 `
 
@@ -181,17 +180,15 @@ interface SearchConditionProps extends SearchConditionInnerProps {
     ruleId: Rule["id"];
     ruleQuery: string;
     activeDegreeplanId: DegreePlan["id"];
-    searchedRuleId: number;
-    setSearchedRuleId: (arg0: number) => void;
 }
-const SearchCondition = ({ ruleId, ruleQuery, fulfillments, ruleIsSatisfied, q, activeDegreeplanId, searchedRuleId, setSearchedRuleId}: SearchConditionProps) => {
-    const { setSearchPanelOpen, setSearchRuleQuery, setSearchRuleId, setSearchFulfillments } = useContext(SearchPanelContext);
+const SearchCondition = ({ ruleId, ruleQuery, fulfillments, ruleIsSatisfied, q, activeDegreeplanId}: SearchConditionProps) => {
+    const { setSearchPanelOpen, searchRuleId, setSearchRuleQuery, setSearchRuleId, setSearchFulfillments } = useContext(SearchPanelContext);
 
     return (
         <SearchConditionWrapper 
             $isDisabled={false}
             $isUsed={false}
-            $isSearched={searchedRuleId == ruleId}
+            $isSearched={searchRuleId == ruleId}
 
         >
             <SearchConditionInner q={q} />
@@ -268,10 +265,8 @@ interface QObjectProps {
     rule: Rule;
     satisfied: boolean;
     activeDegreePlanId: number;
-    searchedRuleId: number;
-    setSearchedRuleId: (arg0: number) => void;
 }
-const QObject = ({ q, fulfillments, rule, satisfied, activeDegreePlanId, searchedRuleId, setSearchedRuleId }: QObjectProps) => {
+const QObject = ({ q, fulfillments, rule, satisfied, activeDegreePlanId}: QObjectProps) => {
 
     // recursively render
     switch (q.type) {
@@ -317,8 +312,7 @@ const QObject = ({ q, fulfillments, rule, satisfied, activeDegreePlanId, searche
                     ruleId={rule.id} 
                     ruleQuery={rule.q} 
                     activeDegreeplanId={activeDegreePlanId} 
-                    searchedRuleId={searchedRuleId}
-                    setSearchedRuleId={setSearchedRuleId}/>
+                />
             })
 
             return <Row $wrap>
@@ -335,8 +329,6 @@ const QObject = ({ q, fulfillments, rule, satisfied, activeDegreePlanId, searche
                 ruleId={rule.id} 
                 ruleQuery={rule.q} 
                 activeDegreeplanId={activeDegreePlanId}
-                searchedRuleId={searchedRuleId}
-                setSearchedRuleId={setSearchedRuleId}
                 />;
         case "COURSE":
             const [fulfillment] = fulfillments.filter(fulfillment => fulfillment.full_code == q.full_code && (!q.semester || q.semester === fulfillment.semester))
@@ -351,8 +343,6 @@ interface RuleLeafProps {
     rule: Rule;
     satisfied: boolean;
     activeDegreePlanId: number;
-    searchedRuleId: number;
-    setSearchedRuleId: (arg0: number) => void;
 }
 
 export const SkeletonRuleLeaf = () => (
@@ -373,7 +363,7 @@ export const SkeletonRuleLeaf = () => (
 const RuleLeafWrapper = styled(Row)`
     margin-bottom: .5rem;
 `
-const RuleLeaf = ({ q_json, fulfillmentsForRule, rule, satisfied, activeDegreePlanId, searchedRuleId, setSearchedRuleId }: RuleLeafProps) => {
+const RuleLeaf = ({ q_json, fulfillmentsForRule, rule, satisfied, activeDegreePlanId }: RuleLeafProps) => {
     const t1 = transformDepartmentInClauses(q_json);
     const t2 = transformCourseClauses(t1);
     const t3 = transformSearchConditions(t2)
@@ -387,8 +377,6 @@ const RuleLeaf = ({ q_json, fulfillmentsForRule, rule, satisfied, activeDegreePl
                 rule={rule} 
                 satisfied={satisfied} 
                 activeDegreePlanId={activeDegreePlanId} 
-                searchedRuleId={searchedRuleId}
-                setSearchedRuleId={setSearchedRuleId}
                 />
         </RuleLeafWrapper>
     )

diff --git a/frontend/degree-plan/components/Requirements/ReqPanel.tsx b/frontend/degree-plan/components/Requirements/ReqPanel.tsx
@@ -162,7 +162,7 @@ const computeRuleTree = ({ activeDegreePlanId, rule, rulesToFulfillments }: Rule
 }
 
 
-const Degree = ({degree, rulesToFulfillments, activeDegreeplan, editMode, setModalKey, setModalObject, isLoading, searchedRuleId, setSearchedRuleId}: any) => {
+const Degree = ({degree, rulesToFulfillments, activeDegreeplan, editMode, setModalKey, setModalObject, isLoading}: any) => {
   const [collapsed, setCollapsed] = useState(false);  
   if (isLoading) {
     return (
@@ -216,9 +216,7 @@ const Degree = ({degree, rulesToFulfillments, activeDegreeplan, editMode, setMod
       <DegreeBody>
         {degree && degree.rules.map((rule: any) => (
           <RuleComponent 
-            ruleTree={{...computeRuleTree({ activeDegreePlanId: activeDegreeplan.id, rule, rulesToFulfillments })}}
-            searchedRuleId={searchedRuleId}
-            setSearchedRuleId={setSearchedRuleId}
+            {...computeRuleTree({ activeDegreePlanId: activeDegreeplan.id, rule, rulesToFulfillments })}
           />
         ))}
       </DegreeBody>}
@@ -231,10 +229,8 @@ interface ReqPanelProps {
   setModalObject: (arg0: DegreePlan | null) => void;
   activeDegreeplan: DegreePlan | null;
   isLoading: boolean;
-  searchedRuleId: number;
-  setSearchedRuleId: (arg0: number) => void;
 }
-const ReqPanel = ({setModalKey, setModalObject, activeDegreeplan, isLoading, searchedRuleId, setSearchedRuleId}: ReqPanelProps) => {
+const ReqPanel = ({setModalKey, setModalObject, activeDegreeplan, isLoading}: ReqPanelProps) => {
   const [editMode, setEditMode] = React.useState(false);  
   const { data: activeDegreeplanDetail = null, isLoading: isLoadingDegrees } = useSWR<DegreePlan>(activeDegreeplan ? `/api/degree/degreeplans/${activeDegreeplan.id}` : null); 
   const { data: fulfillments, isLoading: isLoadingFulfillments } = useSWR<Fulfillment[]>(activeDegreeplan ? `/api/degree/degreeplans/${activeDegreeplan.id}/fulfillments` : null); 
@@ -275,8 +271,6 @@ const ReqPanel = ({setModalKey, setModalObject, activeDegreeplan, isLoading, sea
             setModalKey={setModalKey}
             setModalObject={setModalObject}
             isLoading={isLoading}
-            searchedRuleId={searchedRuleId}
-            setSearchedRuleId={setSearchedRuleId}
             />
           ))}
           {editMode && <AddButton role="button" onClick={() => {

diff --git a/frontend/degree-plan/components/Requirements/Rule.tsx b/frontend/degree-plan/components/Requirements/Rule.tsx
@@ -40,7 +40,7 @@ const RuleTitle = styled.div`
 `
 
 const RuleLeafWrapper = styled.div<{$isDroppable:boolean, $isOver: boolean}>`
-  margin: .25rem;
+  padding: .5rem .5rem .5rem 0rem;
   margin-left: 0;
   display: flex;
   justify-content: space-between;
@@ -77,7 +77,7 @@ const Indented = styled.div`
 const Column = styled.div`
   display: flex;
   flex-direction: column;
-  gap: .1rem;
+  gap: 0rem;
 `
 
 const PickNWrapper = styled.div`
@@ -101,7 +101,7 @@ const RuleLeafLabel = styled.div`
 `
 
 const RuleLeafContainer = styled(Column)`
-  margin: 0.25rem;
+  margin: 0.1rem;
   }
 `
 
@@ -148,13 +148,8 @@ export const SkeletonRule: React.FC<React.PropsWithChildren> = ({ children }) =>
 /**
  * Recursive component to represent a rule.
  */
-interface RuleComponentProps {
-  ruleTree: RuleTree,
-  searchedRuleId: number,
-  setSearchedRuleId: (arg0: number) => void
-}
 
-const RuleComponent = ({ruleTree, searchedRuleId, setSearchedRuleId} : RuleComponentProps) => {
+const RuleComponent = (ruleTree : RuleTree) => {
     const { type, activeDegreePlanId, rule, progress } = ruleTree; 
     const satisfied = progress === 1;
 
@@ -194,8 +189,6 @@ const RuleComponent = ({ruleTree, searchedRuleId, setSearchedRuleId} : RuleCompo
                 fulfillmentsForRule={fulfillments} 
                 satisfied={satisfied} 
                 activeDegreePlanId={activeDegreePlanId}
-                searchedRuleId={searchedRuleId}
-                setSearchedRuleId={setSearchedRuleId}
                 />
               <Row>
               {!!satisfied && <SatisfiedCheck />}
@@ -225,7 +218,7 @@ const RuleComponent = ({ruleTree, searchedRuleId, setSearchedRuleId} : RuleCompo
         </PickNTitle>
             {children.map((ruleTree) => (
               <div>
-                <RuleComponent ruleTree={{...ruleTree}} searchedRuleId={searchedRuleId} setSearchedRuleId={setSearchedRuleId}/>
+                <RuleComponent {...ruleTree}/>
               </div>
             ))}
       </PickNWrapper>
@@ -254,7 +247,7 @@ const RuleComponent = ({ruleTree, searchedRuleId, setSearchedRuleId} : RuleCompo
             <Column>
               {children.map((ruleTree) => (
                 <div>
-                  <RuleComponent ruleTree={{...ruleTree}} searchedRuleId={searchedRuleId} setSearchedRuleId={setSearchedRuleId}/>
+                  <RuleComponent {...ruleTree}/>
                 </div>
               ))}
             </Column>