Hi I'm implementing a sample app with react,I'm also using youtube api search and react bootstrap.
The idea is the following, I enter a search term, for example "PS4" this will call youtube api search and will bring back 5 matching results in a json format.
With this json, I render a list of thumbnails with videos, title, description,(similar to youtube website). if I click on one of the thumbnails, the idea is to display a modal dialog with the video inside. Here's the problem, it's always loading the same video.
I omit the imports at the beginning of the file
VideoList.js
class VideoList extends React.Component {
constructor(props) {
super(props);
this.openModal = this.openModal.bind(this);
this.close = this.close.bind(this);
this.state = {
showModal: false
}
}
openModal(video) {
this.setState({ showModal: true });
}
close() {
this.setState({ showModal: false });
}
render() {
const videoItems = this.props.videos.map(video =>
<Col xs={6} md={4}>
<Thumbnail onClick={() => this.openModal(video)}
className="thumbnail"
src={video.snippet.thumbnails.default.url}
alt={video.snippet.description}
key={uid()}
>
<h3>{video.title}</h3>
<p>{video.snippet.description}</p>
<hr />
<i>Date: {video.snippet.publishedAt}</i>
<VideoView show={this.state.showModal} video={video} close={this.close} />
</Thumbnail>
</Col>
);
return (
<Grid>
<Row>
{videoItems}
</Row>
</Grid>
);
}
}
export default VideoList;
VideoView.js
const VideoView = props => {
if (!props) {
return <div>{'Could not load the video'}</div>
}
return (
<div className="static-modal">
<Modal show={props.show}>
<Modal.Header>
<Modal.Title>{props.video.snippet.title}</Modal.Title>
</Modal.Header>
<Modal.Body>
One fine body...
</Modal.Body>
<Modal.Footer>
<Button onClick={() => props.close()}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
export default VideoView;
If I click on one of the thumbnails, a modal popup shows with the video (some information of it, not the video itself), the thing is that it always shows the last video (the last in the list of thumbnails)
Another thing: I'm facing a design problem here because I think I should delegate the onclose action to the modal dialog, in this case, the VideoView however the videoView component is a stateless component, I'm only sending some props to render it, (check the onclose callback). Is this a correct approach? Thanks!
You create multiple VideoView elements sharing the same prop this.state.showModal. It means that when this.state.showModal is true then you show all modals at once, and you see only one of them which is on top. Create one VideoView element and pass it a video to show. Also to show/hide modal you can check if this.state.video is not equal to null - if it have value assigned then modal should be visible.
class VideoList extends React.Component {
constructor(props) {
super(props);
this.openModal = this.openModal.bind(this);
this.close = this.close.bind(this);
this.state = {
video: null
}
}
openModal(video) {
this.setState({ video: video });
}
close() {
this.setState({ video: null });
}
render() {
const videoItems = this.props.videos.map(video =>
<Col xs={6} md={4}>
<Thumbnail onClick={() => this.openModal(video)}
className="thumbnail"
src={video.snippet.thumbnails.default.url}
alt={video.snippet.description}
key={uid()}
>
<h3>{video.title}</h3>
<p>{video.snippet.description}</p>
<hr />
<i>Date: {video.snippet.publishedAt}</i>
</Thumbnail>
</Col>
);
return (
<div>
<Grid>
<Row>
{videoItems}
</Row>
</Grid>
<VideoView show={this.state.video !== null} video={this.state.video} close={this.close} />
</div>
);
}
}
export default VideoList;
Related
I have two different react components placed one after the other in my app named SearchBar and InfiniteScroller;
function App() {
const [searchTerm, setSearchTerm] = useState("");
return (
<div className="App">
<SNavbar></SNavbar>
<MainLogo></MainLogo>
<SearchBar search={setSearchTerm}></SearchBar>
<hr/>
<InfiniteScroller term={searchTerm}/>
<Footer/>
</div>
);
}
The search bar component has its own state where it updates a search term as its input is being edited and it calls the setSearch function of its parent when the button is clicked (the function is passed as a prop in the parent)
function SearchBar(props)
{
const [search,setSearch] = useState("");
return(
<Container className="Search-Bar">
<Row>
<Col>
<InputGroup >
<FormControl
placeholder="What are we making today?"
onChange={event => setSearch(event.target.value)}
/>
<Button onClick={() => props.search(search)}>
Go!
</Button>
</InputGroup>
</Col>
</Row>
</Container>)
}
The search term that is updated by the SearchBar component is passed onto the InfiniteScroller component as a property and is set as the searchTerm field in its state object.
class InfiniteScroller extends React.Component
{
constructor(props)
{
super(props);
this.state =
{
items:[],
page:1,
hasMore:true,
searchTerm:props.term
};
}
render(){
return(
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchData}
hasMore={this.state.hasMore}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}
>
<Row>
{this.state.items.map((i, index) => (
<Col key={index} lg="2" md="4" sm="6" xs="12">
<ImageCell className="ImageCell" link = {this.state.items[index].link}> - #{index}</ImageCell>
</Col>
))}
</Row>
</InfiniteScroll>
)
}
}
However when the setSearchTerm function of App.js is triggered by pressing the button on the SearchBar component, the InfiniteScroller does not seem to get updated. As the SearchTerm field of its state still comes up as "undefined" and the component itself does not re-render to represent the change in property.
I want the InfiniteScroller to completely re-render itself and make some API calls to populate itself with content, How can I achieve this?
So far I've tried adding in HTML tags that have the SearchTerm property in them to check if react skips re-rendering components that don't "use" any properties but that has not worked.
The props' change does not make the UI re-rendering but the states' change does.
It has 2 potential ways to fix have a proper UI re-rendering.
For the first one, you can add key attribute to your component that will help you do a trick for re-rendering whenever key gets changed
<InfiniteScroller term={searchTerm} key={searchTerm}/>
The second way, you can update your local states of that component by componentDidUpdate (useEffect in function-based components)
class InfiniteScroller extends React.Component
{
constructor(props)
{
super(props);
this.state =
{
items:[],
page:1,
hasMore:true,
searchTerm:props.term
};
}
//update states according to props change
componentDidUpdate(prevProps) {
if(this.props.searchTerm !== prevProps.searchTerm) {
setState({ searchTerm: this.props.searchTerm })
}
}
render(){
return(
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchData}
hasMore={this.state.hasMore}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}
>
<Row>
{this.state.items.map((i, index) => (
<Col key={index} lg="2" md="4" sm="6" xs="12">
<ImageCell className="ImageCell" link = {this.state.items[index].link}> - #{index}</ImageCell>
</Col>
))}
</Row>
</InfiniteScroll>
)
}
}
I am trying to open and close a dialog on a button click from another page/component.
But it is not working on clicking the button.
Any sugegstion what I am missing and doing wrong here with handeling modal.
Thanks in advance.
//TestComponent
class TestConnectDialog extends React.Component {
render() {
const {isOpen, onOk} = this.props;
return (
<Dialog
isopen={this.props.isopen}
onClose={this.props.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Test
</DialogContentText>
</DialogContent>
<DialogActions className="dialog-action">
<Button onClick={this.props.handleClose} className="primary-button">
Ok
</Button>
</DialogActions>
</Dialog>
);
}
};
export default TestConnectDialog;
// Home page
import TestConnectDialog from './TestConnectDialog';
class HomePage extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: false
};
this.handleTestConnectClick = this.handleTestConnectClick.bind(this);
//this.handleCloseDialog = this.handleCloseDialog.bind(this);
}
handleTestConnectClick= () =>{
this.setState({ isOpen: true });
}
render() {
const {isOpen, onOk} = this.props;
return (
<div className="section">
<Button className="connect-test-button"
onClick={this.handleTestConnectClick}>
Test
</Button>
<TestConnectDialog isOpen={this.state.isOpen} />
</div>
);
}
};
export default HomePage;
Your prop name is spelled incorrectly, it should be this.props.isOpen also a quick little tip, it is possible to use just one function for opening/closing the modal.
Something like this will work:
handleTestConnectClick = () => {
this.setState(prevState => ({
...prevState,
isOpen: !prevState.isOpen
}));
}
here we use our previous state and with the ! operator we switch from true to false and vice versa
Update 2.0:
After taking a closer look at the Material UI documentation, I noticed that your dialog prop for setting the modal visibility is wrong. It should be open instead of isOpen.
import TestConnectDialog from './TestConnectDialog';
class HomePage extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: false
};
//this.handleTestConnectClick = this.handleTestConnectClick.bind(this);
//this.handleCloseDialog = this.handleCloseDialog.bind(this);
// when using arrow functions you don't need to bind the this keyword
}
handleTestConnectClick = () => {
this.setState(prevState => ({
...prevState,
isOpen: !prevState.isOpen
}));
}
render() {
return (
<div className="section">
<Button className="connect-test-button"
// onClick={this.handleTestConnectClick}>
// change the onClick to the one below
onClick={ () => this.handleTestConnectClick() }
Test
</Button>
<TestConnectDialog isOpen={this.state.isOpen} handleTestConnectClick={this.handleTestConnectClick}/>
</div>
);
}
};
export default HomePage;
In TestConnectDialog component:
class TestConnectDialog extends React.Component {
render() {
return (
<Dialog
open={this.props.isOpen}
onClose={this.props.handleTestConnectClick}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Test
</DialogContentText>
</DialogContent>
<DialogActions className="dialog-action">
<Button onClick={this.props.handleTestConnectClick} className="primary-button">
Ok
</Button>
</DialogActions>
</Dialog>
);
}
};
export default TestConnectDialog;
You're passing the props <TestConnectDialog isOpen={this.state.isOpen} /> but trying to read it with isopen={this.props.isopen}.
Change your code to this: isopen={this.props.isOpen}
Update TestComponent component as given
class TestConnectDialog extends React.Component {
render() {
const {isOpen, onOk} = this.props;
return (
<Dialog
isopen={isOpen}
onClose={this.props.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Test
</DialogContentText>
</DialogContent>
<DialogActions className="dialog-action">
<Button onClick={this.props.handleClose} className="primary-button">
Ok
</Button>
</DialogActions>
</Dialog>
);
}
};
export default TestConnectDialog;
In the homepage component why is isOpen destructured from the prop and initialised in state. You have to use one, using both is confusing, you are working with that on the state but passing the one from the prop
When I clicked over a draggable dialog, I want to move to the top of the screen.
I have tried with scrollTo(0, 0), but this seems to not doing anything over my dialog box. Any help over it how can I able to move this dialog box.
Many Thanks in advance.
I am following this Move draggable objects to top of the screen or Div? example but need this to be with on click.
class Homepage extends Component {
constructor(props) {
super(props);
this.state = {
Pending:[],
cancelled:[],
}
this.myRef = React.createRef();
}
componentDidMount() {
this.myRef.current.scrollTo(0, 0);
}
componentDidUpdate(prevProps, prevState) {
if(!prevProps.isModerator){
if(prevProps.Permission === Permission &&
this.props.Permission === Requested){
}
}
}
render() {
const {allowRequest, classes} = this.props;
const { Pending} = this.state;
return (
<>
{Pending.map((user, index) => {
return <Draggable bounds="parent" key={user.id} ref={this.myRef}>
<div className={classes["share-request-content"]} >
<Paper className="alert-container" square={true}>
<DialogTitle id="alert-title">
{/* Title here */}
</DialogTitle>
<DialogContent>
{/* Content here */}
</DialogContent>
<DialogActions className="dialog-action">
<Button autoFocus color="primary" onClick={() => allowRequest(user.id)}>
"Allow"
</Button>
</DialogActions>
</Paper>
</div>
</Draggable>
})
}
</>
)
}
}
Homepage.propTypes = {
Permission: PropTypes.string,
isModerator: PropTypes.bool.isRequired,
Pending: PropTypes.array,
cancelled: PropTypes.array,
};
export default withStyles(styles)(injectIntl(Homepage))
Use the position={{x:0, y:0}} property to manually control the position of the dialog.
You can find the references here: https://github.com/STRML/react-draggable
I have a list of rooms names in a <Panel value="room01">. When clicked I need to save the value(which is in the attribute) to an array and change the color to green. On the other hand I also need to be able to undo the selection, meaning, the value needs to be deleted from the array and the color has to go back to default. How would I achieve this in JS/React?
With the below function, I can get the value to the element
onSelectRooms = (e) => {
const selectedRooms = e.target.getAttribute("value");
}
export default class ExportReportRoomSelectionModal extends React.Component {
constructor(props) {
super(props);
this.state = {
rooms: roomOrder,
selectedRooms: [],
};
this.onSelectRooms = this.onSelectRoom.bind(this);
}
onSelectRooms = (e) => {
const selectedRooms = e.target.getAttribute("value");
}
render() {
return (
<Modal>
<Modal.Header closeButton>
<Modal.Title>TItle</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Number of rooms: {this.state.rooms.length}</p>
<p>Rooms:</p>
<Grid fluid={true}>
<Row className="show-grid">
{ this.state.rooms.map((name, i ) =>
<Col key={i} xs={2} md={2}>
<Panel onClick={this.onSelectRooms}>
<Panel.Heading value={name}>
{name}
</Panel.Heading>
</Panel>
</Col>
)}
</Row>
</Grid>
</Modal.Body>
</Modal>);
}
}```
Using name props instead of getting the value from event handler is a better approach.
<Panel onClick={this.handleClick.bind(this, name)}>
handleClick logic, toggling the panel
handleClick(name, e) {
if (this.state.selectedRooms.includes(name)) {
// remove from array
const newSelectedRooms = this.state.selectedRooms.filter(e => e !=== name);
this.setState({selectedRooms: newSelectedRooms}):
} else {
// add to array
this.setState(prevState => {selectedRooms: [..prevState.selectedRooms, name]});
}
If you want to change color dynamically, you should do it based on state. Let's assume you have classname that change the color to green.
<Panel
onClick={this.handleClick.bind(this, name)}
className={this.state.selectedRooms.includes[name] ? 'green' : ''}
>
I have been working on my first Meteor application and am a bit stuck. I want to create my code following the latest guidelines (ES6 and React 15) but I am confused with all the recent changes in Javascript.
I want to add a Bootstrap Modal in my current comments list but can't seem to figure out how to add my content to the modal using the right up to date syntax.
Here is my current code:
In comment.js:
import React from 'react';
import { Row, Col, ListGroupItem, FormControl, Button } from 'react-bootstrap';
import { Bert } from 'meteor/themeteorchef:bert';
import { CommentsModal } from './comments-modal'
export const Comment = ({ comment }) => (
<ListGroupItem key={ comment._id }>
<Row>
<Col xs={ 8 } sm={ 10 }>
<FormControl
type="text"
defaultValue={ comment.title }
/>
</Col>
<Col xs={ 4 } sm={ 2 }>
<Button
bsStyle="danger"
className="btn-block">
Remove Comment
</Button>
</Col>
</Row>
<CommentsModal/>
</ListGroupItem>
);
In Comments-modal.js:
import React, { Component } from 'react';
import { Modal, Button, Tooltip } from 'react-bootstrap';
export class CommentsModal extends Component {
constructor(props) {
super(props);
this.state = {
showModal: false,
};
this.close = this.close.bind(this);
this.open = this.open.bind(this);
}
close() {
this.setState({ showModal: false });
}
open() {
this.setState({ showModal: true });
}
render() {
return (
<div>
<Button
bsStyle="primary"
bsSize="large"
onClick={this.open}
>
</Button>
<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title >Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Text in a modal</h4>
</Modal.Body>
<Modal.Footer>
<Button onClick={this.close}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
}
And last comments-list.js:
import React from 'react';
import { ListGroup, Alert } from 'react-bootstrap';
import { Comment } from './comment';
export const CommentsList = ({ comments }) => (
comments.length > 0 ? <ListGroup className="comments-list">
{comments.map((com) => (
<Comment key={ com._id } comment={ com } />
))}
</ListGroup> :
<Alert bsStyle="warning">No comments yet. Please add some!</Alert>
);
CommentsList.propTypes = {
comments: React.PropTypes.array,
};
I manage to get the Modal to show up and work but when I want to display data in it, I can't get it to work. What is the best way to combine both these into one?
Pass the data in props to the CommentsModal and render it as you would normally do.
I try to keep local state out of component when using redux if possible, so to answer your question on making it stateless, I would take the following steps:
Remove the button that opens the modal from the modal.js itself
Remove the actual modal from the modal.js, just put the modal content inside of there.
Change the open modal button to hook into an action creator that sets a prop to open the modal and passes it's content (also set one to close it)
So that looks something like this
<ListGroupItem key={ comment._id }>
<Row>
<Col xs={ 8 } sm={ 10 }>
<FormControl
type="text"
defaultValue={ comment.title }
/>
</Col>
<Col xs={ 4 } sm={ 2 }>
<Button
bsStyle="danger"
className="btn-block">
Remove Comment
</Button>
</Col>
</Row>
<!-- Here is where it changes, -->
<Button
bsStyle="primary"
bsSize="large"
onClick={this.props.openModal(comment)}
>
</Button>
<Modal show={this.props.commentModal} onHide={this.props.closeModal}>
<CommentsModal content={this.props.commentModal} />
</Modal>
Keep in mind, these naming conventions are just for examples sake : use whatever works best for you.
So what happens here is when you click that button you fire this.props.openModal (an action) which does something like this in the reducers -
case actions.OPEN_COMMENT_MODAL:
return state.set('commentModal', action.content);
the close buttons fire the onHide which is linked to the this.props.closeModal action which just does:
case actions.OPEN_COMMENT_MODAL:
return state.set('commentModal', undefined);
So what this allows you to do is have just 1 modal instance and you pass the current comment to it with that button click and open it. The show just checks the truthy value, so you set it back to undefined and it will hide itself.
Then I am passing the prop of content to the modal, so you can then use it inside the modal itself. Again, change the names to whatever works best for you.