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

@@ -85,6 +85,10 @@ export async function editReferral(
   return referral;
 }
 
+export async function deleteUnitReferrals(unitId: string) {
+  return await ReferralModel.deleteMany({ unit: unitId });
+}
+
 export async function deleteReferral(id: string) {
   return await ReferralModel.deleteOne({ _id: id });
 }

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,7 +1,11 @@
 import { useContext } from "react";
+import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 
+import { Button } from "./Button";
+
 import { SortDropDownComp } from "@/components/SortDropDown";
+import { DataContext } from "@/contexts/DataContext";
 import { FiltersContext } from "@/pages/Home";
 
 const AllFiltersContainer = styled.div`
@@ -17,7 +21,7 @@ const FiltersFirstRow = styled.div`
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  gap: 28px;
+  gap: 33px;
   flex-wrap: wrap;
 `;
 
@@ -59,13 +63,29 @@ const SearchBarContainer = styled.div`
   box-shadow: 1px 1px 2px 0px rgba(188, 186, 183, 0.4);
 `;
 
+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;
+`;
+
 export type FilterDropdownProps = {
   searchText: string;
   sortIndex: number;
 };
 
 export const FilterDropdown = (props: FilterDropdownProps) => {
   const { filters, setFilters } = useContext(FiltersContext);
+  const navigate = useNavigate();
+  const dataContext = useContext(DataContext);
 
   return (
     <AllFiltersContainer>
@@ -80,6 +100,17 @@ export const FilterDropdown = (props: FilterDropdownProps) => {
           />
           <SearchIcon src="/search.svg" />
         </SearchBarContainer>
+        {dataContext.currentUser?.isHousingLocator && (
+          <AddListings
+            kind="primary"
+            onClick={() => {
+              navigate("/new-listing");
+            }}
+          >
+            <img src="/plus_sign.svg" alt="" />
+            <span>Listing</span>
+          </AddListings>
+        )}
       </FiltersFirstRow>
 
       <SortDropDownComp

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`
@@ -159,6 +159,7 @@ export const ReferralTable = (props: ReferralTableProps) => {
           }}
           initialSelection={referral.assignedHousingLocator}
           options={allReferringStaff}
+          isTableDropdown={true}
         />
       );
     }
@@ -215,6 +216,7 @@ export const ReferralTable = (props: ReferralTableProps) => {
               }}
               initialSelection={assignedReferringStaff}
               options={allReferringStaff}
+              isTableDropdown={true}
             />,
             HLSection(referral),
             <ReferralTableDropDown

frontend/src/components/UnitCardGrid.tsx

@@ -1,10 +1,7 @@
-import { useContext } from "react";
-import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 
 import { Unit } from "@/api/units";
 import { UnitCard } from "@/components/UnitCard";
-import { DataContext } from "@/contexts/DataContext";
 
 const UnitCardLayout = styled.div`
   display: flex;
@@ -18,27 +15,6 @@ const HeaderText = styled.span`
   font-size: 32px;
 `;
 
-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;
@@ -50,10 +26,6 @@ export const UnitCardGrid = ({
   refreshUnits,
   showPendingUnits = false,
 }: UnitCardGridProps) => {
-  const navigate = useNavigate();
-
-  const dataContext = useContext(DataContext);
-
   return (
     <>
       <UnitCardLayout>
@@ -69,16 +41,6 @@ export const UnitCardGrid = ({
           ))}
         {units.length === 0 && <HeaderText>No matching units found</HeaderText>}
       </UnitCardLayout>
-      {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>
   );
 }

frontend/src/pages/RenterCandidatePage.tsx

@@ -387,6 +387,7 @@ export function RenterCandidatePage() {
               },
             });
           }}
+          isTableDropdown={true}
         />
       );
     }
@@ -657,6 +658,7 @@ export function RenterCandidatePage() {
                                 },
                               });
                             }}
+                            isTableDropdown={true}
                           />,
                           HLSection(referral),