From 6986d11cfe4e3f947d43c162624a04c85e48f55e Mon Sep 17 00:00:00 2001
From: Oleksii Kriuchykhin <okriuchykhin@biosistemika.com>
Date: Wed, 13 Dec 2017 17:23:22 +0100
Subject: [PATCH] Add Flow types for notifications [SCI-1865]

---
 .../components/NotificationImage.jsx          | 17 +++++------
 .../components/NotificationItem.jsx           | 28 ++++++++-----------
 .../notifications/index.json.jbuilder         |  4 +--
 flow-typed/types.js                           |  9 ++++++
 package.json                                  |  3 +-
 5 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/app/javascript/src/components/Navigation/components/NotificationImage.jsx b/app/javascript/src/components/Navigation/components/NotificationImage.jsx
index 051ec20a9..9bea14c4e 100644
--- a/app/javascript/src/components/Navigation/components/NotificationImage.jsx
+++ b/app/javascript/src/components/Navigation/components/NotificationImage.jsx
@@ -1,8 +1,15 @@
+// @flow
+
 import React from "react";
 import { Image } from "react-bootstrap";
-import PropTypes from "prop-types";
 
-const NotificationImage = ({className, type, avatar}) => {
+type Props = {
+  className: string,
+  type: string,
+  avatar: string
+};
+
+const NotificationImage = ({className, type, avatar}: Props) => {
   const delegator = {
       recent_changes: (
           <Image
@@ -38,10 +45,4 @@ NotificationImage.defaultProps = {
   avatar: ''
 };
 
-NotificationImage.propTypes = {
-  className: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  avatar: PropTypes.string
-};
-
 export default NotificationImage;
diff --git a/app/javascript/src/components/Navigation/components/NotificationItem.jsx b/app/javascript/src/components/Navigation/components/NotificationItem.jsx
index ead90128a..59f9a0d0f 100644
--- a/app/javascript/src/components/Navigation/components/NotificationItem.jsx
+++ b/app/javascript/src/components/Navigation/components/NotificationItem.jsx
@@ -1,5 +1,6 @@
+// @flow
+
 import React from "react";
-import PropTypes from "prop-types";
 import { Col, Row } from "react-bootstrap";
 import { FormattedTime } from "react-intl";
 import styled from "styled-components";
@@ -8,13 +9,14 @@ import CustomNavItem from "./CustomNavItem";
 import NotificationImage from "./NotificationImage";
 import {
   MAIN_COLOR_BLUE,
+  BORDER_GRAY_COLOR,
   COLOR_ORANGE,
   ICON_GREEN_COLOR,
   WILD_SAND_COLOR
 } from "../../../config/constants/colors";
 
 const StyledListItem = styled(CustomNavItem)`
-  border-bottom: 1px solid #d2d2d2;
+  border-bottom: 1px solid ${BORDER_GRAY_COLOR};
   padding-bottom: 10px;
   padding-top: 10px;
 `;
@@ -63,21 +65,25 @@ const StyledNotificationImage = styled(NotificationImage)`
   }
 `;
 
-const NotificationItem = ({ notification }) => {
-  const { title, message, created_at, type_of, avatarThumb } = notification;
+type Props = {
+  notification: Notification,
+};
+
+const NotificationItem = ({ notification }: Props) => {
+  const { title, message, createdAt, typeOf, avatarThumb } = notification;
 
   return (
     <StyledListItem>
       <Row>
         <Col xs={2}>
-          <StyledNotificationImage type={type_of} avatar={avatarThumb} />
+          <StyledNotificationImage type={typeOf} avatar={avatarThumb} />
         </Col>
 
         <Col xs={10}>
           <strong dangerouslySetInnerHTML={{ __html: title }} />
           <br />
           <FormattedTime
-            value={created_at}
+            value={createdAt}
             day="numeric"
             month="numeric"
             year="numeric"
@@ -90,14 +96,4 @@ const NotificationItem = ({ notification }) => {
   );
 };
 
-NotificationItem.propTypes = {
-  notification: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    title: PropTypes.string.isRequired,
-    message: PropTypes.string.isRequired,
-    type_of: PropTypes.string.isRequired,
-    created_at: PropTypes.string.isRequired
-  }).isRequired
-};
-
 export default NotificationItem;
diff --git a/app/views/client_api/notifications/index.json.jbuilder b/app/views/client_api/notifications/index.json.jbuilder
index 2a8777d23..189d0db55 100644
--- a/app/views/client_api/notifications/index.json.jbuilder
+++ b/app/views/client_api/notifications/index.json.jbuilder
@@ -2,8 +2,8 @@ json.array! notifications do |notification|
   json.id notification.id
   json.title notification.title
   json.message notification.message
-  json.type_of notification.type_of
-  json.created_at notification.created_at
+  json.typeOf notification.type_of
+  json.createdAt notification.created_at
   if notification.type_of == 'recent_changes'
     json.avatarThumb avatar_path(notification.generator_user, :icon_small)
   end
diff --git a/flow-typed/types.js b/flow-typed/types.js
index d3e6a16ce..0552b25f3 100644
--- a/flow-typed/types.js
+++ b/flow-typed/types.js
@@ -36,6 +36,15 @@ export type Activity = {
   created_at: string
 };
 
+export type Notification = {
+  id: number,
+  title: string,
+  message: string,
+  typeOf: string,
+  createdAt: string,
+  avatarThumb: ?string
+};
+
 export type State = {
   current_team: Teams$Team,
   all_teams: Array<Teams$Team>,
diff --git a/package.json b/package.json
index 421ca21ce..fc71d6017 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     ".eslintrc.json"
   ],
   "scripts": {
+    "flow": "flow",
     "lint": "eslint ."
   },
   "devDependencies": {
@@ -96,4 +97,4 @@
     "webpack-manifest-plugin": "^1.1.2",
     "webpack-merge": "^4.1.0"
   }
-}
\ No newline at end of file
+}