Display location information in right sticky sidebar (#161)

* Edit Right Column * Only render search bar and right side on large screens * Edit sticky sidebar to display information Co-authored-by: Christopher <51393127+chriscerie@users.noreply.github.com>
chriscerie · Dec 3, 2021 · fb992eb · fb992eb
1 parent c4fbf78
commit fb992eb
Show file tree

Hide file tree

Showing 7 changed files with 232 additions and 29 deletions.
diff --git a/client/package.json b/client/package.json
@@ -6,6 +6,7 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@mapbox/mapbox-gl-geocoder": "^4.7.4",
+    "@material-ui/core": "^4.12.3",
     "@mui/icons-material": "^5.0.4",
     "@mui/material": "^5.0.3",
     "@testing-library/jest-dom": "^5.11.4",

diff --git a/client/src/components/Header/LocationHeader.tsx b/client/src/components/Header/LocationHeader.tsx
@@ -6,14 +6,16 @@ import SearchBar from './SearchBar';
 import './LocationHeader.scss';
 import ProfileIcon from './ProfileIcon';
 import { Link } from 'react-router-dom';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 function LocationHeader() {
   const currentUser = useSelector((state: RootState) => state.currentUser);
+  const isLargeScreen = useMediaQuery('(min-width:640px)');
 
   return (
     <Container id="header-container" maxWidth="xl">
       <Link to="/" className="header-logo-link" />
-      <SearchBar />
+      {isLargeScreen && <SearchBar />}
       {currentUser ? (
         <ProfileIcon />
       ) : (

diff --git a/client/src/pages/LocationPage/LeftColumnDetails.tsx b/client/src/pages/LocationPage/LeftColumnDetails.tsx
@@ -13,15 +13,15 @@ function LeftColumnDetais({
   locationInfo,
   id,
 }: {
-  locationInfo: LocationType;
+  locationInfo: LocationType | null;
   id: string;
 }) {
   return (
     <div id="location-page-left-column">
       <div id="location-page-left-buttons-container">
         <div className="location-page-left-button">
           <Link
-            to={`/write-review/${locationInfo.id}`}
+            to={`/write-review/${locationInfo && locationInfo.id}`}
             style={{ textDecoration: 'none' }}
           >
             <Button
@@ -68,7 +68,9 @@ function LeftColumnDetais({
 
       <LocationSection title="Description">
         <div className="building-info align-text-left">
-          <p style={{ margin: 0 }}>{locationInfo.description}</p>
+          <p style={{ margin: 0 }}>
+            {locationInfo && locationInfo.description}
+          </p>
         </div>
       </LocationSection>
 

diff --git a/client/src/pages/LocationPage/RightColumnDetails.scss b/client/src/pages/LocationPage/RightColumnDetails.scss
@@ -10,4 +10,21 @@
 #sticky-sidebar {
   position: sticky;
   top: 1em;
+  border: 1px solid #eee;
+  border-radius: 0.3em;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  flex-direction: column;
+  margin-bottom: 1.5em;
+  padding: 0.5em 1em;
+}
+
+.sidebar-box {
+  border-bottom: 1px solid #eee;
+  padding: 0.3em;
+}
+
+.sidebar-box:last-child {
+  border-bottom: none;
 }
diff --git a/client/src/pages/LocationPage/RightColumnDetails.tsx b/client/src/pages/LocationPage/RightColumnDetails.tsx
@@ -1,22 +1,37 @@
+import type { LocationType } from '../../types/LocationType';
 import './RightColumnDetails.scss';
 
-function LeftColumnDetais() {
+function LeftColumnDetais({
+  locationInfo,
+}: {
+  locationInfo: LocationType | null;
+}) {
   return (
     <div id="location-page-right-column">
       <div id="sticky-sidebar">
-        <div className="building-info align-text-left">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-            accumsan, purus at eleifend ornare, libero metus tincidunt velit,
-            quis tincidunt nisl eros non tellus. Nunc ullamcorper porttitor
-            risus, eu luctus justo auctor sed. Vestibulum ornare eros est, in
-            tempus massa congue ut. Duis eu fringilla nulla, nec mattis ex.
-            Quisque viverra justo a luctus feugiat. Aliquam erat volutpat.
-            Nullam varius odio ex, non aliquet eros tristique ullamcorper. Donec
-            dignissim nisl dui, in sollicitudin magna faucibus eu. Duis porta
-            ornare erat, ut lacinia lacus volutpat id. Suspendisse potenti.
-            Suspendisse et iaculis velit.
-          </div>
+        <div className="sidebar-box">{locationInfo?.name}</div>
+        <div className="sidebar-box">{locationInfo?.type}</div>
+        <div className="sidebar-box">
+          {locationInfo?.rooms.length.toString()} rooms
+        </div>
+        {locationInfo?.address1 && (
+          <div className="sidebar-box">{locationInfo.address1}</div>
+        )}
+        {locationInfo?.address2 && (
+          <div className="sidebar-box">{locationInfo.address2}</div>
+        )}
+        {locationInfo?.zip_code && (
+          <div className="sidebar-box">{locationInfo.zip_code}</div>
+        )}
+        {locationInfo?.city && (
+          <div className="sidebar-box">{locationInfo.city}</div>
+        )}
+        {locationInfo?.state && locationInfo.state !== '' && (
+          <div className="sidebar-box">{locationInfo.state}</div>
+        )}
+        <div className="sidebar-box">
+          Consider contributing to Campus Maps by editing this location's
+          information.
         </div>
       </div>
     </div>

diff --git a/client/src/pages/LocationPage/index.tsx b/client/src/pages/LocationPage/index.tsx
@@ -4,17 +4,21 @@ import PhotoHeader from './PhotoHeader';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../reducers';
 import { useParams } from 'react-router-dom';
-import './index.scss';
 import { useState, useEffect } from 'react';
 import LeftColumnDetails from './LeftColumnDetails';
 import RightColumnDetails from './RightColumnDetails';
 import { getLocationInfo } from '../../api/LocationAPI';
 import type { LocationType } from '../../types/LocationType';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import './index.scss';
 
 function LocationPage() {
   const { id } = useParams<{ id: string }>();
   const [locationInfo, setLocationInfo] = useState<null | LocationType>(null);
   const mapInstance = useSelector((state: RootState) => state.mapInstance.map);
+  const isLargeScreen = useMediaQuery('(min-width:640px)');
+
+  console.log(isLargeScreen);
 
   // Set point
   useEffect(() => {
@@ -36,10 +40,8 @@ function LocationPage() {
       />
 
       <Container id="location-page-container-inner">
-        {locationInfo && (
-          <LeftColumnDetails locationInfo={locationInfo} id={id} />
-        )}
-        <RightColumnDetails />
+        <LeftColumnDetails locationInfo={locationInfo} id={id} />
+        {isLargeScreen && <RightColumnDetails locationInfo={locationInfo} />}
       </Container>
     </div>
   );