Dev code cleanup (#2)

* dev-code-cleanup * Update jsx to tsx * Track reverse proxy server * dev-code-cleanup * Add NotFound handler
Nedson202 · Oct 18, 2019 · 603ea96 · 603ea96
1 parent 15404f4
commit 603ea96
Show file tree

Hide file tree

Showing 16 changed files with 478 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -1,11 +1,23 @@
 {
   "name": "harvard-arts",
   "version": "0.1.0",
-  "private": true,
+  "private": false,
   "dependencies": {
     "@babel/core": "^7.0.0",
+    "@types/aos": "^3.0.1",
+    "@types/cors": "^2.8.4",
+    "@types/debug": "^4.1.2",
+    "@types/dotenv": "^6.1.0",
+    "@types/elasticsearch": "^5.0.31",
+    "@types/express": "^4.16.1",
     "@types/google-map-react": "^0.23.11",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/morgan": "^1.7.35",
+    "@types/node": "^11.10.4",
     "@types/pg": "^7.4.14",
+    "@types/react-dom": "^16.8.2",
+    "@types/react-router-dom": "^5.1.0",
+    "@types/redis": "^2.8.10",
     "antd": "^3.13.2",
     "aos": "^2.3.4",
     "apollo-boost": "^0.1.27",
@@ -31,6 +43,7 @@
     "info-logger": "0.1.2",
     "lodash.debounce": "^4.0.8",
     "morgan": "^1.9.1",
+    "node-sass": "^4.11.0",
     "pg": "^7.9.0",
     "prop-types": "^15.7.2",
     "querystring": "^0.2.0",
@@ -51,19 +64,6 @@
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.3.3",
-    "@types/aos": "^3.0.1",
-    "@types/cors": "^2.8.4",
-    "@types/debug": "^4.1.2",
-    "@types/dotenv": "^6.1.0",
-    "@types/elasticsearch": "^5.0.31",
-    "@types/express": "^4.16.1",
-    "@types/lodash.debounce": "^4.0.6",
-    "@types/morgan": "^1.7.35",
-    "@types/node": "^11.10.4",
-    "@types/react-dom": "^16.8.2",
-    "@types/react-router-dom": "^4.3.1",
-    "@types/redis": "^2.8.10",
-    "node-sass": "^4.11.0",
     "tslint": "^5.20.0",
     "typescript": "^3.3.3333"
   },

diff --git a/src/Components/BackToTop/index.tsx b/src/Components/BackToTop/index.tsx
@@ -2,7 +2,7 @@ import React, { PureComponent, Fragment } from 'react';
 import { Icon } from 'antd';
 
 import './backToTop.scss';
-import { MINIMUM_SCROLL_DISTANCE, SCROLL } from '../../settings';
+import { SCROLL } from '../../settings';
 
 import { IBackToTopState } from '../../../types';
 
@@ -35,35 +35,25 @@ class BackToTop extends PureComponent<any, IBackToTopState> {
     });
   }
 
-  private handlePageScroll = () => {
-    let displayBackToTop = false;
+  public handlePageScroll = () => {
+    const shouldDisplayBackToTop = window.scrollY > 300;
 
-    if (document.body.scrollTop > MINIMUM_SCROLL_DISTANCE
-      || document.documentElement.scrollTop > MINIMUM_SCROLL_DISTANCE) {
-      displayBackToTop = true;
-    }
-
-    if (document.body.scrollTop < MINIMUM_SCROLL_DISTANCE
-      || document.documentElement.scrollTop < MINIMUM_SCROLL_DISTANCE) {
-      displayBackToTop = false;
-    }
-
-    this.setState({ displayBackToTop });
+    this.setState({ displayBackToTop: shouldDisplayBackToTop });
   }
 
-  private scrollToTop = () => {
+  public scrollToTop = () => {
     window.scroll({
       top: 0,
       left: 100,
       behavior: 'smooth',
     });
   }
 
-  private renderBackToTop = (displayBackToTop: boolean) => displayBackToTop && (
+  public renderBackToTop = (displayBackToTop: boolean) => displayBackToTop && (
     <button
-      type='button'
       className='btn btn-secondary bmd-btn-fab back-to-top'
       onClick={this.scrollToTop}
+      type='button'
     >
       <Icon type='caret-up' />
     </button>

diff --git a/src/Components/Collection/collection.scss b/src/Components/Collection/collection.scss
@@ -17,7 +17,8 @@
       transform: translate(-50%, -50%);
       width: 100%;
       z-index: 55;
-      border-radius: 10px;
+      max-height: 600px;
+      object-fit: contain;
     }
 
     .image-close-icon {
@@ -152,4 +153,4 @@
       }
     }
   }
-}
+}
diff --git a/src/Components/Collection/index.tsx b/src/Components/Collection/index.tsx
@@ -106,6 +106,8 @@ class Collection extends Component<CollectionProps> {
     return finalData;
   }
 
+  public returnVoid = () => 0;
+
   public toggleFullImageView = (value: CollectionGroupValue) => {
     const { fullImageVisible } = this.state;
     const navElement = document.getElementById(NAV_BAR_ELEMENT);
@@ -120,19 +122,19 @@ class Collection extends Component<CollectionProps> {
     return (
       <div className='fullImage-display' ref={(node) => this.node = node}>
         <span
-          tabIndex={0}
-          role='button'
           className='image-close-icon'
           onClick={this.cancelImageDisplay}
+          role='button'
+          tabIndex={0}
         >
           <Icon type='close' />
         </span>
         <img
-          onMouseOver={this.handleFullImageDisplay}
-          src={value.primaryimageurl}
           alt='collection pix-file on display'
-          onFocus={() => 0}
           id='fullImage'
+          onFocus={this.returnVoid}
+          onMouseOver={this.handleFullImageDisplay}
+          src={value.primaryimageurl}
         />
       </div>
     );
@@ -159,12 +161,12 @@ class Collection extends Component<CollectionProps> {
               <Fragment>
                 <h1 className='collection-header center'>
                   <img
-                    onClick={this.handleFullImageDisplay}
-                    src={value.primaryimageurl}
+                    alt=''
                     className='preview-image'
                     height='100px'
+                    onClick={this.handleFullImageDisplay}
+                    src={value.primaryimageurl}
                     width='100px'
-                    alt=''
                   />
                   {value.title}
                 </h1>
@@ -203,7 +205,6 @@ class Collection extends Component<CollectionProps> {
                     <span className='collection-data__para'>
                       {value.contextualtext
                         ? this.contextualText(value.contextualtext) : <p>{NOT_AVAILABLE_MESSAGE}</p>}
-
                     </span>
 
                     <div className='collection-data__group'>

diff --git a/src/Components/Collections/collections.scss b/src/Components/Collections/collections.scss
@@ -1,6 +1,6 @@
 .collections {
-  padding: 120px 0 40px 100px;
-  
+  padding: 120px 100px 30px 100px;
+
   &-empty {
     font-size: 18px;
     position: absolute;
@@ -44,7 +44,6 @@
     -moz-column-gap:      50px;
     column-count:         4;
     column-gap:           50px;
-    margin: 0 100px 50px 100px;
 
     img {
       /* Just in case there are inline attributes */
@@ -77,7 +76,7 @@
   &-loader {
     display: flex;
     justify-content: center;
-    margin: auto auto 20px auto;
+    margin: 40px auto 20px auto;
     width: 100%;
     max-width: 150px;
 
@@ -133,6 +132,8 @@
 
 @media (max-width: 560px) {
   .collections {
+    padding: unset;
+
     &-header {
       padding-top: 100px;
       padding-left: 20px;
@@ -145,4 +146,4 @@
       margin: 0 20px;
     }
   }
-}
+}
diff --git a/src/Components/Collections/index.tsx b/src/Components/Collections/index.tsx
@@ -62,13 +62,13 @@ class Collections extends Component<ICollectionsProps> {
       updateQuery: (prev: any, { fetchMoreResult }: CollectionsFetchMore) => {
         const {
           objects: { records },
-          searchResults: { results = [] },
+          searchResults,
         } = fetchMoreResult as CollectionsFetchMoreResult;
 
         newData = records;
 
-        if (results.length !== 0) {
-          newData = results;
+        if (searchResults && searchResults.results.length) {
+          newData = searchResults.results;
         }
 
         if (activeSearchData) {
@@ -154,7 +154,6 @@ class Collections extends Component<ICollectionsProps> {
             <li>
               Fields you can query are title, century, accessionmethod, period, technique,
               classification, department, culture, medium, verificationleveldescription
-
             </li>
           </ul>
         </div>
@@ -177,7 +176,7 @@ class Collections extends Component<ICollectionsProps> {
           </div>
         </Link>
       );
-    })
+    });
 
     return (
       <Fragment>

diff --git a/src/Components/Main/App.tsx b/src/Components/Main/App.tsx
@@ -29,6 +29,7 @@ class App extends Component {
   public toggleNav = () => {
     const { scrollY } = window;
     const navBar = document.getElementById(NAV_BAR_ELEMENT);
+
     if (scrollY > HORIZONTAL_SCROLL_DISTANCE) {
       return navBar && navBar.classList.remove(CUSTOM_NAV_ELEMENT);
     }

diff --git a/src/Components/NotFound/NotFound.scss b/src/Components/NotFound/NotFound.scss
@@ -0,0 +1,32 @@
+.container-content {
+  padding: 120px 100px 30px 100px;
+
+  .not-found {
+    display: block;
+    width: 100%;
+    max-width: 500px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+
+    &__404 {
+      font-size: 200px;
+      transform: rotate(-5deg);
+      margin-bottom: 16px;
+    }
+  }
+
+  @media screen and (max-width: 560px) {
+    .container-content {
+      padding: unset;
+
+      .not-found {
+        &__404 {
+          font-size: 160px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/Components/NotFound/index.tsx b/src/Components/NotFound/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import './NotFound.scss';
+
+const NotFound = () => (
+  <div className='container-content'>
+    <div className='not-found'>
+      <h1 className='not-found__404'>404!</h1>
+      <h1 className='not-found__text'>
+        Sorry this page does not exist.
+      </h1>
+    </div>
+  </div>
+);
+
+export default NotFound;
diff --git a/src/Components/Places/index.tsx b/src/Components/Places/index.tsx
@@ -11,7 +11,7 @@ import './places.scss';
 import { client } from '../../index';
 import {
   DEFAULT_PLACE_PROPS, NETWORK_ONLY, PLACES_TYPENAME, ACTIVE_PLACE_ELEMENT,
-  CACHE_FIRST, GOOGLE_MAPS_KEY
+  CACHE_FIRST, GOOGLE_MAPS_KEY,
 } from '../../settings';
 
 import { IPlacesProps, IPlaceIDObject } from '../../../types';
@@ -52,9 +52,11 @@ class MapContainer extends Component<IPlacesProps> {
     const filteredPositons = places.filter((coordinate: any) => {
       if (coordinate.geo) {
         coordinate.geo.lng = coordinate.geo.lon;
+
         return coordinate;
       }
     });
+
     return { ...filteredPositons[0] };
   }
 

diff --git a/src/Components/Publications/index.tsx b/src/Components/Publications/index.tsx
@@ -18,7 +18,7 @@ import {
   PublicationsFetchMoreResult,
 } from '../../../types';
 
-let page: number;
+let page: number = 1;
 
 class Publications extends Component {
   public state = {
@@ -114,8 +114,7 @@ class Publications extends Component {
                 {this.getPeopleInitials(name)}
               </div>
             </Tooltip>
-          ))
-        }
+          ))}
       </Fragment>
     );
   }

diff --git a/src/Components/Publications/publications.scss b/src/Components/Publications/publications.scss
@@ -114,11 +114,10 @@
         &-body {
           border-bottom: 1px solid rgb(235, 230, 230);
         }
-  
+
         &-people {
           display: flex;
           flex-wrap: wrap;
-          // margin: 0 50px;
           justify-content: space-between;
 
           div {
@@ -129,14 +128,13 @@
             box-shadow: 0 3px 6px rgba(0,0,0,0.1), 0 3px 3px rgba(0,0,0,0.13);
             margin-bottom: 15px;
             cursor: pointer;
-            border: 1px solid #005C97;
           }
         }
-  
+
         &-more {
           border-top: 1px solid rgb(235, 230, 230);
         }
       }
     }
   }
-}
+}