General Housekeeping

backend/src/controllers/units.ts

@@ -4,7 +4,7 @@ import createHttpError from "http-errors";
 import { asyncHandler } from "./wrappers";
 
 import { UnitModel } from "@/models/units";
-import { getUnitReferrals } from "@/services/referral";
+import { deleteUnitReferrals, getUnitReferrals } from "@/services/referral";
 import {
   EditUnitBody,
   FilterParams,
@@ -34,9 +34,13 @@ export const deleteUnitsHandler: RequestHandler = asyncHandler(async (req, res,
   const response = await deleteUnit(id);
   if (response === null) {
     res.status(400);
-  } else {
-    res.status(200).json(response);
   }
+  const referral = await deleteUnitReferrals(id);
+  if (referral === null) {
+    res.status(400);
+  }
+
+  res.status(200).json(response);
 });
 
 export const getUnitsHandler: RequestHandler = asyncHandler(async (req, res, _) => {

backend/src/services/referral.ts

@@ -41,3 +41,7 @@ export async function editReferral(
   const referral = await ReferralModel.findById(id);
   return referral;
 }
+
+export async function deleteUnitReferrals(unitId: string) {
+  return await ReferralModel.deleteMany({ unit: unitId });
+}

backend/src/validators/units.ts

@@ -24,7 +24,9 @@ const createUnitSchema = [
     .exists()
     .withMessage("is required")
     .isString()
-    .withMessage("must be a string"),
+    .withMessage("must be a string")
+    .notEmpty()
+    .withMessage("cannot be empty"),
   body("streetAddress")
     .exists()
     .withMessage("is required")

frontend/src/components/FilterDropdown.tsx

@@ -1,9 +1,13 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 
+import { Button } from "./Button";
+
 import { FilterParams } from "@/api/units";
-import { FilterText } from "@/components/FilterCommon";
+// import { FilterText } from "@/components/FilterCommon";
 import { SortDropDownComp } from "@/components/SortDropDown";
+import { DataContext } from "@/contexts/DataContext";
 
 const AllFiltersContainer = styled.div`
   display: flex;
@@ -12,7 +16,7 @@ const AllFiltersContainer = styled.div`
   align-items: flex-start;
   margin-left: 95px;
   margin-right: 95px;
-  margin-top: 55px;
+  margin-top: 70px;
   gap: 16px;
 `;
 
@@ -21,7 +25,7 @@ const FiltersFirstRow = styled.div`
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  gap: 28px;
+  gap: 33px;
   flex-wrap: wrap;
 `;
 
@@ -63,22 +67,22 @@ const SearchBarContainer = styled.div`
   box-shadow: 1px 1px 2px 0px rgba(188, 186, 183, 0.4);
 `;
 
-const ResetIcon = styled.img`
-  height: 25px;
-  width: 25px;
-`;
+// const ResetIcon = styled.img`
+//   height: 25px;
+//   width: 25px;
+// `;
 
 const ResetFilterButton = styled.button`
   background-color: transparent;
   border-color: transparent;
   cursor: pointer;
 `;
 
-const ResetFilterText = styled(FilterText)`
-  color: #b64201;
-  font-weight: 500;
-  padding-top: 2px;
-`;
+// const ResetFilterText = styled(FilterText)`
+//   color: #b64201;
+//   font-weight: 500;
+//   padding-top: 2px;
+// `;
 
 const ResetFilterRow = styled.div`
   display: flex;
@@ -88,6 +92,20 @@ const ResetFilterRow = styled.div`
   gap: 8px;
 `;
 
+const AddListings = styled(Button)`
+  height: 44px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 150%;
+  letter-spacing: 0.32px;
+  padding: 8px 20px;
+`;
+
 type FilterDropdownProps = {
   value: FilterParams;
   refreshUnits(filterParams: FilterParams): void;
@@ -108,6 +126,9 @@ export const FilterDropdown = (props: FilterDropdownProps) => {
     maxPrice: String(props.value.maxPrice) === "undefined" ? -1 : Number(props.value.maxPrice),
   });
 
+  const navigate = useNavigate();
+  const dataContext = useContext(DataContext);
+
   const applyFilters = () => {
     const filters = {
       search: searchText ?? "undefined",
@@ -150,11 +171,23 @@ export const FilterDropdown = (props: FilterDropdownProps) => {
           />
           <SearchIcon src="/search.svg" onClick={applyFilters} />
         </SearchBarContainer>
+        {dataContext.currentUser?.isHousingLocator && (
+          <AddListings
+            kind="primary"
+            onClick={() => {
+              navigate("/new-listing");
+            }}
+          >
+            <img src="/plus_sign.svg" alt="" />
+            <span>Listing</span>
+          </AddListings>
+        )}
 
         <ResetFilterButton onClick={resetFilters}>
           <ResetFilterRow>
+            {/* Commented out for now since I'm not sure if we're still using this
             <ResetIcon src="/refresh.svg" />
-            <ResetFilterText> Reset filters</ResetFilterText>
+            <ResetFilterText> Reset filters</ResetFilterText> */}
           </ResetFilterRow>
         </ResetFilterButton>
       </FiltersFirstRow>

frontend/src/components/ReferralTable.tsx

@@ -26,7 +26,7 @@ const TABLE_COLUMN_NAMES = [
 ];
 
 const ReferralTableContainer = styled.div`
-  margin-top: 40px;
+  margin-top: 0px;
 `;
 
 const ReferralTableTitleSection = styled.div`
@@ -200,6 +200,7 @@ export const ReferralTable = (props: ReferralTableProps) => {
               }}
               initialSelection={assignedReferringStaff}
               options={allReferringStaff}
+              isTableDropdown={true}
             />,
             <UserDropdown
               key={`hl-select-${idx}`}
@@ -210,6 +211,7 @@ export const ReferralTable = (props: ReferralTableProps) => {
               }}
               initialSelection={assignedHousingLocator}
               options={allHousingLocators}
+              isTableDropdown={true}
             />,
             <ReferralTableDropDown
               key={`status-select-${idx}`}

frontend/src/components/SortDropDown.tsx

@@ -8,6 +8,7 @@ import { DropDownPopup, DropdownIcon, FilterSubContainer, Sort } from "@/compone
 const SortDropDown = styled(DropDownPopup)`
   margin-top: 30px;
   padding-right: 70px;
+  z-index: 1;
 `;
 
 const SortRow = styled.div`

frontend/src/components/UnitCardGrid.tsx

@@ -1,5 +1,4 @@
 import { useContext, useState } from "react";
-import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 
 import { Unit } from "@/api/units";
@@ -71,27 +70,6 @@ const ListingsButton = styled(PendingButton)`
   left: -10px;
 `;
 
-const AddListings = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 160px;
-  padding: 15px 32px 15px 24px;
-  align-items: center;
-  border-radius: 30px;
-  border: 1px solid #d9d8d8;
-  background: rgba(182, 66, 1, 0.8);
-  box-shadow: 0px 4px 4px 0px rgba(190, 180, 180, 0.25);
-  position: fixed;
-  left: 85vw;
-  bottom: 7.5vh;
-  color: #fff;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: normal;
-  cursor: pointer;
-`;
-
 export type UnitCardGridProps = {
   units: Unit[];
   showPendingUnits?: boolean;
@@ -103,7 +81,6 @@ export const UnitCardGrid = ({
   refreshUnits,
   showPendingUnits = false,
 }: UnitCardGridProps) => {
-  const navigate = useNavigate();
   const [pendingSelected, setPendingSelected] = useState<boolean>(showPendingUnits);
 
   const dataContext = useContext(DataContext);
@@ -154,16 +131,6 @@ export const UnitCardGrid = ({
           {units.length === 0 && <HeaderText>No matching units found</HeaderText>}
         </UnitCardLayout>
       </GridContainer>
-      {dataContext.currentUser?.isHousingLocator && (
-        <AddListings
-          onClick={() => {
-            navigate("/new-listing");
-          }}
-        >
-          <img src="add_symbol.svg" alt="add" />
-          <div>Listings</div>
-        </AddListings>
-      )}
     </>
   );
 };

frontend/src/components/UserDropdown.tsx

@@ -10,9 +10,9 @@ const SearchContainer = styled.div`
   position: relative;
 `;
 
-const Icon = styled.img`
+const Icon = styled.img<{ isTableDropdown?: boolean }>`
   position: absolute;
-  top: 10px;
+  top: ${(props) => (props.isTableDropdown ? "12px" : "10px")};
   right: 10px;
 `;
 
@@ -88,6 +88,7 @@ type SelectProps = {
   onSelect: (value: Option) => void; //callback function for parent, sends current selected user
   reset?: boolean;
   isRCDropdown?: boolean;
+  isTableDropdown?: boolean;
 };
 
 export function UserDropdown({
@@ -98,6 +99,7 @@ export function UserDropdown({
   onSelect,
   reset,
   isRCDropdown,
+  isTableDropdown,
 }: SelectProps) {
   const [openMenu, setOpenMenu] = useState(false);
   const [searchValue, setSearchValue] = useState(""); //current text value in select input box
@@ -222,7 +224,11 @@ export function UserDropdown({
           </OptionsContainer>
         </ClickAwayListener>
       )}
-      <Icon src="/SearchSymbol.svg" alt="search" />
+      {isTableDropdown ? (
+        <Icon isTableDropdown={true} src={openMenu ? "/up_arrow.svg" : "/dropdown.svg"} />
+      ) : (
+        <Icon src="/SearchSymbol.svg" alt="search" />
+      )}
     </SearchContainer>
   );
 }