Issue/255

client/package.json

@@ -19,7 +19,7 @@
     "react-meta-tags": "^0.4.1",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "1.1.4",
+    "react-scripts": "^2.1.1",
     "react-select": "^1.2.1",
     "react-share": "^2.2.0",
     "react-toastify": "^4.1.0",
@@ -32,7 +32,8 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "tsc",
+    "initTS": "tsc --init",
     "test": "react-scripts test --env=jsdom",
     "lint-fix": "eslint src --fix",
     "eject": "react-scripts eject",
@@ -59,9 +60,11 @@
     "@storybook/addon-storyshots": "^3.4.8",
     "@storybook/addons": "^3.4.8",
     "@storybook/react": "^3.4.8",
+    "@types/jquery": "^3.3.22",
+    "@types/react": "^16.7.13",
+    "@types/react-dom": "^16.0.11",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
-    "babel-eslint": "^10.0.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
@@ -73,7 +76,6 @@
     "cz-conventional-changelog": "^2.1.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^4.19.1",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-prettier": "^2.6.2",
     "eslint-plugin-react": "^7.10.0",
@@ -87,11 +89,18 @@
     "redux-devtools": "^3.4.1",
     "redux-devtools-dock-monitor": "^1.1.3",
     "redux-devtools-log-monitor": "^1.4.0",
-    "redux-logger": "^3.0.6"
+    "redux-logger": "^3.0.6",
+    "typescript": "^3.2.2"
   },
   "config": {
     "commitizen": {
       "path": "cz-conventional-changelog"
     }
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

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,10 @@ import {
   DropdownItem,
 } from 'reactstrap';
 import { userLogout } from '../actions';
-import User from '../types/multi-types';
+import { BaseReduxPropTypes, UserState } from '../types/base-props-types';
 
-type Props = {
-  userState: User,
+type Props = BaseReduxPropTypes & {
+  userState: UserState,
 };
 
 type State = {
@@ -75,10 +73,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';