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/.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["react","flow"],
+  "presets": ["react"],
   "plugins": [
     "transform-object-rest-spread",
     "transform-class-properties"

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,9 +1,11 @@
-import React, { Component } from 'react';
+import React from 'react';
+import { SubmitVoid } from '../../types/dom-events-types';
 
-class CommentBox extends Component {
-  render() {
+type Props = SubmitVoid;
+
+const CommentBox = (props: Props) => {
     return (
-      <form className="form-inline" onSubmit={this.props.onSubmit}>
+      <form className="form-inline" onSubmit={props.onSubmit}>
         <div className="form-group">
           <input
             className="form-control"
@@ -19,6 +21,5 @@ class CommentBox extends Component {
         </div>
       </form>
     );
-  }
 }
 export default CommentBox;

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

@@ -1,6 +1,10 @@
-import React, { Component } from 'react';
+import React 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 => (

client/src/components/Comments/CommentListItem.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Col, Row } from 'reactstrap';
+import moment from 'moment';
+import avatar from '../../../src/avatar.jpg';
+import { Comment } from '../../types/comments-types';
+
+type Props = {
+  comment: Comment
+};
+
+const CommentListItem = (props: Props) => {
+  const comment = props.comment;
+  return (
+    <li>
+      <button
+        type="button"
+        className="close"
+        title="delete"
+        aria-hidden="true"
+      >
+        &times;
+        </button>
+      <Row>
+        <Col sm="4" md="2" xs="4" lg="2">
+          <img
+            className="commenterImage"
+            src={
+              comment.commentedBy.avatar ? comment.commentedBy.avatar : avatar
+            }
+          />
+        </Col>
+        <Col sm="8" md="10" xs="8" lg="10" className="commentText">
+          <strong>
+            {comment.commentedBy.username
+              ? comment.commentedBy.username
+              : 'Anonymous'}
+          </strong>
+          <p>{comment.comment}</p>
+          <span className="date sub-text">
+            {moment(comment.commentDatetime).fromNow()}
+          </span>
+        </Col>
+      </Row>
+    </li>
+  );
+}
+export default CommentListItem;

client/src/components/Comments/CommentsBlock.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+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';
+
+type Props = BaseReduxPropTypes & BaseReducerPropsTypes & EventComments & {
+  eventID: string
+};
+
+const postComment = (e, dispatch, eventID) => {
+  e.preventDefault();
+  dispatch(
+    addComment(
+      {
+        comment: e.target.comment.value,
+      },
+      eventID
+    )
+  );
+};
+
+const CommentsBlock = (props: Props) => {
+  const { comments } = props.event;
+  return (
+    <div className="detailBox">
+      <div className="titleBox">
+        <label>Write something about this event</label>
+      </div>
+      <div className="actionBox">
+        {comments && comments.length ? (
+          <CommentList comments={comments} />
+        ) : null}
+        {props.userState.token ? (
+          <CommentBox onSubmit={(e) => postComment(e, props.dispatch, props.eventID)} />
+        ) : (
+            <div>Sign in to comment here...</div>
+          )}
+      </div>
+    </div>
+  );
+}
+
+const mapStateToProps = state => {
+  return state;
+};
+
+export default connect(mapStateToProps)(CommentsBlock);

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>
   );