Merge pull request #322 from labzero/jeffrey/footer

More TypeScript conversion

global.d.ts

@@ -25,3 +25,8 @@ declare module "*.css" {
   const style: Style;
   export default style;
 }
+
+declare module "*.png" {
+  const value: string;
+  export default value;
+}

src/components/Flash/FlashContainer.ts

@@ -1,12 +1,12 @@
 import { connect } from "react-redux";
-import Flash from "./Flash";
+import FlashComponent from "./Flash";
 import { expireFlash } from "../../actions/flash";
-import { Dispatch } from "../../interfaces";
+import { Dispatch, Flash } from "../../interfaces";
 
-const mapDispatchToProps = (dispatch: Dispatch, ownProps: { id: string }) => ({
+const mapDispatchToProps = (dispatch: Dispatch, ownProps: Flash) => ({
   expireFlash: () => {
     dispatch(expireFlash(ownProps.id));
   },
 });
 
-export default connect(null, mapDispatchToProps)(Flash);
+export default connect(null, mapDispatchToProps)(FlashComponent);

src/components/Footer/Footer.js → src/components/Footer/Footer.tsx

@@ -7,12 +7,15 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-import PropTypes from "prop-types";
 import React from "react";
 import withStyles from "isomorphic-style-loader/withStyles";
 import s from "./Footer.scss";
 
-const Footer = ({ host }) => (
+interface FooterProps {
+  host: string;
+}
+
+const Footer = ({ host }: FooterProps) => (
   <div className={s.root}>
     <div className={s.container}>
       <a className={s.link} href={`//${host}/about`}>
@@ -34,8 +37,4 @@ const Footer = ({ host }) => (
   </div>
 );
 
-Footer.propTypes = {
-  host: PropTypes.string.isRequired,
-};
-
 export default withStyles(s)(Footer);

src/components/Footer/FooterContainer.js → src/components/Footer/FooterContainer.ts

@@ -1,7 +1,8 @@
 import { connect } from "react-redux";
 import Footer from "./Footer";
+import { State } from "../../interfaces";
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state: State) => ({
   host: state.host,
 });
 

src/components/GoogleInfoWindow/GoogleInfoWindow.js → src/components/GoogleInfoWindow/GoogleInfoWindow.tsx

@@ -1,48 +1,53 @@
-import PropTypes from "prop-types";
 import React, { Component } from "react";
 import { canUseDOM } from "fbjs/lib/ExecutionEnvironment";
 import Button from "react-bootstrap/Button";
 import withStyles from "isomorphic-style-loader/withStyles";
 import s from "./GoogleInfoWindow.scss";
 
-let google = {
-  maps: {
-    Marker: { MAX_ZINDEX: 1000000 },
-    places: { PlacesService: () => undefined, PlacesServiceStatus: {} },
-  },
-};
+let google: typeof window.google;
+
 if (canUseDOM) {
-  google = window.google || google;
+  google = window.google;
 }
 
-class GoogleInfoWindow extends Component {
-  static propTypes = {
-    addRestaurant: PropTypes.func.isRequired,
-    map: PropTypes.any.isRequired,
-    placeId: PropTypes.string.isRequired,
-  };
+interface GoogleInfoWindowProps {
+  addRestaurant: (restaurant: google.maps.places.PlaceResult) => void;
+  map: google.maps.Map;
+  placeId: string;
+}
 
-  constructor(props) {
+class GoogleInfoWindow extends Component<GoogleInfoWindowProps> {
+  placesService: google.maps.places.PlacesService;
+
+  constructor(props: GoogleInfoWindowProps) {
     super(props);
-    this.placesService = new google.maps.places.PlacesService(props.map);
+    if (google) {
+      this.placesService = new google.maps.places.PlacesService(props.map);
+    }
   }
 
   handleClick = () => {
     const { addRestaurant, placeId } = this.props;
 
     this.placesService.getDetails({ placeId }, (result, status) => {
-      if (status === google.maps.places.PlacesServiceStatus.OK) {
+      if (status === google.maps.places.PlacesServiceStatus.OK && result) {
         addRestaurant(result);
       }
     });
   };
 
   render() {
+    if (!google) {
+      return null;
+    }
+
     return (
       <div
         className={s.root}
         data-marker
-        style={{ zIndex: google.maps.Marker.MAX_ZINDEX * 2 }}
+        style={{
+          zIndex: google.maps.Marker.MAX_ZINDEX * 2,
+        }}
       >
         <div className={s.buttonContainer}>
           <Button size="lg" variant="primary" onClick={this.handleClick}>

src/components/GoogleInfoWindow/GoogleInfoWindowContainer.ts

@@ -0,0 +1,28 @@
+import { connect } from "react-redux";
+import { addRestaurant } from "../../actions/restaurants";
+import { Dispatch } from "../../interfaces";
+import GoogleInfoWindow from "./GoogleInfoWindow";
+
+const mapDispatchToProps = (
+  dispatch: Dispatch,
+  ownProps: { placeId: string }
+) => ({
+  addRestaurant: (result: google.maps.places.PlaceResult) => {
+    // eslint-disable-next-line camelcase
+    const { name, formatted_address } = result;
+    const location = result.geometry?.location;
+
+    return dispatch(
+      addRestaurant(
+        name || "",
+        ownProps.placeId,
+        // eslint-disable-next-line camelcase
+        formatted_address || "",
+        location?.lat() || 0,
+        location?.lng() || 0
+      )
+    );
+  },
+});
+
+export default connect(null, mapDispatchToProps)(GoogleInfoWindow);

src/components/GoogleMapsLoaderContext/GoogleMapsLoaderContext.js → src/components/GoogleMapsLoaderContext/GoogleMapsLoaderContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from "react";
 
-const GoogleMapsLoaderContext = createContext();
+const GoogleMapsLoaderContext = createContext({});
 
 export default GoogleMapsLoaderContext;

src/components/Header/Header.js → src/components/Header/Header.tsx

@@ -7,29 +7,29 @@
  * LICENSE.txt file in the root directory of this source tree.
  */
 
-import PropTypes from "prop-types";
 import React, { Component } from "react";
 import withStyles from "isomorphic-style-loader/withStyles";
+import { Flash } from "../../interfaces";
 import HeaderLoginContainer from "../HeaderLogin/HeaderLoginContainer";
 import FlashContainer from "../Flash/FlashContainer";
 import MenuContainer from "../Menu/MenuContainer";
-import Link from "../Link";
+import Link from "../Link/Link";
 import lunch from "./lunch.png";
 import s from "./Header.scss";
 
-class Header extends Component {
-  static propTypes = {
-    flashes: PropTypes.array.isRequired,
-    loggedIn: PropTypes.bool.isRequired,
-    // eslint-disable-next-line react/no-unused-prop-types
-    path: PropTypes.string,
-  };
+interface HeaderProps {
+  flashes: Flash[];
+  loggedIn: boolean;
+  path: string;
+}
 
-  static defaultProps = {
-    path: PropTypes.string,
-  };
+interface HeaderState {
+  menuOpen: boolean;
+  prevPath: string | null;
+}
 
-  static getDerivedStateFromProps(nextProps, state) {
+class Header extends Component<HeaderProps, HeaderState> {
+  static getDerivedStateFromProps(nextProps: HeaderProps, state: HeaderState) {
     if (nextProps.path !== state.prevPath) {
       return {
         menuOpen: false,
@@ -39,7 +39,7 @@ class Header extends Component {
     return null;
   }
 
-  constructor(props) {
+  constructor(props: HeaderProps) {
     super(props);
 
     this.state = {
@@ -52,14 +52,7 @@ class Header extends Component {
   flashContainers = () => {
     const { flashes } = this.props;
 
-    return flashes.map((flash) => (
-      <FlashContainer
-        message={flash.message}
-        type={flash.type}
-        id={flash.id}
-        key={flash.id}
-      />
-    ));
+    return flashes.map((flash) => <FlashContainer key={flash.id} {...flash} />);
   };
 
   closeMenu = () => {

src/components/Header/HeaderContainer.js → src/components/Header/HeaderContainer.ts

@@ -1,8 +1,9 @@
 import { connect } from "react-redux";
+import { State } from "../../interfaces";
 import { isLoggedIn } from "../../selectors/user";
 import Header from "./Header";
 
-const mapStateToProps = (state, ownProps) => ({
+const mapStateToProps = (state: State, ownProps: { path: string }) => ({
   flashes: state.flashes,
   loggedIn: isLoggedIn(state),
   path: ownProps.path,

src/components/HeaderLogin/HeaderLogin.js → src/components/HeaderLogin/HeaderLogin.tsx

@@ -11,14 +11,19 @@ import PropTypes from "prop-types";
 import React from "react";
 import withStyles from "isomorphic-style-loader/withStyles";
 import Button from "react-bootstrap/Button";
+import { User } from "../../interfaces";
 import s from "./HeaderLogin.scss";
 
-const HeaderLogin = ({ user }) => {
+interface HeaderLoginProps {
+  user: User;
+}
+
+const HeaderLogin = ({ user }: HeaderLoginProps) => {
   let content = <div />;
   if (user === null) {
     content = (
       <div className={s.root}>
-        <Button size="md" variant="primary" href="/login">
+        <Button variant="primary" href="/login">
           Log in
         </Button>
       </div>

src/components/HeaderLogin/HeaderLoginContainer.js → src/components/HeaderLogin/HeaderLoginContainer.ts

@@ -1,6 +1,7 @@
 import { connect } from "react-redux";
+import { State } from "../../interfaces";
 import HeaderLogin from "./HeaderLogin";
 
-const mapStateToProps = (state) => ({ user: state.user });
+const mapStateToProps = (state: State) => ({ user: state.user });
 
 export default connect(mapStateToProps)(HeaderLogin);