Integrate/typescript: Project shifted to Typescript

README.md

@@ -90,6 +90,7 @@ how well the old code works. This is Django2 with Django REST framework 3.8 and
 - https://realpython.com/django-rest-framework-quick-start/
 - https://www.andreagrandi.it/2016/09/28/creating-production-ready-api-python-django-rest-framework-part-1/
 - https://github.com/Brobin/drf-generators
+- http://ses4j.github.io/2015/11/23/optimizing-slow-django-rest-framework-performance/
 
 #### React
 

client/src/actions/index.js → client/src/actions/index.ts

@@ -161,7 +161,7 @@ export const postComment = comment => ({
   comment,
 });
 
-export const fetchEvents = query => async (dispatch, getState) => {
+export const fetchEvents = (query?) => async (dispatch, getState) => {
   dispatch(triggerRequest(FETCH_EVENTS));
   return EventService.getAll(query)
     .then(response => {
@@ -311,7 +311,7 @@ export const getTags = tags => ({
   tags,
 });
 
-export const fetchOrganisation = query => async (dispatch, getState) => {
+export const fetchOrganisation = (query?) => async (dispatch, getState) => {
   dispatch(triggerRequest(FETCH_ORGANISATIONS));
   try {
     const response = await OrganisationsService.getAll();
@@ -324,7 +324,7 @@ export const fetchOrganisation = query => async (dispatch, getState) => {
   }
 };
 
-export const fetchSponsors = query => async (dispatch, getState) => {
+export const fetchSponsors = (query?) => async (dispatch, getState) => {
   dispatch(triggerRequest(FETCH_SPONSORS));
   try {
     const response = await SponsorsService.getAll();
@@ -337,7 +337,7 @@ export const fetchSponsors = query => async (dispatch, getState) => {
   }
 };
 
-export const fetchLocations = query => async (dispatch, getState) => {
+export const fetchLocations = (query?) => async (dispatch, getState) => {
   dispatch(triggerRequest(FETCH_LOCATIONS));
   try {
     const response = await LocationService.getAll();
@@ -350,7 +350,7 @@ export const fetchLocations = query => async (dispatch, getState) => {
   }
 };
 
-export const fetchTags = query => async (dispatch, getState) => {
+export const fetchTags = (query?) => async (dispatch, getState) => {
   dispatch(triggerRequest(FETCH_TAGS));
   try {
     const response = await TagsService.getAll();

client/src/components/Comments/CommentBox.js → client/src/components/Comments/CommentBox.tsx

@@ -1,6 +1,9 @@
 import React, { Component } from 'react';
+import { SubmitVoid } from '../../types/dom-events-types';
 
-class CommentBox extends Component {
+type Props = SubmitVoid;
+
+class CommentBox extends Component<Props> {
   render() {
     return (
       <form className="form-inline" onSubmit={this.props.onSubmit}>

client/src/components/Comments/CommentList.js → client/src/components/Comments/CommentList.tsx

@@ -1,10 +1,14 @@
 import React, { Component } from 'react';
 import CommentListItem from './CommentListItem';
-const CommentList = props => {
+import { Comments } from '../../types/comments-types';
+
+type Props = Comments;
+
+const CommentList = (props: Props) => {
   return (
     <ul className="commentList">
       {props.comments.map(comment => (
-        <CommentListItem comment={comment} key={comment.id} />
+        <CommentListItem comment={comment} />
       ))}
     </ul>
   );

client/src/components/Comments/CommentListItem.js → client/src/components/Comments/CommentListItem.tsx

@@ -2,8 +2,13 @@ import React, { Component } from 'react';
 import { Col, Row } from 'reactstrap';
 import moment from 'moment';
 import avatar from '../../../src/avatar.jpg';
+import { Comment } from '../../types/comments-types';
 
-class CommentListItem extends Component {
+type Props = {
+  comment: Comment
+};
+
+class CommentListItem extends Component<Props> {
   render() {
     const comment = this.props.comment;
     return (

client/src/components/Comments/CommentsBlock.js → client/src/components/Comments/CommentsBlock.tsx

@@ -3,8 +3,14 @@ import CommentBox from './CommentBox';
 import CommentList from './CommentList';
 import { connect } from 'react-redux';
 import { addComment } from '../../actions';
+import { BaseReduxPropTypes, BaseReducerPropsTypes } from '../../types/base-props-types';
+import { EventComments } from '../../types/comments-types';
 
-class CommentsBlock extends Component {
+type Props = BaseReduxPropTypes & BaseReducerPropsTypes & EventComments & {
+  eventID: string
+};
+
+class CommentsBlock extends Component<Props> {
   postComment = e => {
     e.preventDefault();
     const { dispatch } = this.props;
@@ -32,8 +38,8 @@ class CommentsBlock extends Component {
           {this.props.userState.token ? (
             <CommentBox onSubmit={this.postComment} />
           ) : (
-            <div>Sign in to comment here...</div>
-          )}
+              <div>Sign in to comment here...</div>
+            )}
         </div>
       </div>
     );

client/src/components/ContentHeader/ContentHeader.js → client/src/components/ContentHeader/ContentHeader.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import { Row, Col } from 'reactstrap';
 
-const ContentHeader = props => {
+type Props = {
+  heading: string
+};
+
+const ContentHeader = (props: Props) => {
   return (
     <Row className="block">
       <Col className="text-header">

client/src/components/DescriptionContainer/DescriptionContainer.js → client/src/components/DescriptionContainer/DescriptionContainer.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import { Row, Col } from 'reactstrap';
 import SocialShare from '../SocialShare/SocialShare';
 
-const DescriptionContainer = props => {
+type Props = {
+  description: string,
+};
+
+const DescriptionContainer = (props: Props) => {
   return (
     <Row className="block-content text-justify">
       <Col md="9">
@@ -21,9 +25,7 @@ const DescriptionContainer = props => {
             </p>
           </Col>
         </Row>
-        <center>
-          <SocialShare />
-        </center>
+        <SocialShare />
       </Col>
     </Row>
   );

client/src/components/DropSearch/DropSearch.js → client/src/components/DropSearch/DropSearch.tsx

@@ -10,8 +10,11 @@ import {
   fetchTags,
 } from '../../actions';
 import { OrganisationType } from '../../types/organisation-types';
+import { BaseReduxPropTypes } from '../../types/base-props-types';
+import { LocationType } from '../../types/location-types'
 import { EventType } from '../../types/event-types';
 import { SponsorType } from '../../types/sponsor-types';
+import { InputChange } from '../../types/dom-events-types';
 import 'react-select/dist/react-select.min.css';
 import './DropSearch.css';
 
@@ -26,17 +29,19 @@ type Props = BaseReduxPropTypes & {
   locations: Array<LocationType>,
   sponsors: Array<SponsorType>,
   handleSearchChange: Function,
+  sortBy: string,
 };
 
 export type State = {
-  filterOrganisation: Array<Object>,
-  filterDateFrom: string,
-  filterDateTo: string,
-  filterLocation: Object,
-  filterSponsers: Array<Object>,
-  filterKeywords: string,
-  filterTags: Array<Object>,
-  filterTime: Array<Object>,
+  filterOrganisation?: Array<Object>,
+  filterDateFrom?: string,
+  filterDateTo?: string,
+  filterLocation?: Object,
+  filterSponsers?: Array<Object>,
+  filterKeywords?: string,
+  filterTags?: Array<Object>,
+  filterTime?: Array<Object>,
+  sortBy?: string,
 };
 class DropSearch extends Component<Props, State> {
   constructor(props) {
@@ -51,6 +56,7 @@ class DropSearch extends Component<Props, State> {
       filterKeywords: '',
       filterTags: [],
       filterTime: [],
+      sortBy: ''
     };
     this.fetchDependencies();
   }
@@ -63,18 +69,17 @@ class DropSearch extends Component<Props, State> {
     dispatch(fetchTags());
   }
 
-  handleInputChange = e => {
+  handleInputChange = (e: InputChange<HTMLInputElement>) => {
     const { name, value } = e.target;
     this.setState({ [name]: value });
-    console.log('');
   };
 
   handleSelect = e => {
     const { name, value } = e;
     this.setState({ [name]: value });
   };
 
-  mapStateToOptions: (key: string) => Array<ReactSearchOptions> = key => {
+  mapStateToOptions = key => {
     let target = this.props[key];
     target = target ? target[key] : [];
     return target.map(opt => ({ label: opt.name, value: opt.id }));
@@ -89,7 +94,7 @@ class DropSearch extends Component<Props, State> {
    * - and pass either undefined or extracted object to prop (handleSearchChange method)
    * @returns undefined.
    */
-  handleSearchChange = (e: SyntheticEvent<HTMLButtonElement>) => {
+  handleSearchChange = e => {
     e.preventDefault();
     let { handleSearchChange } = this.props,
       state = { ...this.state },

client/src/components/EMNavbar.js → client/src/components/EMNavbar.tsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import {
@@ -16,10 +14,11 @@ import {
   DropdownItem,
 } from 'reactstrap';
 import { userLogout } from '../actions';
-import User from '../types/multi-types';
+import { BaseReduxPropTypes, UserState } from '../types/base-props-types';
+import { getFullname } from '../utils/utils';
 
-type Props = {
-  userState: User,
+type Props = BaseReduxPropTypes & {
+  userState: UserState,
 };
 
 type State = {
@@ -41,13 +40,25 @@ class EMNavbar extends Component<Props, State> {
     });
   };
 
+  getDisplayName = user => {
+    const { first_name, last_name, username, email } = user;
+    if (first_name) {
+      return `${first_name} ${last_name}`
+    }
+    else if (username) {
+      return username
+    }
+    else return email
+  }
+
   getMyProfile = currentUser => {
-    const { username, id } = currentUser;
+    const { id } = currentUser;
+    const displayName = this.getDisplayName(currentUser);
     return (
       <UncontrolledDropdown nav inNavbar>
         <DropdownToggle>
           <span className="fa fa-user-circle fa-lg" />
-          {` ${username}`}
+          {` ${displayName}`}
         </DropdownToggle>
         <DropdownMenu right>
           <DropdownItem href={`/users/${id}`}>My Profile</DropdownItem>
@@ -75,10 +86,10 @@ class EMNavbar extends Component<Props, State> {
             {userState && userState.currentUser && userState.token ? (
               this.getMyProfile(userState.currentUser)
             ) : (
-              <NavItem>
-                <NavLink href="/login">Login</NavLink>
-              </NavItem>
-            )}
+                <NavItem>
+                  <NavLink href="/login">Login</NavLink>
+                </NavItem>
+              )}
           </Nav>
         </Collapse>
       </Navbar>

client/src/components/EditUserForm/EditUserForm.js → client/src/components/EditUserForm/EditUserForm.tsx

@@ -1,8 +1,23 @@
 import React from 'react';
 import { Button, Input, Label, CardImg } from 'reactstrap';
 import { isEmpty, isLowercase } from 'validator';
+import { Owner } from '../../types/owner-types';
+import { SubmitVoid, InputChange, HTMLFormEvent } from '../../types/dom-events-types';
 
-export class EditUserForm extends React.Component {
+type Props = HTMLFormEvent & {
+  user: Owner,
+  handleImageUpload: (e: React.SyntheticEvent) => void,
+}
+
+type State = {
+  isValidated: boolean,
+  errorFirstName: string,
+  errorLastName: string,
+  errorUserName: string,
+  picture: string,
+}
+
+export class EditUserForm extends React.Component<Props, State> {
   constructor(props) {
     super(props);
     this.state = {
@@ -78,7 +93,7 @@ export class EditUserForm extends React.Component {
           <div
             className="overlay"
             onClick={() => {
-              document.getElementById('user-thumb').click();
+              document.getElementById('user-thumb')!.click();
             }}
           >
             <Input type="file" id="user-thumb" onChange={handleImageUpload} />

client/src/components/EventList/EventList.js → client/src/components/EventList/EventList.tsx

@@ -1,8 +1,11 @@
 import React, { Component } from 'react';
 import EventCard from './EventCard/EventCard';
 import { Container, Row } from 'reactstrap';
+import { Events } from '../../types/multi-types';
 
-export class EventList extends Component {
+type Props = Events;
+
+export class EventList extends Component<Props> {
   render() {
     const eventArray = this.props.events;
     return (

client/src/components/ForgotPassword/ForgotPasswordValidator.js → client/src/components/ForgotPassword/ForgotPasswordValidator.ts

@@ -1,7 +1,11 @@
 import { isEmail } from 'validator';
 
+type Errors = {
+  email?: string
+}
+
 const validate = values => {
-  const errors = {},
+  const errors: Errors = {},
     { email } = values;
 
   if (!email) errors.email = '*Email Required';

client/src/components/GoogleMap/GoogleMap.js → client/src/components/GoogleMap/GoogleMap.tsx

@@ -5,16 +5,21 @@ import {
   Map,
   Marker,
 } from 'google-maps-react';
-import type { BaseReduxPropTypes } from '../types/base-props-types';
-import { GOOGLE_API_KEY } from '../../config.env';
+import { BaseReduxPropTypes } from '../../types/base-props-types';
+import { MapLocation } from '../../types/multi-types';
 
 type Props = BaseReduxPropTypes & {
-  location: Object,
+  location: MapLocation,
   google: Object,
-  coordinates: Object,
 };
 
-class GoogleMap extends Component<Props> {
+type State = {
+  showingInfoWindow: boolean,
+  activeMarker: any,
+  selectedPlace: any,
+}
+
+class GoogleMap extends Component<Props, State> {
   constructor(props) {
     super(props);
     this.state = {
@@ -71,5 +76,5 @@ class GoogleMap extends Component<Props> {
   }
 }
 export default apiWrapper({
-  apiKey: GOOGLE_API_KEY,
+  apiKey: process.env.GOOGLE_API_KEY,
 })(GoogleMap);