Skip to content

Commit

Permalink
Frontend changes to allow users to favourite and retweet from within …
Browse files Browse the repository at this point in the history 
…Scremsong

#40
  • Loading branch information
@keithamoss
keithamoss committed Dec 30, 2018
1 parent 1106789 commit 0e4066d
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 60 deletions.
44 changes: 44 additions & 0 deletions frontend/src/redux/modules/social.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
IActionsTweetsLoadTweets,
IActionsTweetsSetState,
IActionTweetsNew,
IActionTweetsUpdateTweets,
ITweetFetchColumn,
} from "../../websockets/actions"
import {
Expand All @@ -24,6 +25,7 @@ import {
WS_TWEETS_LOAD_TWEETS,
WS_TWEETS_NEW_TWEETS,
WS_TWEETS_SET_STATE,
WS_TWEETS_UPDATE_TWEETS,
} from "../../websockets/constants"
import { IStore } from "./reducer"
import { IReviewerAssignment } from "./reviewers"
Expand All @@ -42,6 +44,7 @@ type IAction =
| IActionLoadTweets
| IActionsTweetsLoadTweets
| IActionTweetsNew
| IActionTweetsUpdateTweets
| IActionReviewersListAssignments
| IActionReviewersAssign
| IActionReviewersUnassign
Expand All @@ -53,6 +56,7 @@ export default function reducer(state: IModule = initialState, action: IAction)
case LOAD_TWEETS:
case WS_TWEETS_LOAD_TWEETS:
case WS_TWEETS_NEW_TWEETS:
case WS_TWEETS_UPDATE_TWEETS:
return dotProp.set(state, "tweets", { ...state.tweets, ...action.tweets })
case WS_REVIEWERS_LIST_ASSIGNMENTS:
Object.values(action.assignments).forEach((assignment: IReviewerAssignment, index: number) => {
Expand Down Expand Up @@ -175,13 +179,21 @@ export enum eSocialTweetState {
DISMISSED = "Dismissed",
}

export enum eSocialTweetActionType {
REPLY = "reply",
RETWEET = "retweet",
FAVOURITE = "favourite",
}

export interface ISocialTweet {
data: ISocialTweetData
state: eSocialTweetState
}

export interface ISocialTweetData {
id_str: string
favorited: boolean
retweeted: boolean
}

// Side effects, only as applicable
Expand Down Expand Up @@ -211,3 +223,35 @@ export function setTweetState(tweetId: string, tweetState: eSocialTweetState) {
})
}
}

export function favouriteTweet(tweetId: string) {
return async (dispatch: Function, getState: Function, { api, emit }: IThunkExtras) => {
await api.get("/api/0.1/tweets/favourite/", dispatch, {
tweetId,
})
}
}

export function unfavouriteTweet(tweetId: string) {
return async (dispatch: Function, getState: Function, { api, emit }: IThunkExtras) => {
await api.get("/api/0.1/tweets/unfavourite/", dispatch, {
tweetId,
})
}
}

export function retweetTweet(tweetId: string) {
return async (dispatch: Function, getState: Function, { api, emit }: IThunkExtras) => {
await api.get("/api/0.1/tweets/retweet/", dispatch, {
tweetId,
})
}
}

export function unretweetTweet(tweetId: string) {
return async (dispatch: Function, getState: Function, { api, emit }: IThunkExtras) => {
await api.get("/api/0.1/tweets/unretweet/", dispatch, {
tweetId,
})
}
}
113 changes: 61 additions & 52 deletions frontend/src/triage/TweetColumn/TweetColumn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export interface IProps {
loadMoreRows: any
onPositionUpdate: any
onSetTweetState: any
onTweetAction: any
}

export interface IState {
Expand Down Expand Up @@ -257,7 +258,7 @@ class TweetColumn extends React.Component<TComponentProps, IState> {
}

private _rowRenderer = ({ index, isScrolling, isVisible, key, parent, style }: any) => {
const { column, tweet_ids, tweets, tweet_assignments, assignments, classes } = this.props
const { column, tweet_ids, tweets, tweet_assignments, assignments, onTweetAction, classes } = this.props

if (index >= column.total_tweets) {
return (
Expand Down Expand Up @@ -286,65 +287,73 @@ class TweetColumn extends React.Component<TComponentProps, IState> {

return (
<CellMeasurer key={key} cache={this._cache} columnIndex={0} parent={parent} rowIndex={index}>
<div style={style}>
<div className={classes.actionBar} style={{ borderRight: `6px solid ${backgroundColor}` }}>
<Tooltip title="Assign this tweet to someone" aria-label="Assign tweet">
<Button
size="small"
className={classes.button}
aria-label="Assign tweet"
onClick={this.onOpenAssigner(tweetId, assignmentId)}
>
{assignmentId === undefined ? <AssignmentOutlinedIcon /> : <AssignmentIcon />}
</Button>
</Tooltip>

{tweet.state === eSocialTweetState.ACTIVE && (
<React.Fragment>
<Tooltip title="Dismiss this tweet (ignore it)" aria-label="Dismiss tweet">
<Button
size="small"
className={classes.button}
aria-label="Dismiss tweet"
onClick={this.onSetTweetState(tweetId, eSocialTweetState.DISMISSED)}
>
<DeleteOutlinedIcon />
</Button>
</Tooltip>
{({ measure }) => (
<div style={style}>
<div className={classes.actionBar} style={{ borderRight: `6px solid ${backgroundColor}` }}>
<Tooltip title="Assign this tweet to someone" aria-label="Assign tweet">
<Button
size="small"
className={classes.button}
aria-label="Assign tweet"
onClick={this.onOpenAssigner(tweetId, assignmentId)}
>
{assignmentId === undefined ? <AssignmentOutlinedIcon /> : <AssignmentIcon />}
</Button>
</Tooltip>

<Tooltip title="Mark this tweet as dealt with" aria-label="Deal with tweet">
{tweet.state === eSocialTweetState.ACTIVE && (
<React.Fragment>
<Tooltip title="Dismiss this tweet (ignore it)" aria-label="Dismiss tweet">
<Button
size="small"
className={classes.button}
aria-label="Dismiss tweet"
onClick={this.onSetTweetState(tweetId, eSocialTweetState.DISMISSED)}
>
<DeleteOutlinedIcon />
</Button>
</Tooltip>

<Tooltip title="Mark this tweet as dealt with" aria-label="Deal with tweet">
<Button
size="small"
className={classes.button}
aria-label="Deal with tweet"
onClick={this.onSetTweetState(tweetId, eSocialTweetState.DEALT_WITH)}
>
<CheckCircleOutlinedIcon />
</Button>
</Tooltip>
</React.Fragment>
)}

{(tweet.state === eSocialTweetState.DISMISSED || tweet.state === eSocialTweetState.DEALT_WITH) && (
<Tooltip
title="Make this tweet active again (i.e. undismiss it, mark it as 'not deal with')"
aria-label="Set active"
>
<Button
size="small"
className={classes.button}
aria-label="Deal with tweet"
onClick={this.onSetTweetState(tweetId, eSocialTweetState.DEALT_WITH)}
aria-label="Set active"
onClick={this.onSetTweetState(tweetId, eSocialTweetState.ACTIVE)}
>
<CheckCircleOutlinedIcon />
<LiveTvOutlinedIcon />
</Button>
</Tooltip>
</React.Fragment>
)}

{(tweet.state === eSocialTweetState.DISMISSED || tweet.state === eSocialTweetState.DEALT_WITH) && (
<Tooltip
title="Make this tweet active again (i.e. undismiss it, mark it as 'not deal with')"
aria-label="Set active"
>
<Button
size="small"
className={classes.button}
aria-label="Set active"
onClick={this.onSetTweetState(tweetId, eSocialTweetState.ACTIVE)}
>
<LiveTvOutlinedIcon />
</Button>
</Tooltip>
)}
</div>
<div style={{ display: "inline", opacity }}>
<Tweet key={tweetId} data={tweets[tweetId].data} linkProps={{ target: "_blank", rel: "noreferrer" }} />
)}
</div>
<Tweet
key={tweetId}
data={tweets[tweetId].data}
linkProps={{ target: "_blank", rel: "noreferrer" }}
tweetStyles={{ display: "inline", opacity }}
onTweetAction={onTweetAction}
onMediaLoad={measure}
onMediaLoadError={measure}
/>
</div>
</div>
)}
</CellMeasurer>
)
}
Expand Down
25 changes: 24 additions & 1 deletion frontend/src/triage/TweetColumn/TweetColumnContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,18 @@ import { connect } from "react-redux"
import { IStore } from "../../redux/modules/reducer"
import { IReviewerAssignment } from "../../redux/modules/reviewers"
import {
eSocialTweetActionType,
eSocialTweetState,
favouriteTweet,
fetchTweets,
getTweetAssignmentsForColumn,
ISocialTweetAssignments,
ISocialTweetData,
ISocialTweetList,
retweetTweet,
setTweetState,
unfavouriteTweet,
unretweetTweet,
} from "../../redux/modules/social"
import { ITriageColumn } from "../../redux/modules/triage"
import { IProfileColumnPosition, ws_changeUserProfileSettings } from "../../redux/modules/user"
Expand All @@ -36,6 +42,7 @@ export interface IDispatchProps {
loadMoreRows: any
onPositionUpdate: any
onSetTweetState: any
onTweetAction: any
}

export interface IReactVirtualizedIndexes {
Expand Down Expand Up @@ -83,7 +90,7 @@ class TweetColumnContainer extends React.Component<TComponentProps, {}> {
)
}
public render() {
const { column, onOpenAssigner, tweet_ids, tweets, tweet_assignments, assignments, onSetTweetState } = this.props
const { column, onOpenAssigner, tweet_ids, tweets, tweet_assignments, assignments, onSetTweetState, onTweetAction } = this.props

return (
<TweetColumn
Expand All @@ -99,6 +106,7 @@ class TweetColumnContainer extends React.Component<TComponentProps, {}> {
loadMoreRows={this.loadMoreRows}
onPositionUpdate={this.onPositionUpdate}
onSetTweetState={onSetTweetState}
onTweetAction={onTweetAction}
/>
)
}
Expand Down Expand Up @@ -130,6 +138,21 @@ const mapDispatchToProps = (dispatch: Function): IDispatchProps => {
onSetTweetState: (tweetId: string, tweetState: eSocialTweetState) => {
dispatch(setTweetState(tweetId, tweetState))
},
onTweetAction: (tweetAction: eSocialTweetActionType, tweet: ISocialTweetData) => {
if (tweetAction === eSocialTweetActionType.FAVOURITE) {
if (tweet.favorited === false) {
dispatch(favouriteTweet(tweet.id_str))
} else {
dispatch(unfavouriteTweet(tweet.id_str))
}
} else if (tweetAction === eSocialTweetActionType.RETWEET) {
if (tweet.retweeted === false) {
dispatch(retweetTweet(tweet.id_str))
} else {
dispatch(unretweetTweet(tweet.id_str))
}
}
},
}
}

Expand Down
19 changes: 12 additions & 7 deletions frontend/src/websockets/actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
WS_TWEETS_LOAD_TWEETS,
WS_TWEETS_NEW_TWEETS,
WS_TWEETS_SET_STATE,
WS_TWEETS_UPDATE_TWEETS,
} from "./constants"

// Models
Expand All @@ -38,13 +39,6 @@ export interface IActionNotification extends Action<typeof WS_NOTIFICATION> {
key: string
}

export interface IActionTweetsNew extends Action<typeof WS_TWEETS_NEW_TWEETS> {
tweets: ISocialTweet[]
columnIds: {
[key: string]: number[]
}
}

export interface IActionSocialColumnsList extends Action<typeof WS_SOCIAL_COLUMNS_LIST> {
columns: ITriageColumn[]
}
Expand Down Expand Up @@ -93,6 +87,17 @@ export interface ITweetFetchColumn {
tweet_ids_buffered: string[]
}

export interface IActionTweetsNew extends Action<typeof WS_TWEETS_NEW_TWEETS> {
tweets: ISocialTweet[]
columnIds: {
[key: string]: number[]
}
}

export interface IActionTweetsUpdateTweets extends Action<typeof WS_TWEETS_UPDATE_TWEETS> {
tweets: ISocialTweet[]
}

export interface IActionsTweetsSetState extends Action<typeof WS_TWEETS_SET_STATE> {
tweetId: string
tweetState: eSocialTweetState
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/websockets/constants.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export const WS_NOTIFICATION = "ws/scremsong/NOTIFICATION"

export const WS_TWEETS_NEW_TWEETS = "ws/scremsong/tweets/NEW_TWEETS"
export const WS_TWEETS_LOAD_TWEETS = "ws/scremsong/tweets/LOAD_TWEETS"
export const WS_TWEETS_UPDATE_TWEETS = "ws/scremsong/tweets/UPDATE_TWEETS"
export const WS_TWEETS_SET_STATE = "ws/scremsong/tweets/SET_STATE"

export const WS_SOCIAL_COLUMNS_LIST = "ws/scremsong/social_columns/LIST"
Expand All @@ -22,6 +23,7 @@ export const messageTypes = [
WS_NOTIFICATION,
WS_TWEETS_NEW_TWEETS,
WS_TWEETS_LOAD_TWEETS,
WS_TWEETS_UPDATE_TWEETS,
WS_TWEETS_SET_STATE,
WS_SOCIAL_COLUMNS_LIST,
WS_REVIEWERS_LIST_USERS,
Expand Down

0 comments on commit 0e4066d

Please sign in to comment.