Now components have types #14

frontend/src/redux/modules/reviewers.tsx

@@ -7,6 +7,7 @@ import { IActionReviewersList, IActionReviewersListAssignments, IActionReviewers
 import { WS_REVIEWERS_LIST_ASSIGNMENTS, WS_REVIEWERS_LIST_USERS, WS_REVIEWERS_SET_STATUS } from "src/websockets/constants"
 import { IStore, IThunkExtras } from "../../redux/modules/interfaces"
 import { eSocialPlatformChoice } from "./triage"
+import { IUser } from "./user"
 
 // Actions
 const ASSIGN_REVIEWER = "ealgis/app/ASSIGN_REVIEWER"
@@ -44,7 +45,7 @@ export default function reducer(state: IModule = initialState, action: IAction)
             state = dotProp.delete(state, `tweets.${action.tweetId}.reviewer_id`)
             return dotProp.delete(state, `tweets.${action.tweetId}.review_status`)
         case MARK_ASSIGNMENT_DONE:
-            const assignmentIndex = state.assignments.findIndex((assignment: any) => assignment.id === action.assignmentId)
+            const assignmentIndex = state.assignments.findIndex((assignment: IReviewerAssignment) => assignment.id === action.assignmentId)
             // return dotProp.set(state, `assignments.${assignmentIndex}.status`, "SocialAssignmentStatus.DONE")
             return dotProp.delete(state, `assignments.${assignmentIndex}`)
         case WS_REVIEWERS_SET_STATUS:
@@ -154,7 +155,7 @@ export interface IActionReviewersSetCurrentReviewer extends Action<typeof SET_CU
 // Side effects, only as applicable
 // e.g. thunks, epics, et cetera
 
-export function changeCurrentReviewer(user: any) {
+export function changeCurrentReviewer(user: IUser) {
     return async (dispatch: Function, getState: Function, { api, emit }: IThunkExtras) => {
         if (user !== null) {
             dispatch(setCurrentReviewer(user.id))
@@ -181,7 +182,7 @@ export function unassignAReviewer(tweetId: string) {
     }
 }
 
-export function markAssignmentDone(assignment: any) {
+export function markAssignmentDone(assignment: IReviewerAssignment) {
     return async (dispatch: Function, getState: Function, { api, emit }: IThunkExtras) => {
         dispatch(markAnAssignmentDone(assignment.id))
         await api.get("/api/0.1/social_assignments/assignment_done/", dispatch, {

frontend/src/redux/modules/social.tsx

@@ -71,7 +71,7 @@ export interface ISocialTweetData {}
 
 // Side effects, only as applicable
 // e.g. thunks, epics, et cetera
-export function fetchTweets(startIndex: number, stopIndex: number, columns: any[] = []) {
+export function fetchTweets(startIndex: number, stopIndex: number, columns: number[] = []) {
     return async (dispatch: Function, getState: Function, { api, emit }: IThunkExtras) => {
         const { json } = await api.get(
             "/api/0.1/tweets/get_some_tweets/",

frontend/src/redux/modules/triage.tsx

@@ -1,6 +1,6 @@
 import * as dotProp from "dot-prop-immutable"
 import { uniq } from "lodash-es"
-import { IActionSocialColumnsList, IActionsTweetsFetch } from "src/websockets/actions"
+import { IActionSocialColumnsList, IActionsTweetsFetch, ITweetFetchColumn } from "src/websockets/actions"
 import { WS_SOCIAL_COLUMNS_LIST, WS_TWEETS_FETCH_SOME } from "src/websockets/constants"
 // import { IAnalyticsMeta } from "../../shared/analytics/GoogleAnalytics"
 
@@ -20,7 +20,7 @@ type IAction = IActionsTweetsFetch | IActionSocialColumnsList
 export default function reducer(state: IModule = initialState, action: IAction) {
     switch (action.type) {
         case WS_TWEETS_FETCH_SOME:
-            action.columns.forEach((column: any, index: number) => {
+            action.columns.forEach((column: ITweetFetchColumn, index: number) => {
                 // Merge and then sort column tweetIds to maintain the correct order chronological order
                 const val = uniq([...state.column_tweets![column.id], ...column.tweet_ids])
                 const sorted = val.sort().reverse()
@@ -29,14 +29,14 @@ export default function reducer(state: IModule = initialState, action: IAction)
             return state
         // case WS_TWEETS_FETCH_SOME_NEW_TWEETS:
         //     console.log("triage.WS_TWEETS_FETCH_SOME_NEW_TWEETS", action)
-        //     action.columns.forEach((column: any, index: number) => {
+        //     action.columns.forEach((column: ITriageColumn, index: number) => {
         //         // Merge and then sort column tweetIds to maintain the correct order chronological order
         //         const val = uniq([...state.column_tweets![column.id], ...column.tweets])
         //         const sorted = val.sort().reverse()
         //         state = dotProp.set(state, `column_tweets.${column.id}`, sorted)
 
         //         // Update the total number of tweets in the database for this column
-        //         const columnIndex = state.columns.findIndex((col: any) => {
+        //         const columnIndex = state.columns.findIndex((col: ITriageColumn) => {
         //             return col.id === column.id
         //         })
         //         state = dotProp.set(
@@ -50,8 +50,8 @@ export default function reducer(state: IModule = initialState, action: IAction)
             // Initialise our store for the tweetIds associated with each column
             // Map our list of columns to an object of empty arrays indexed by columnId
             // e.g. {1: [], 2: []}
-            const columnTweets: any = {}
-            action.columns.forEach((column: any, index: number) => {
+            const columnTweets: object = {}
+            action.columns.forEach((column: ITriageColumn, index: number) => {
                 columnTweets[column.id] = []
             })
 

frontend/src/review/UserReviewQueueView/UserReviewQueueView.tsx

@@ -2,6 +2,8 @@ import { Card, CardActions, CardText, Checkbox, MenuItem, RaisedButton, SelectFi
 import { ActionAssignmentTurnedIn, ActionVisibility, ActionVisibilityOff } from "material-ui/svg-icons"
 import * as React from "react"
 import Tweet from "react-tweet"
+import { IReviewerAssignment, IReviewerUser } from "src/redux/modules/reviewers"
+import { ISocialTweet } from "src/redux/modules/social"
 import styled from "styled-components"
 
 const ReviewContainer = styled.div`
@@ -15,10 +17,10 @@ const PaddedCard = styled(Card)`
 `
 
 export interface IProps {
-    assignments: object[]
-    tweets: any[]
-    reviewers: any[]
-    currentReviewer: any | null
+    assignments: IReviewerAssignment[]
+    tweets: ISocialTweet[]
+    reviewers: IReviewerUser[]
+    currentReviewer: IReviewerUser
     onMarkAsDone: any
     onChangeQueueUser: any
     onToggleUserOnlineStatus: any
@@ -27,9 +29,9 @@ export interface IProps {
 export class UserReviewQueueView extends React.Component<IProps, {}> {
     private onMarkAsDone: Function
 
-    public constructor(props: any) {
+    public constructor(props: IProps) {
         super(props)
-        this.onMarkAsDone = (assignment: any) => () => this.props.onMarkAsDone(assignment)
+        this.onMarkAsDone = (assignment: IReviewerAssignment) => () => this.props.onMarkAsDone(assignment)
     }
     public render() {
         const { assignments, tweets, reviewers, currentReviewer, onChangeQueueUser, onToggleUserOnlineStatus } = this.props
@@ -45,7 +47,7 @@ export class UserReviewQueueView extends React.Component<IProps, {}> {
                             value={currentReviewer.id}
                             onChange={onChangeQueueUser}
                         >
-                            {reviewers.map((reviewer: any) => (
+                            {reviewers.map((reviewer: IReviewerUser) => (
                                 <MenuItem key={reviewer.id} value={reviewer.id} primaryText={reviewer.name} />
                             ))}
                         </SelectField>
@@ -65,7 +67,7 @@ export class UserReviewQueueView extends React.Component<IProps, {}> {
                 </Toolbar>
 
                 <ReviewContainer>
-                    {assignments.map((assignment: any) => (
+                    {assignments.map((assignment: IReviewerAssignment) => (
                         <React.Fragment key={assignment.id}>
                             <PaddedCard>
                                 <CardText>

frontend/src/review/UserReviewQueueView/UserReviewQueueViewContainer.tsx

@@ -5,20 +5,22 @@ import {
     getCurrentReviewer,
     getCurrentReviewerAssignments,
     IReviewerAssignment,
+    IReviewerUser,
     markAssignmentDone,
     onToggleCurrentReviewerOnlineStatus,
     setCurrentReviewer,
 } from "src/redux/modules/reviewers"
+import { ISocialTweet } from "src/redux/modules/social"
 import UserReviewQueueView from "./UserReviewQueueView"
 
 export interface IProps {}
 
 export interface IStoreProps {
     user: IUser | null
     assignments: IReviewerAssignment[]
-    tweets: object[]
-    reviewers: any[]
-    currentReviewer: any | null
+    tweets: ISocialTweet[]
+    reviewers: IReviewerUser[]
+    currentReviewer: IReviewerUser | null | undefined
 }
 
 export interface IDispatchProps {
@@ -27,7 +29,8 @@ export interface IDispatchProps {
     onToggleUserOnlineStatus: Function
 }
 
-class UserReviewQueueViewContainer extends React.Component<IProps & IStoreProps & IDispatchProps, {}> {
+type TComponentProps = IProps & IStoreProps & IDispatchProps
+class UserReviewQueueViewContainer extends React.Component<TComponentProps, {}> {
     public render() {
         const {
             user,
@@ -58,7 +61,7 @@ class UserReviewQueueViewContainer extends React.Component<IProps & IStoreProps
     }
 }
 
-const mapStateToProps = (state: IStore, ownProps: any): IStoreProps => {
+const mapStateToProps = (state: IStore, ownProps: TComponentProps): IStoreProps => {
     const { user, reviewers, social } = state
 
     return {
@@ -72,7 +75,7 @@ const mapStateToProps = (state: IStore, ownProps: any): IStoreProps => {
 
 const mapDispatchToProps = (dispatch: Function): IDispatchProps => {
     return {
-        onMarkAsDone: (assignment: any) => {
+        onMarkAsDone: (assignment: IReviewerAssignment) => {
             dispatch(markAssignmentDone(assignment))
         },
         onChangeQueueUser: async (event: object, key: number, reviewerId: number) => {

frontend/src/triage/TriageView/TriageView.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { ITriageColumn } from "src/redux/modules/triage"
 import styled from "../../../node_modules/styled-components"
 import TweetColumnContainer from "../TweetColumn/TweetColumnContainer"
 
@@ -14,7 +15,7 @@ const ColumnContainer = styled.div`
 `
 
 export interface IProps {
-    columns: any[]
+    columns: ITriageColumn[]
 }
 
 export class TriageView extends React.Component<IProps, {}> {
@@ -29,7 +30,9 @@ export class TriageView extends React.Component<IProps, {}> {
         return (
             <ColumnContainerContainer>
                 <ColumnContainer>
-                    {columns.map((column: any, key: number) => <TweetColumnContainer key={column.id} column={column} />)}
+                    {columns.map((column: ITriageColumn, key: number) => (
+                        <TweetColumnContainer key={column.id} column={column} />
+                    ))}
                 </ColumnContainer>
             </ColumnContainerContainer>
         )

frontend/src/triage/TriageView/TriageViewContainer.tsx

@@ -1,17 +1,19 @@
 import * as React from "react"
 import { connect } from "react-redux"
 import { IStore, IUser } from "src/redux/modules/interfaces"
+import { ITriageColumn } from "src/redux/modules/triage"
 import TriageView from "./TriageView"
 
 export interface IProps {}
 
 export interface IStoreProps {
     user: IUser | null
-    columns: object[]
+    columns: ITriageColumn[]
 }
 
 export interface IDispatchProps {}
 
+type TComponentProps = IProps & IStoreProps & IDispatchProps
 class TriageViewContainer extends React.Component<IProps & IStoreProps & IDispatchProps, {}> {
     public render() {
         const { user, columns } = this.props
@@ -24,7 +26,7 @@ class TriageViewContainer extends React.Component<IProps & IStoreProps & IDispat
     }
 }
 
-const mapStateToProps = (state: IStore, ownProps: any): IStoreProps => {
+const mapStateToProps = (state: IStore, ownProps: TComponentProps): IStoreProps => {
     const { user, triage } = state
 
     return {

frontend/src/triage/TweetColumn/TweetColumn.tsx

@@ -5,6 +5,8 @@ import Tweet from "react-tweet"
 import { AutoSizer, CellMeasurer, CellMeasurerCache, InfiniteLoader, List } from "react-virtualized"
 import "react-virtualized/styles.css"
 import { IReviewerUser } from "src/redux/modules/reviewers"
+import { ISocialTweet } from "src/redux/modules/social"
+import { ITriageColumn } from "src/redux/modules/triage"
 import styled from "styled-components"
 
 const Column = styled.div`
@@ -18,9 +20,9 @@ const ColumnHeading = styled.h3`
 `
 
 export interface IProps {
-    column: any
+    column: ITriageColumn
     tweet_ids: string[]
-    tweets: any[]
+    tweets: ISocialTweet[]
     reviewers: IReviewerUser[]
     loadMoreRows: any
     assignTweet: any
@@ -42,9 +44,9 @@ export class TweetColumn extends React.Component<IProps, {}> {
 
     private _list: any
 
-    public constructor(props: any) {
+    public constructor(props: IProps) {
         super(props)
-        this.dismissTweet = (tweetId: any) => () => this.props.dismissTweet(tweetId)
+        this.dismissTweet = (tweetId: string) => () => this.props.dismissTweet(tweetId)
     }
 
     public render() {
@@ -90,7 +92,7 @@ export class TweetColumn extends React.Component<IProps, {}> {
         )
     }
 
-    public componentDidUpdate(prevProps: any, prevState: any) {
+    public componentDidUpdate(prevProps: IProps, prevState: IProps) {
         if (this.props.tweet_ids !== prevProps.tweet_ids) {
             let index
 
@@ -163,8 +165,8 @@ export class TweetColumn extends React.Component<IProps, {}> {
                                 onItemClick={this.props.assignTweet}
                             >
                                 {"reviewer_id" in tweets[tweetId] && <MenuItem primaryText={<em>Unassign</em>} data-tweetid={tweetId} />}
-                                {reviewers.map((reviewer: any) => {
-                                    let primaryText = reviewer.name
+                                {reviewers.map((reviewer: IReviewerUser) => {
+                                    let primaryText: string | JSX.Element = reviewer.name
                                     if ("reviewer_id" in tweets[tweetId] && tweets[tweetId].reviewer_id === reviewer.id) {
                                         primaryText += " (Assigned)"
                                     }

frontend/src/triage/TweetColumn/TweetColumnContainer.tsx

@@ -2,16 +2,17 @@ import * as React from "react"
 import { connect } from "react-redux"
 import { IStore } from "src/redux/modules/interfaces"
 import { assignAReviewer, IReviewerUser, unassignAReviewer } from "src/redux/modules/reviewers"
-import { dismissATweet, fetchTweets } from "src/redux/modules/social"
+import { dismissATweet, fetchTweets, ISocialTweet } from "src/redux/modules/social"
+import { ITriageColumn } from "src/redux/modules/triage"
 import TweetColumn from "./TweetColumn"
 
 export interface IProps {
-    column: any
+    column: ITriageColumn
 }
 
 export interface IStoreProps {
     tweet_ids: string[]
-    tweets: any[]
+    tweets: ISocialTweet[]
     reviewers: IReviewerUser[]
 }
 
@@ -21,10 +22,11 @@ export interface IDispatchProps {
     dismissTweet: any
 }
 
-export class TweetColumnContainer extends React.Component<IProps & IStoreProps & IDispatchProps, {}> {
+type TComponentProps = IProps & IStoreProps & IDispatchProps
+export class TweetColumnContainer extends React.Component<TComponentProps, {}> {
     private loadMoreRows: any
 
-    public constructor(props: any) {
+    public constructor(props: TComponentProps) {
         super(props)
 
         this.loadMoreRows = props.loadMoreRows.bind(this, props.column)
@@ -46,7 +48,7 @@ export class TweetColumnContainer extends React.Component<IProps & IStoreProps &
     }
 }
 
-const mapStateToProps = (state: IStore, ownProps: any): IStoreProps => {
+const mapStateToProps = (state: IStore, ownProps: TComponentProps): IStoreProps => {
     const { triage, social, reviewers } = state
 
     return {
@@ -58,17 +60,19 @@ const mapStateToProps = (state: IStore, ownProps: any): IStoreProps => {
 
 const mapDispatchToProps = (dispatch: Function): IDispatchProps => {
     return {
-        loadMoreRows: (column: any, indexes: { startIndex: number; stopIndex: number }) => {
+        loadMoreRows: (column: ITriageColumn, indexes: { startIndex: number; stopIndex: number }) => {
             return dispatch(fetchTweets(indexes.startIndex, indexes.stopIndex, [column.id]))
         },
         assignTweet: (event: any, item: any) => {
+            console.log("assignTweet.item", item)
             if ("data-reviewerid" in item.props) {
                 dispatch(assignAReviewer(item.props["data-tweetid"], item.props["data-reviewerid"]))
             } else {
                 dispatch(unassignAReviewer(item.props["data-tweetid"]))
             }
         },
         dismissTweet: (tweetId: string, event: any) => {
+            console.log("dismissTweet.event", event)
             dispatch(dismissATweet(tweetId))
         },
     }

frontend/src/websockets/actions.tsx

@@ -72,7 +72,7 @@ export const init = (store: any) => {
         }
     }
 }
-export const emit = (action: any) => socket.send(JSON.stringify(action))
+export const emit = (action: Action) => socket.send(JSON.stringify(action))
 
 // Models
 export interface IActionWebSocketBase {
@@ -103,12 +103,12 @@ export interface IActionReviewersSetStatus extends Action<typeof WS_REVIEWERS_SE
     is_accepting_assignments: boolean
 }
 
+export interface ITweetFetchColumn {
+    id: number
+    tweet_ids: string[]
+}
+
 export interface IActionsTweetsFetch extends Action<typeof WS_TWEETS_FETCH_SOME> {
-    columns: [
-        {
-            id: number
-            tweet_ids: string[]
-        }
-    ]
+    columns: ITweetFetchColumn[]
     tweets: ISocialTweetList
 }