Having Issue in React js video modal - javascript

I am trying to make a video play-able model when click on the video link but can't understand what to do. Tried my best but can't reach at solution. I have picked a logic from internet but didn't work. I have also commented out the section of modal.Thanks in Advance...
code ................................................................
import React,{useState, useEffect } from "react";
import './App.css';
import Axios from "axios";
import ModalVideo from 'react-modal-video';///
function App() {
const [isOpen, setOpen] = useState(false)///
const [resdata, setresdata] = useState([])
const showurl = 'http://localhost/react%20project/newapp/src/show.php?function=show';
const updtcomp = () => {
Axios.get(showurl)
.then(res =>{
setresdata(res.data)
console.log(res)
})
.catch(err => {
console.log(err)
})
}
useEffect(() => {
Axios.get(showurl)
.then(res =>{
setresdata(res.data)
console.log(res)
})
.catch(err => {
console.log(err)
})
}, [])
console.log(resdata)
return(
<div className="App"><br/>
<div className="tblfrm">
<table>
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Date</td>
<td>V-Links</td>
<td>Action</td>
</tr>
</thead>
<tbody>
{ resdata.length > 0 && resdata.map( resdata => (
<tr>
<td key={resdata.Id}>{resdata.Id}</td>
<td key={resdata.Name}>{resdata.Name}</td>
<td key={resdata.date}>{resdata.date}</td>
{/* trying to make a video playable modal on click of the link */}
<td key={resdata.video}>
<a onClick={()=> setOpen(true)} href={resdata.video}>
{resdata.video} </a>
<ModalVideo isOpen={isOpen} onClose={()=> setOpen(false)}/>
</td>
<td>
<button>EDIT</button>
<button>DELETE</button>
</td>
</tr>
) ) }
</tbody>
</table>
</div>
</div>
)
}
export default App;


I make it different by using button because it was complicated for me to do..
<button onClick={()=>setModalIsOpen(true)}> VIEW </button>
<Modal isOpen={modalIsOpen}>
<ReactPlayer controls
width="90%"
height="calc(90vh - 90px)"
url={resdata.video}
/>
</Modal>

Related

when i create table with data from api the rows are duplicated?

import React from 'react'
import './user.css'
const User = ({ id, email, name, onDelete }) => {
const handleDelete = () => {
onDelete(id);
}
return (
<table className='table'>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>edit</th>
<th>delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>{name}</td>
<td>{email}</td>
<td>
<button>edit</button>
<button onClick={handleDelete}>delete</button>
</td>
</tr>
</tbody>
</table>
)
}
export default User

You're creating a new table for every user. That's why your headers are duplicated. You only need a new row for every user instead of an entire table for each user.
I'd separate the UserTable and the UserRow.
// UserTable.jsx
import React from 'react'
import './user.css'
import './UserRow'
const UserTable = ({ users, onDelete }) => {
return (
<table className='table'>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>edit</th>
<th>delete</th>
</tr>
</thead>
<tbody>
{users.map(user => {
<UserRow key={user.id} userId={user.id} userName={user.name} email {user.email} onDelete={onDelete} />onDelete={onDelete} />
})
}
</tbody>
</table>
)
}
export default UserTable
// UserRow.jsx
import React from 'react'
import './user.css'
const UserRow = ({ userId, email, userName, onDelete }) => {
const handleDelete = () => {
onDelete(userId);
}
return (
<tr>
<td>{userName}</td>
<td>{email}</td>
<td>
<button>edit</button>
<button onClick={handleDelete}>delete</button>
</td>
</tr>
)
}
export default UserRow

Create a link to a user ID in a table

I have a simple table and I want to navigate to the user.id but it throws off the formatting. Is there another way to do this or do I move LinkToUser?
I have removed all styling so there is nothing conflicting.
import styled from 'styled-components'
import { Link } from 'react-router-dom'
export const LinkToUser = styled(Link)`
`
export const StyledTable = styled.table`
`;
export const THead = styled.thead`
`;
export const TR = styled.tr`
`;
export const TBody = styled.tbody`
`;
export const TH = styled.th`
`;
export const TD = styled.td`
`;
<StyledTable>
<THead>
<TR>
<TH>{copy.tableHeaderA}</TH>
<TH>{copy.tableHeaderB}</TH>
<TH>{copy.tableHeaderC}</TH>
</TR>
</THead>
<TBody>
{fetchedUsersData?.map((user: Users) => (
<LinkToUser to={`/users/${user.id}`}>
<TR key={user.id}>
<TD>
<p>{user.username}</p>
</TD>
<TD>
<p>{user.name}</p>
</TD>
<TD>
<p>{user.company.name}</p>
</TD>
</TR>
</LinkToUser>
))}
</TBody>
</StyledTable >

Use onClick and history if you are using react-router-dom
<StyledTable>
<THead>
<TR>
<TH>{copy.tableHeaderA}</TH>
<TH>{copy.tableHeaderB}</TH>
<TH>{copy.tableHeaderC}</TH>
</TR>
</THead>
<TBody>
{fetchedUsersData?.map((user: Users) => (
<TR key={user.id}
onClick={()=>{
history.push(`/users/${user.id}`)
}
>
<TD>
<p>{user.username}</p>
</TD>
<TD>
<p>{user.name}</p>
</TD>
<TD>
<p>{user.company.name}</p>
</TD>
</TR>
))}
</TBody>
</StyledTable >

You have to move key to the parent component inside map function like this,
from:
{fetchedUsersData?.map((user: Users) => (
<LinkToUser to={`/users/${user.id}`}>
<TR key={user.id}>
to:
{fetchedUsersData?.map((user: Users) => (
<LinkToUser to={`/users/${user.id}`} key={user.id}>
<TR >
Also make sure this table is inside router parent tree.
Another problem might be to not be able to have Link as direct child of TableBody, in that case i suggest to move your link inside one of the TD elements

How can I reduce the quantity with delivery button with react js?

As you can see in the react code, I am trying to reduce the quantity, but I struggle to do it in react. what I want is if click button then quantity should be reduced 1 by 1.
I don't understand what should I do here.
const ManageInventory = () => {
const [products, setProducts] = useProducts();
const handleDelevery = id => {
const handleDelivery = event => { event.preventDefault();
const deliveryInventoryItem = inventoryItem.quantity(quantity-1);
}
const handleDelete = id => {
const proceed = window.confirm('Are Your Sure?');
if(proceed){
const url =`http://localhost:5000/product/${id}`;
fetch(url, {
method: 'DELETE'
})
.then(res => res.json())
.then(data => {
console.log(data);
const remaining = products.filter(product => product._id !==id);
setProducts(remaining);
})
}
}
return (
<div className=''>
<h2 className='product-title'>All Products {products.length} </h2>
<div>
</div>
<div>
<Table striped bordered hover variant="dark">
<thead>
<tr>
<th>Image</th>
<th>Prodct Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Supplier</th>
<th colSpan={2}>Edit</th>
</tr>
</thead>
<tbody>
{
products.map(product => <tr
key={product._id}
product={product}>
<td><img src={product.img} alt="" /> </td>
<td>{product.name}</td>
<td> {product.price}</td>
<td>{product.quantity}</td>
<td>{product.supplier}</td>
<td><button className='manage-btn' onClick={()=> handleDelete(product._id)}>Delete</button></td>
<td><button className='manage-btn' onClick={()=> handleDelevery()}>Delivered</button></td>
</tr>
)
}
</tbody>
</Table>
</div>
<button className='add-product-link'><Link to='/addproduct'>Add Product</Link></button>
</div>
);
};

Infinite scroll render in ReactJS with React-List using table takes too long

I want to render large lists of data inside a table. I am using the React-List library found online, but when the user scrolls about 200 items, the rest of them take too much time to load.
I achieved something like this:
After about 200 items, I get these warnings in the console, and the list starts to render slower and slower like in the image below:
I use React-List for rendering this table and a get request to get all the data once, code will be shown below.
import React from 'react';
import axios from 'axios';
import { toastr } from '../../../components/toastr/toastr.component';
import { Table } from 'react-bootstrap';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faTrashAlt } from '#fortawesome/free-solid-svg-icons';
import DaysJS from 'react-dayjs';
import Loading from '../../../components/loading/loading.component';
import Tooltip from '../../../components/tooltip/tooltip.component';
import ReactList from 'react-list';
import './error.styles.scss';
class ErrorPage extends React.Component {
constructor() {
super();
this.state = {
pending: true,
errors: []
}
};
componentDidMount() {
axios.get('/api/logError').then(resp => {
this.setState({ pending: false, errors: resp.data });
}).catch(() => toastr('error', 'Eroare la preluarea datelor!'));
};
renderItem = (index, key) => {
return (
<tr key={key}>
<td>
{this.state.errors[index].id}
</td>
</tr>
)
};
renderTable (items, ref) {
return (
<div style={{maxHeight: '400px', overflowY: 'scroll'}}>
<Table bordered striped hover size="sm">
<tbody ref={ref}>
{items}
</tbody>
</Table>
</div>
);
}
renderRow = (index, key) => {
const entry = this.state.errors[index]
return (
<tr key={key}>
<td width='40px' className='text-center'>{index}</td>
<td width='40px' className='text-center'>{entry.id_user}</td>
<td width='200px'>{entry.email}</td>
<td width='200px'>{entry.name}</td>
<td width='200px'>{entry.action}</td>
<td>{entry.error}</td>
<td width='120px' className='text-center'><DaysJS format='DD.MM.YYYY - HH:MM'>{entry.createdAt}</DaysJS></td>
<td width='30px' className='cursor-pointer text-center' data-tip data-for='tooltip'>
<Tooltip id='tooltip' message='Șterge eroare'/>
<FontAwesomeIcon className='text-danger' icon={faTrashAlt} />
</td>
</tr>
);
}
render() {
const { pending, errors } = this.state;
return (
<div className='error-page mt-3 row'>
<Loading pending={pending} />
<div className='col-sm-4 fw-bold'>Total erori: {errors.length}</div>
<div className='col-sm-4'>
<h4 className='text-center'>Erori</h4>
</div>
<div className='col-sm-4 text-end'>
<button className='btn btn-danger btn-sm'>
<FontAwesomeIcon icon={faTrashAlt} className='me-1' />
Șterge toate
</button>
</div>
<div className='col-sm-12'>
<Table bordered size="sm">
<thead>
<tr>
<th width='40px'>Id user</th>
<th width='200px'>Email</th>
<th width='200px'>Unitate</th>
<th width='200px'>Acțiune</th>
<th>Eroare</th>
<th width='120px'>Data</th>
<th width='38px'></th>
</tr>
</thead>
</Table>
<ReactList
itemsRenderer={(items, ref) => this.renderTable(items, ref)}
itemRenderer={this.renderRow}
length={errors.length}
/>
</div>
</div>
);
};
};
export default ErrorPage;
I used in AngularJS a library called ng-infinite-scroll that rendered the items with no problem with infinite scroll and I tried to find something similar for ReactJS.

if ternario does not work, function has value but never used says

I am new with programing and I want to use if ternario, but it doesn't work. I have two functions and I create a third function to show one of them or the other. It is an application in ReactJS. Below is the code:
import { Table } from "react-bootstrap";
import { Link } from "react-router-dom";
import { useCartContext } from "../../Context/CartContext";
const emptyCart = () => {
return(
<>
<div>
<h3>The Cart is empty</h3>
<p>
Return to home to see our products
</p>
<Link to='/' ><button className="btn btn-info"> Home </button></Link>
</div>
</>
);
};
const CartFunction = () => {
const { list, totalPrice } = useCartContext();
return (
<Table striped hover>
<thead>
<tr>
<th>Product</th>
<th>Title</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{list.map((varietal) => (
<tr key={varietal.id}>
<td>
<img
src={varietal.pictureUrl}
alt='img'
style={{ width: "82px" }}
/>
</td>
<td>{varietal.title}</td>
<td>{varietal.count}</td>
<td>${varietal.price}</td>
</tr>
))}
</tbody>
<thead>
<tr>
<td colSpan="3">Total</td>
<td>${totalPrice()}</td>
</tr>
</thead>
</Table>
);
};
const CartComponent = () => {
const { list } = useCartContext();
return (
<>
{list.length !== 0 ? <CartFunction /> : <emptyCart />}
</>
);
};
export default CartComponent;
Visual Code it says that emptyCard has a value but it is never used. If there is someone that could help me I would appreciate it. Cheers

Categories

Resources