Add Flow types for notifications [SCI-1865]

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;

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 }) => {
+type Props = {
-  const { title, message, created_at, type_of, avatarThumb } = notification;
+  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;

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.typeOf notification.type_of
-  json.created_at notification.created_at
+  json.createdAt notification.created_at
   if notification.type_of == 'recent_changes'
     json.avatarThumb avatar_path(notification.generator_user, :icon_small)
   end

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>,

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"
   }
-}
+}