Skip to content

Commit 8040332

Browse files
exrhizoexrhizo
committed
Remove recompose and switch responseViewer to hooks
1 parent 95a9ce5 commit 8040332

File tree

4 files changed

+78
-99
lines changed

4 files changed

+78
-99
lines changed

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
"react-final-form": "^6.3.0",
2020
"react-redux": "^7.1.0",
2121
"react-scripts": "3.0.1",
22-
"recompose": "^0.30.0",
2322
"recordrtc": "^5.5.8",
2423
"redux": "^4.0.1",
2524
"redux-first-history": "^4.0.4",

‎src/pages/ResponseList.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const ResponseList = props => {
7979
() => {
8080
if (!isLoaded && !isLoading) {
8181
actions.fetchResponses().catch(error => {
82-
errorHandler(error, 'Failed to load challenges', true);
82+
errorHandler(error, 'Failed to load responses', true);
8383
});
8484
}
8585
},

‎src/pages/ResponseViewer.js

+76-84
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
1-
import React from 'react';
2-
import { compose, lifecycle, branch, renderNothing } from 'recompose';
3-
import { connect } from 'react-redux';
4-
import { bindActionCreators } from 'redux';
1+
import React, { useEffect } from 'react';
2+
import { useSelector } from 'react-redux';
53

6-
import { withStyles } from '@material-ui/core/styles';
7-
import Button from '@material-ui/core/Button';
8-
import Container from '@material-ui/core/Container';
9-
import Paper from '@material-ui/core/Paper';
10-
import Typography from '@material-ui/core/Typography';
4+
import { makeStyles } from '@material-ui/core/styles';
5+
import { Button, Container, Paper, Typography } from '@material-ui/core';
116

127
import { ResponsesSelectors, ResponsesActions } from 'modules/responses';
138
import PaperPage from 'components/PaperPage';
9+
import { useActions, useCallbackRef, useErrorContext } from 'hooks';
1410

15-
const styles = theme => ({
11+
const useStyles = makeStyles(theme => ({
1612
videoContainer: {
1713
padding: 10,
1814
display: 'flex',
@@ -29,88 +25,84 @@ const styles = theme => ({
2925
width: '80%',
3026
margin: theme.spacing(2),
3127
},
32-
});
28+
}));
3329

34-
class ResponseViewer extends React.Component {
35-
constructor(props) {
36-
super(props);
37-
this.videoChallenge = React.createRef();
38-
this.videoResponse = React.createRef();
39-
}
30+
const ResponseViewer = props => {
31+
const classes = useStyles();
32+
const [videoChallengeRef, videoChallenge] = useCallbackRef();
33+
const [videoResponseRef, videoResponse] = useCallbackRef();
34+
35+
const isLoading = useSelector(state => ResponsesSelectors.isLoading(state));
36+
const isLoaded = useSelector(state => ResponsesSelectors.isLoaded(state));
37+
const response = useSelector(state =>
38+
ResponsesSelectors.response(state, props)
39+
);
40+
const challenge = (response || {}).challenge;
41+
const actions = useActions(ResponsesActions);
42+
const errorHandler = useErrorContext();
4043

41-
startPlaying = () => {
42-
let self = this;
43-
self.videoChallenge.current.play();
44-
self.videoResponse.current.play();
44+
useEffect(
45+
() => {
46+
if (!isLoaded && !isLoading) {
47+
actions.fetchResponses().catch(error => {
48+
errorHandler(error, 'Failed to load challenges', true);
49+
});
50+
}
51+
},
52+
// TODO: Stop the warning from happening.
53+
[isLoaded, isLoading] // This wouldn't make sense to include other vars.
54+
);
55+
56+
const startPlaying = () => {
57+
videoChallenge.play();
58+
videoResponse.play();
4559
// Mute the response video until the challenge is played.
4660
// This should be done more react-ily.
47-
self.videoResponse.current.volume = 0;
48-
self.videoChallenge.current.onended = () => {
49-
self.videoResponse.current.volume = 1;
61+
videoResponse.volume = 0;
62+
videoChallenge.onended = () => {
63+
videoResponse.volume = 1;
5064
};
5165
};
5266

53-
render() {
54-
const { classes, response } = this.props;
55-
// TODO(Alex): I don't understand why the branch below doesn't make
56-
// this unncessary.
57-
if (!response || response === undefined) {
58-
return (
59-
<Paper className={classes.paper}>
60-
<Typography variant="h2">Unknown Challenge</Typography>
61-
</Paper>
62-
);
63-
}
64-
const challenge = response.challenge;
67+
if (!response || response === undefined) {
6568
return (
66-
<PaperPage
67-
superTitle={`${response.user.full_name} responds to`}
68-
title={challenge.title}
69-
>
70-
<Container className={classes.instructionsContainer}>
71-
<Typography variant="h4">Instructions:</Typography>
72-
<Typography variant="body1">{challenge.instructions}</Typography>
73-
</Container>
74-
75-
<div className={classes.videoContainer}>
76-
<video width="250" ref={this.videoChallenge}>
77-
<source src={challenge.video.url} type="video/webm" />
78-
</video>
79-
<video width="250" ref={this.videoResponse}>
80-
<source src={response.video.url} type="video/webm" />
81-
</video>
82-
</div>
83-
84-
<div className={classes.toggleCenterer}>
85-
<Button
86-
className={classes.toggleButton}
87-
onClick={this.startPlaying}
88-
variant="contained"
89-
color="primary"
90-
>
91-
Play
92-
</Button>
93-
</div>
94-
</PaperPage>
69+
<Paper className={classes.paper}>
70+
<Typography variant="h2">Unknown Challenge</Typography>
71+
</Paper>
9572
);
9673
}
97-
}
9874

99-
export default compose(
100-
connect(
101-
(state, ownProps) => ({
102-
isLoading: ResponsesSelectors.isLoading(state),
103-
response: ResponsesSelectors.response(state, ownProps),
104-
}),
105-
dispatch => ({
106-
actions: bindActionCreators(ResponsesActions, dispatch),
107-
})
108-
),
109-
lifecycle({
110-
componentDidMount() {
111-
this.props.actions.fetchResponses();
112-
},
113-
}),
114-
branch(props => props.isLoading, renderNothing), // TODO: replace with a loading component
115-
withStyles(styles)
116-
)(ResponseViewer);
75+
return (
76+
<PaperPage
77+
superTitle={`${response.user.full_name} responds to`}
78+
title={challenge.title}
79+
>
80+
<Container className={classes.instructionsContainer}>
81+
<Typography variant="h4">Instructions:</Typography>
82+
<Typography variant="body1">{challenge.instructions}</Typography>
83+
</Container>
84+
85+
<div className={classes.videoContainer}>
86+
<video width="350" ref={videoChallengeRef}>
87+
<source src={challenge.video.url} type="video/webm" />
88+
</video>
89+
<video width="350" ref={videoResponseRef}>
90+
<source src={response.video.url} type="video/webm" />
91+
</video>
92+
</div>
93+
94+
<div className={classes.toggleCenterer}>
95+
<Button
96+
className={classes.toggleButton}
97+
onClick={startPlaying}
98+
variant="contained"
99+
color="primary"
100+
>
101+
Play
102+
</Button>
103+
</div>
104+
</PaperPage>
105+
);
106+
};
107+
108+
export default ResponseViewer;

‎yarn.lock

+1-13
Original file line numberDiff line numberDiff line change
@@ -8659,7 +8659,7 @@ react-is@^16.5.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is
86598659
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa"
86608660
integrity sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw==
86618661

8662-
react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
8662+
react-lifecycles-compat@^3.0.4:
86638663
version "3.0.4"
86648664
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
86658665
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -8866,18 +8866,6 @@ realpath-native@^1.1.0:
88668866
dependencies:
88678867
util.promisify "^1.0.0"
88688868

8869-
recompose@^0.30.0:
8870-
version "0.30.0"
8871-
resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.30.0.tgz#82773641b3927e8c7d24a0d87d65aeeba18aabd0"
8872-
integrity sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==
8873-
dependencies:
8874-
"@babel/runtime" "^7.0.0"
8875-
change-emitter "^0.1.2"
8876-
fbjs "^0.8.1"
8877-
hoist-non-react-statics "^2.3.1"
8878-
react-lifecycles-compat "^3.0.2"
8879-
symbol-observable "^1.0.4"
8880-
88818869
recompose@~0.26.0:
88828870
version "0.26.0"
88838871
resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.26.0.tgz#9babff039cb72ba5bd17366d55d7232fbdfb2d30"

0 commit comments

Comments
 (0)