I am having an issue with my application's state tracking. I have an edit form, and when I click on a ticket to set it as the selected ticket, I pass the selected ticket down to the edit form. However, I think I have an issue with the way my state is being tracked.
I believe the exact issue is here:
function handleClick(ticket) {
setSelectedTicket(ticket);
}
If I edit a ticket then click on any other tickets, the updated info then gets passed to all the other tickets.
import React, { useEffect, useState } from "react";
import styled from "styled-components";
import TicketDetails from "./TicketDetails";
const Container = styled.div`
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.8);
border-radius: 0.25em;
box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25);
box-sizing: border-box;
left: 50%;
width: 50vw;
height: 50vh;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem;
`;
const Gradient = styled.div`
background: black;
height: 2px;
margin: 1rem;
width: 96%;
`;
const H2 = styled.h2`
margin: 1rem;
padding: 0;
text-align: center;
width: 100%;
`;
const TicketContainer = styled.div`
display: flex;
flex-direction: row;
`;
const TicketList = styled.div`
display: flex;
margin-left: 1rem;
flex-direction: column;
height: 38vh;
overflow-y: auto;
width: 50%;
`;
const Ticket = styled.div`
margin-right: 2rem;
font-size: 1.3rem;
cursor: pointer;
`;
const DetailsContainer = styled.div`
align-items: center;
text-align: center;
margin: 5px auto auto auto;
width: 300px;
`;
const MyTickets = ({ user }) => {
const [tickets, setTickets] = useState([]);
const [selectedTicket, setSelectedTicket] = useState(null);
useEffect(() => {
fetch(`/users/${user.id}`)
.then((r) => r.json())
.then((data) => {
if (data.tickets.length > 25) {
setTickets(data.tickets.slice(0, 25));
} else {
setTickets(data.tickets);
}
});
}, []);
function refreshTickets() {
fetch(`/users/${user.id}`)
.then((r) => r.json())
.then((data) => {
if (data.tickets.length > 25) {
setTickets(data.tickets.slice(0, 25));
} else {
setTickets(data.tickets);
}
});
}
function limitChars(string) {
if (string.length > 18) {
return string.slice(0, 18) + "...";
}
return string;
}
function handleClick(ticket) {
setSelectedTicket(ticket);
}
return (
<>
<div className="bg"></div>
<div className="bg bg2"></div>
<div className="bg bg3"></div>
<Container>
<H2>{user.username}'s tickets</H2>
<Gradient></Gradient>
<TicketContainer>
<TicketList>
{tickets.map((ticket, index) => {
return (
<Ticket key={index} onClick={() => handleClick(ticket)}>
{index + 1}: {limitChars(ticket.title)}
</Ticket>
);
})}
</TicketList>
<DetailsContainer>
{selectedTicket ? (
<TicketDetails
ticket={selectedTicket}
refreshTickets={refreshTickets}
/>
) : (
<div>Select a ticket</div>
)}
</DetailsContainer>
</TicketContainer>
</Container>
</>
);
};
export default MyTickets;
Below is how I update the ticket:
import React, { useState } from "react";
import styled from "styled-components";
const Container = styled.div`
user-select: none;
border-radius: 2px;
border: 2px solid transparent;
box-shadow: none;
box-sizing: border-box;
padding: 8px;
margin-bottom: 8px;
`;
const Title = styled.div`
font-size: 1.5rem;
overflow-wrap: break-word;
margin: 0.5rem;
`;
const Gradient = styled.div`
background: black;
height: 2px;
margin: 0.5rem;
`;
const Description = styled.div`
font-size: 1rem;
overflow-wrap: break-word;
word-break: break-all;
margin: 0.5rem;
`;
const ContentContainer = styled.div`
-webkit-box-flex: 1;
flex-grow: 1;
flex-basis: 100%;
display: flex;
flex-direction: column;
align-items: center;
`;
const Input = styled.input`
height: 2rem;
width: 100%;
text-align: center;
`;
const TextArea = styled.textarea`
height: 100px;
width: 98%;
padding: 1%;
border: none;
resize: none;
`;
const ButtonContainer = styled.div`
flex-direction: row;
`;
const EditButton = styled.button`
width: 5rem;
`;
const categories = [
"URGENT",
"Meetings",
"To Do",
"In Progress",
"Needs Review",
];
const Category = styled.div`
margin: 0.5rem;
`;
const TicketDetails = ({ ticket, refreshTickets }) => {
const [edit, setEdit] = useState(false);
const [title, setTitle] = useState(ticket.title);
const [initialTitle, setInitialTitle] = useState(ticket.title);
const [description, setDescription] = useState(ticket.description);
const [descriptionInit, setDescriptionInit] = useState(ticket.description);
const handleSubmit = (e) => {
e.preventDefault();
fetch(`/tickets/${ticket.id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ title: title, description: description }),
})
.then((r) => r.json())
.then((d) => {
console.log("updated ticket", d);
setTitle(d.title);
setDescription(d.description);
refreshTickets();
});
setEdit(false);
};
const handleReset = (e) => {
setTitle(initialTitle);
setDescription(descriptionInit);
};
const handleCancel = (e) => {
setTitle(initialTitle);
setDescription(descriptionInit);
setEdit(false);
};
return (
<>
<Category>{categories[ticket.category_id - 1]}</Category>
<Gradient></Gradient>
{edit ? (
<Container
style={{
backgroundColor: "#B1D4E0",
}}
>
<form onSubmit={handleSubmit} onReset={handleReset}>
<Input
type="text"
id="title"
autoComplete="off"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<Gradient></Gradient>
<TextArea
type="text"
id="description"
autoComplete="off"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
<button onClick={handleCancel}>Cancel</button>
</form>
</Container>
) : (
<Container
style={{
backgroundColor: "#B1D4E0",
}}
>
<Title>{ticket.title}</Title>
<Gradient></Gradient>
<ContentContainer>
<Description>{ticket.description}</Description>
</ContentContainer>
<ButtonContainer>
<EditButton onClick={() => setEdit(true)}>Edit</EditButton>
</ButtonContainer>
</Container>
)}
</>
);
};
export default TicketDetails;
I think that the info updated is kept because the component is always mount, you change the ticket value in props but this does not re-initialize your state in TicketDetails. To update the values when other ticket is selected add a useEffect like this:
const TicketDetails = ({ ticket, refreshTickets }) => {
//...
useEffect(() => {
setTitle(ticket.title);
setInitialTitle(ticket.title);
setDescription(ticket.description);
setDescriptionInit(ticket.description);
}, [ticket]);
Related
I hope you all are doing well. I was following this fireship io tutorial in building a chat app in react. I updated how I got the data with hooks instead of how it was done in the video.
The issue is, I have it working where I can send and receive messages, but I can't apply the appropriate CSS style depending on which user sent a message. The odd part is, I'm able to console log the text and the uid as props.
The focus is on const ChatMessage where, depending on the uid of the current user, it will change the CSS styling to mimic that of imessage. Here's an example.
Final Product
I have it set up where I run npm from vs code and I access the app from two of my google accounts. One from firefox, the other from chrome.
I'm really trying to get a hang of firebase react with hooks, anything helps.
Cheers,
Tutorial Source Code: https://github.com/fireship-io/react-firebase-chat
App.js
import "./App.css";
import "firebase/firestore";
import "firebase/auth";
import { useAuthState } from "react-firebase-hooks/auth";
import { db } from "./firebase";
import {
collection,
onSnapshot,
addDoc,
serverTimestamp,
query,
orderBy,
limit,
} from "firebase/firestore";
import { useEffect, useState, useRef } from "react";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
const provider = new GoogleAuthProvider();
const auth = getAuth();
const userID = "";
function App() {
const [user] = useAuthState(auth);
return (
<div className="App">
<header>
<h1>SUp# Ch#tZ🫡</h1>
<SignOut />
</header>
<section>{user ? <ChatRoom /> : <SignIn />}</section>
</div>
);
}
const ChatRoom = () => {
const [messages, setMessages] = useState([]);
const [formValue, setFormValue] = useState("");
const messagesRef = collection(db, "messages");
const recentMessage = useRef();
const queryAtts = query(messagesRef, orderBy("createdAt"), limit(25));
//Send Messages
const sendMessage = async (e) => {
e.preventDefault();
const { uid, photoURL } = auth.currentUser;
await addDoc(collection(db, "messages"), {
text: formValue,
createdAt: serverTimestamp(),
uid,
photoURL,
});
setFormValue("");
recentMessage.current.scrollIntoView({ behavior: "smooth" });
};
//Get Messages from Firestore
useEffect(() => {
//console.log(messagesRef);
onSnapshot(queryAtts, (snapshot) => {
setMessages(
snapshot.docs.map((doc) => {
return { id: doc.id, viewing: false, ...doc.data() };
})
);
});
}, []);
return (
<>
<main>
{messages &&
messages.map((msg, i) => (
<>
{console.log("Pre-Chat Msg uid: ", msg.uid)}
<ChatMessage
msg={msg.text}
uid={msg.uid}
photoURL={auth.currentUser.photoURL}
/>
</>
))}
<div ref={recentMessage}></div>
</main>
<form onSubmit={sendMessage}>
<input
value={formValue}
onChange={(e) => setFormValue(e.target.value)}
/>
<button type="submit" disabled={!formValue}>
😶🌫️
</button>
</form>
</>
);
};
const ChatMessage = (props) => {
//console.log("uid in chat msg: ", props.uid);
console.log("chat message photo: ", props.photoURL);
const messageClass = props.uid === auth.currentUser ? "sent" : "recieved";
console.log("useAuthStateHook uid: ", props.uid);
return (
<div className={`message ${messageClass}`}>
<img
src={
props.photoURL || "https://xsgames.co/randomusers/avatar.php?g=pixel"
}
alt={"broken lol"}
/>
<p key={props.uid}>{props.msg}</p>
</div>
);
};
const SignIn = () => {
const useSignInWithGoogle = () => {
signInWithPopup(auth, provider);
};
return (
<>
<button onClick={useSignInWithGoogle}>SignIn W/ Google</button>
<p>
Do not violate the community guidelines or you will be banned for life!
</p>
</>
);
};
const SignOut = () => {
return (
auth.currentUser && (
<button className="sign-out" onClick={() => auth.signOut()}>
Sign Out
</button>
)
);
};
export default App;
App.css
body {
background-color: #282c34;
}
.App {
text-align: center;
max-width: 728px;
margin: 0 auto;
}
.App header {
background-color: #181717;
height: 10vh;
min-height: 50px;
color: white;
position: fixed;
width: 100%;
max-width: 728px;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 99;
padding: 10px;
box-sizing: border-box;
}
.App section {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
background-color: rgb(40, 37, 53);
}
main {
padding: 10px;
height: 80vh;
margin: 10vh 0 10vh;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
main::-webkit-scrollbar {
width: 0.25rem;
}
main::-webkit-scrollbar-track {
background: #1e1e24;
}
main::-webkit-scrollbar-thumb {
background: #6649b8;
}
form {
height: 10vh;
position: fixed;
bottom: 0;
background-color: rgb(24, 23, 23);
width: 100%;
max-width: 728px;
display: flex;
font-size: 1.5rem;
}
form button {
width: 20%;
background-color: rgb(56, 56, 143);
}
input {
line-height: 1.5;
width: 100%;
font-size: 1.5rem;
background: rgb(58, 58, 58);
color: white;
outline: none;
border: none;
padding: 0 10px;
}
button {
background-color: #282c34; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
font-size: 1.25rem;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.sign-in {
color: #282c34;
background: white;
max-width: 400px;
margin: 0 auto;
}
ul, li {
text-align: left;
list-style: none;
}
p {
max-width: 500px;
margin-bottom: 12px;
line-height: 24px;
padding: 10px 20px;
border-radius: 25px;
position: relative;
color: white;
text-align: center;
}
.message {
display: flex;
align-items: center;
}
.sent {
flex-direction: row-reverse;
}
.sent p {
color: white;
background: #0b93f6;
align-self: flex-end;
}
.received p {
background: #e5e5ea;
color: black;
}
img {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 2px 5px;
}
I've tried maneuvering where the auth.currentUser was called. I also reformatted my functions from the function to const format, but I don't believe that makes much of a difference.
It seems that in your ChatMessage component, the messageClass will get a value based on if props.uid equals to uid of the current user.
If this is the goal, you can set it like:
const messageClass = props.uid === auth.currentUser?.uid ? "sent" : "recieved";
Instead of:
const messageClass = props.uid === auth.currentUser ? "sent" : "recieved";
Because auth.currentUser is the object that has some user data properties such as uid.
I am creating an application with a part that uploads a file to firebase in javascript I have used this before in applications fine but I am getting an error. This error only occurs when I set the firebase so I know there is probably something in it but I cant tell where or what it is.
import React, {Fragment, useState} from "react";
import styled from "styled-components";
import * as s from "../styles/globalStyles"
import MainBar from "../components/MainBar";
import StatBar from "../components/StatBar";
import {storage} from "../firebase/firebase";
const Screen = styled.div`
background-size: cover;
background-position: center;
width: 100vw;
min-height: 100vh;
display: flex;
background: linear-gradient(90deg, #0F0C29 0%, #302B63 50%, #24243E 100%);
`;
const Header = styled.h3`
color: white;
font-family: 'KoHo', sans-serif;
font-size: x-large;
margin-left: auto;
margin-right: auto;
`;
const SubText = styled.h5`
color: white;
font-family: 'KoHo', sans-serif;
font-size: x-large;
margin-left: auto;
margin-right: auto;
`;
const SubsetText = styled.p`
color: white;
font-family: 'KoHo', sans-serif;
margin-left: auto;
margin-right: auto;
`;
const Title = styled.h1`
color: white;
font-family: 'KoHo', sans-serif;
margin-left: auto;
margin-right: auto;
font-weight: 500;
`;
const UploadHolder = styled.div`
display: flex;
flex-direction: column;
align-content: center;
justify-content: space-center;
width: 50%;
height: 60%;
margin: auto;
`;
const RowHolder = styled.div`
display: flex;
flex-direction: row;
align-content: center;
justify-content: space-evenly;
`;
const FileInput = styled.input`
width: 30%;
height: 60%;
border: 1px solid black;
`;
const TextInput = styled.input`
width: 100%;
height: 15%;
background: linear-gradient(90deg, rgba(83, 105, 118, 0.1) 0%, rgba(41, 46, 73, 0.1) 100%);
border: 1px solid white;
border-radius: 10px;
color: white;
`;
const Label = styled.h2`
font-family: 'KoHo';
font-style: italic;
font-weight: 300;
line-height: 52px;
color: white;
`;
const ColumnHolder = styled.div`
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
`;
const Genre = styled.select`
width: 40%;
height: 20%;
background: linear-gradient(90deg, rgba(83, 105, 118, 0.1) 0%, rgba(41, 46, 73, 0.1) 100%);
border: 1px solid white;
border-radius: 10px;
color: black;
&:active {
color: white;
}
option {
color: black;
background: white;
display: flex;
white-space: pre;
min-height: 20px;
padding: 0px 2px 1px;
}
`;
const UploadButton = styled.button`
width: fit-content;
height: fit-content;
padding: 10px;
background: linear-gradient(90deg, #536976 0%, #292E49 100%);
border-radius: 10px;
margin: auto;
border: 1px solid white;
color: white;
`;
const UploadFile = () => {
//State variables
const [selectedArtFile, setSelectedArtFile] = useState();
const [selectedAudioFile, setSelectedAudioFile] = useState()
const [isFilePicked, setIsFilePicked] = useState(false);
const [isArtSelected, setIsArtSelected] = useState();
const [isSongSelected, setIsSongSelected] = useState();
const [genre, setGenre] = useState();
const allInputs = {imgUrl: ''}
const [imageAsUrl, setImageAsUrl] = useState(allInputs)
const [progressBar, setProgress] = useState()
const artChangeHandler = (event) => {
setSelectedArtFile(event.target.files[0]);
setIsArtSelected(true);
};
const audioChangeHandler = (event) => {
setSelectedAudioFile(event.target.files[0]);
setIsSongSelected(true);
};
const handleSubmission = () => {
};
const handleFireBaseUpload = e => {
e.preventDefault()
console.log('start of upload')
// async magic goes here...
if(selectedAudioFile === '') {
console.error(`not an image, the image file is a ${typeof(selectedFile)}`)
}
const uploadTask = storage.ref(`/audio/${selectedAudioFile.name}`).put(selectedAudioFile)
//initiates the firebase side uploading
uploadTask.on('state_changed',
(snapShot) => {
//takes a snap shot of the process as it is happening
console.log(snapShot)
var progress = (snapShot.bytesTransferred / snapShot.totalBytes) * 100;
setProgress(progress)
}, (err) => {
//catches the errors
console.log(err)
}, () => {
// gets the functions from storage refences the image storage in firebase by the children
// gets the download url then sets the image from firebase as the value for the imgUrl key:
storage.ref('audio').child(selectedAudioFile.name).getDownloadURL()
.then(fireBaseUrl => {
setImageAsUrl(prevObject => ({...prevObject, imgUrl: fireBaseUrl}))
})
})
}
return(
<Fragment>
<MainBar/>
<StatBar/>
<Screen>
<UploadHolder>
<RowHolder>
<Header>Artwork</Header>
<Header>Audio File</Header>
</RowHolder>
<RowHolder>
<FileInput type={"file"} name={"ArtWork"} onChange={artChangeHandler}>
</FileInput>
<FileInput type={"file"} name={"Song"} onChange={audioChangeHandler}>
</FileInput>
</RowHolder>
<RowHolder>
{isArtSelected ? (
<div>
<p>Filename: {selectedArtFile.name}</p>
<p>Filetype: {selectedArtFile.type}</p>
<p>Size in bytes: {selectedArtFile.size}</p>
<p>
lastModifiedDate:{' '}
{selectedArtFile.lastModifiedDate.toLocaleDateString()}
</p>
</div>
) : (
null
)}
{isSongSelected ? (
<div>
<p>Filename: {selectedAudioFile.name}</p>
<p>Filetype: {selectedAudioFile.type}</p>
<p>Size in bytes: {selectedAudioFile.size}</p>
<p>
lastModifiedDate:{' '}
{selectedAudioFile.lastModifiedDate.toLocaleDateString()}
</p>
</div>
) : (
null
)}
</RowHolder>
<ColumnHolder>
<Label>Song Name</Label>
<TextInput type="text"></TextInput>
</ColumnHolder>
<ColumnHolder>
<Label>Artist Name</Label>
<TextInput type="text"></TextInput>
</ColumnHolder>
<ColumnHolder>
<Label>Amount To Market</Label>
<TextInput type="number"></TextInput>
</ColumnHolder>
<ColumnHolder>
<Label >Genre</Label>
<Genre id="genres" name="genres" onChange={(event) => setGenre(event.target.value)} >
//There is a lot more options like a lot more but just over SO's limit
<option value="Blues / Chicago Blues">
</option>
</Genre>
</ColumnHolder>
<UploadButton>Upload</UploadButton>
</UploadHolder>
</Screen>
</Fragment>
)
}
export default UploadFile;
I have not even been able to try the upload as soon as I enter this code and set the values to the inputs and all of the state variables in place it returns the maximum call stack size exceeded, there truly isn't much in this whole code yet I am just beginnning so I know its not truly a maximum size limit issue.
Can someone help me to display specific song while clicking on that in Your Playlist container on the left??
I am trying to list data on the left in Your Playlist container When I click on one of the music it should show it in Your Playlist container. It has to save it to browser history as well and it has to remove it from Search because it is already gonna be in Your Playlist container. I will deploy it later to Firebase but now I need help.
It should be added to the left while clicking on one of the listed songs after a search.
Please support me on that.
I am adding my codes here as well for my project:
I have App.js
import "./App.css";
import MySongs from "./MySongs.js";
import Search from "./Search.jsx";
function App() {
return (
<div className="App">
<div className="body">
<MySongs />
<Search />
</div>
</div>
);
}
export default App;
.App {
background-color: #303030;
width: 100%;
height: 100vh;
}
.body {
display: flex;
}
I have Search.jsx
import React, { useState, useEffect, useRef } from "react";
import "./Search.css";
import styled from 'styled-components';
import { IoSearch,IoClose } from "react-icons/io5";
import {motion, AnimatePresence} from "framer-motion";
import {useClickOutside} from "react-click-outside-hook";
import MoonLoader from 'react-spinners/MoonLoader';
import { useDebounce } from "./hooks/debounceHook";
import axios from "axios";
import { TvShow } from "./tvShow";
const SearchBarContainer = styled(motion.div)`
margin-left: 10px;
margin-top: 20px;
display: flex;
flex-direction: column;
width: 96%;
height: 2.5em;
background-color: #424242;
border-radius: 3px;
`;
const SearchInputContainer = styled.div`
width: 98%;
min-height: 2.5em;
display: flex;
align-items: center;
position: relative;
padding: 2px 15px;
`;
const SearchInput = styled.input`
width: 100%;
height: 100%;
outline: none;
border: none;
font-size: 15px;
color: white;
font-weight: 300;
border-radius: 6px;
background-color: transparent;
&:focus {
outline: none;
&::placeholder {
opacity: 0;
}
}
&::placeholder {
color: #white;
transition: all 250ms ease-in-out;
}
`;
const SearchIcon = styled.span`
color: #bebebe;
font-size: 14px;
margin-right: 10px;
margin-top: 6px;
vertical-align: middle;
`;
const CloseIcon = styled(motion.span)`
color: #bebebe;
font-size: 15px;
vertical-align: middle;
transition: all 200ms ease-in-out;
cursor: pointer;
&:hover {
color: #dfdfdf;
}
`;
const LineSeperator = styled.span`
display: flex;
min-width: 100%;
min-height: 2px;
background-color: #d8d8d878;
`;
const SearchContent = styled.div`
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 1em;
overflow-y: auto;
`;
const LoadingWrapper = styled.div`
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
`;
const WarningMessage = styled.span`
color: #a1a1a1;
font-size: 14px;
display: flex;
align-self: center;
justify-self: center;
`;
const containerVariants = {
expanded: {
height: "26em",
},
collapsed: {
height: "2.5em",
},
};
const containerTransition = { type: "spring", damping: 22, stiffness: 150 };
export function SearchBar(props) {
const [isExpanded, setExpanded] = useState(false);
const [parentRef, isClickedOutside] = useClickOutside();
const inputRef = useRef();
const [searchQuery, setSearchQuery] = useState("");
const [isLoading, setLoading] = useState(false);
const [tvShows, setTvShows] = useState([]);
const [noTvShows, setNoTvShows] = useState(false);
const isEmpty = !tvShows || tvShows.length === 0;
const changeHandler = (e) => {
e.preventDefault();
if (e.target.value.trim() === "") setNoTvShows(false);
setSearchQuery(e.target.value);
};
const expandContainer = () => {
setExpanded(true);
};
const collapseContainer = () => {
setExpanded(false);
setSearchQuery("");
setLoading(false);
setNoTvShows(false);
setTvShows([]);
if (inputRef.current) inputRef.current.value = "";
};
useEffect(() => {
if (isClickedOutside) collapseContainer();
}, [isClickedOutside]);
const searchTvShow = async () => {
if (!searchQuery || searchQuery.trim() === "") return;
setLoading(true);
setNoTvShows(false);
const options = {
method: 'GET',
url: 'https://deezerdevs-deezer.p.rapidapi.com/search',
params: {q: searchQuery},
headers: {
'x-rapidapi-host': 'deezerdevs-deezer.p.rapidapi.com',
'x-rapidapi-key': '6a99d5e101msh1e9f2b2f948746fp1ae1f3jsn6b458fe8b4e4'
}
};
axios.request(options).then(function (response) {
if (response) {
if (response.data && response.data.length === 0) setNoTvShows(true);
setTvShows(response.data.data);
}
}).catch(function (error) {
console.error(error);
});
setLoading(false);
};
useDebounce(searchQuery, 500, searchTvShow);
// console.log(tvShows);
return (
<div className="my__search">
<SearchBarContainer
animate={isExpanded ? "expanded" : "collapsed"}
variants={containerVariants}
transition={containerTransition}
ref={parentRef}
>
<SearchInputContainer>
<SearchIcon>
<IoSearch />
</SearchIcon>
<SearchInput
placeholder="Search for Series/Shows"
onFocus={expandContainer}
ref={inputRef}
value={searchQuery}
onChange={changeHandler}
/>
<AnimatePresence>
{isExpanded && (
<CloseIcon
key="close-icon"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={collapseContainer}
transition={{ duration: 0.2 }}
>
<IoClose />
</CloseIcon>
)}
</AnimatePresence>
</SearchInputContainer>
{isExpanded && <LineSeperator />}
{isExpanded && (
<SearchContent>
{isLoading && (
<LoadingWrapper>
<MoonLoader loading color="#000" size={20} />
</LoadingWrapper>
)}
{!isLoading && isEmpty && !noTvShows && (
<LoadingWrapper>
<WarningMessage>Start typing to Search</WarningMessage>
</LoadingWrapper>
)}
{!isLoading && noTvShows && (
<LoadingWrapper>
<WarningMessage>No Tv Shows or Series found!</WarningMessage>
</LoadingWrapper>
)}
{!isLoading && !isEmpty && (
<>
{tvShows.map((show) => (
<TvShow
key={show.id}
thumbnailSrc={show.album.cover_medium}
name={show.title_short}
artist={show.artist.name}
/>
))}
</>
)}
</SearchContent>
)}
</SearchBarContainer>
</div>
);
}
export default SearchBar;
.my__search {
margin-top: 20px;
flex: 0.6;
height: 450px;
border-radius: 5px;
border: 1px solid black;
margin-left: 80px;
background-color: #424242;
}
I have tvShow.jsx
import React, { useState } from "react";
import styled from "styled-components";
import {ImDownload} from "react-icons/im";
const TvShowContainer = styled.div`
width: 96%%;
min-height: 3em;
display: flex;
border-bottom: 2px solid #555555;
align-items: center;
`;
const Thumbnail = styled.div`
width: auto;
height: 80%;
display: flex;
flex: 0.4;
img {
border-radius: 20px;
width: auto;
height: 100%;
}
`;
const Name = styled.h3`
font-size: 12px;
color: white;
flex: 2;
display: flex;
flex-direction: column;
`;
const Artist = styled.span`
margin-top: 10px;
font-size: 8px;
color: white;
display: flex;
align-items: center;
`;
const Rating = styled.span`
color: #a1a1a1;
font-size: 16px;
display: flex;
flex: 0.2;
`;
export function TvShow(props) {
const { thumbnailSrc, name, artist,clickedMusic } = props;
const [wantedMusic, setWantedMusic] = useState("");
// const [clickedShow, setClickedShow] = useState("");
// function clickedContainer(e){
// const element = e.currentTarget();
// setClickedShow(element);
// console.log("I am clickedShow " +clickedShow);
// }
return (
<TvShowContainer onclick="location.href='#';" >
<Thumbnail>
<img src={thumbnailSrc} />
</Thumbnail>
<Name>{name}
<Artist>
{artist}
</Artist>
</Name>
</TvShowContainer>
);
}
I have mySongs.js
import React from "react";
import "./MySongs.css";
function MySongs() {
return (
<div className="my__songs">
<p>Your Playlist</p>
</div>
);
}
export default MySongs;
.my__songs {
margin-left: 10px;
margin-top: 20px;
flex: 0.3;
height: 300px;
height: 450px;
border: 1px solid black;
border-radius: 5px;
background-color: #424242;
}
.my__songs > p {
color: white;
opacity: 90%;
margin-left: 10px;
font-size: 13px;
}
Only partly answering the question: move an item from one list to another (and back) on mouse click.
The basic situation can be solved if you use the parent component to hold the state that the children components display. Then you only need to implement a function that toggles a "flag" (like selected), and the components can be rendered based on that flag.
const {useState} = React
const tracklist = [
{
id: 1,
title: 'Track 1',
selected: false,
},
{
id: 2,
title: 'Track 2',
selected: false,
},
{
id: 3,
title: 'Track 3',
selected: false,
},
{
id: 4,
title: 'Track 4',
selected: false,
},
{
id: 5,
title: 'Track 5',
selected: false,
},
]
const ListItem = ({ title, onToggleSelect }) => <div className="list-item" onClick={onToggleSelect}>{title}</div>
const App = ({ tracklist }) => {
const [tracks, setTracks] = useState(tracklist)
const toggleSelect = (id) => {
setTracks((prevState) => prevState.map(item => item.id === id ? {...item, selected: !item.selected} : item))
}
const listItem = (track) => <ListItem key={track.id} {...track} onToggleSelect={() => toggleSelect(track.id)}/>
return (
<div className="container" >
<div className="tracklist">
{
tracks
.filter(({ selected }) => selected)
.map(listItem)
}
</div>
<div className="tracklist">
{
tracks
.filter(({ selected }) => !selected)
.map(listItem)
}
</div>
</div>
)
}
ReactDOM.render(
<App tracklist={tracklist} />,
document.getElementById('root')
);
html, body {
margin: 0;
padding: 5px 10px;
}
.container {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 20px;
}
.list-item {
cursor: pointer;
}
.list-item:hover {
background: lightgray;
}
.tracklist {
border: 1px solid gray;
}
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<div id="root"></div>
// Custom Input component
const Container = styled.div``;
const InputBase = styled.div<{ width: string }>`
display: flex;
width: ${(props) => props.width};
height: 42px;
justify-content: space-between;
align-items: center;
padding: 9px 10px;
border-radius: 8px;
border: solid 2px ${color.gray[200]};
background-color: white;
&[data-focus="true"] {
border: solid 2px ${color.gray[300]};
}
&[data-disabled="true"] {
background-color: ${color.background.original};
}
`;
const InputArea = styled.input`
width: 100%;
border: 0;
background-color: inherit;
font-size: 15px;
font-weight: normal;
&:focus {
outline: none;
}
&:disabled {
color: ${color.gray[600]};
}
::placeholder {
color: ${color.gray[600]};
}
`;
const Label = styled.label`
color: ${color.gray[600]};
font-size: 15px;
font-weight: bold;
display: inline-block;
margin-bottom: 10px;
`;
const Input: ForwardRefRenderFunction<HTMLInputElement, Props> = (
{ formWidth = "100%", icon = null, labelText, onFocus, onBlur, ...props },
ref
) => {
const [isFocus, setIsFocus] = useState<boolean>(false);
const handelFocus = (e) => {
setIsFocus(true);
if (onFocus) onFocus(e);
};
const handleBlur = (e) => {
setIsFocus(false);
if (onBlur) onBlur(e);
};
return (
<Container>
{labelText && <Label htmlFor={props.id}>{labelText}</Label>}
<InputBase
data-focus={isFocus}
data-disabled={props.disabled}
width={formWidth}
>
<InputArea
ref={ref}
type="text"
{...props}
onFocus={handelFocus}
onBlur={handleBlur}
/>
{icon}
</InputBase>
</Container>
);
};
export default forwardRef(Input);
I'm making the component into a library and using it in another project.
The code below works normally when testing in the library.
describe("Input", () => {
it("test", async () => {
const handleBlur = jest.fn();
render(
<Input data-testid="input" onBlur={handleBlur} />
);
const input = screen.getByTestId("input") as HTMLInputElement;
fireEvent.change(input, { target: { value: "test" } });
fireEvent.blur(input);
expect(handleBlur).toHaveBeenCalledTimes(1);
});
});
However, in other projects that use that library, fireEvent.blur(input) does not work (toHaveBeenCalledTime is 0) and fireEvent.focusOut(input) does.
Is there something wrong with the library bundling process? Or is there something I'm missing?
I am using redux form for form related task. I am using react-dropzone for uploading files and redux form is used along with it. I could submit file to server but could not show that submitted file as initialValues for upload field.
here is how i have done
const Form = ({ item }) => {
return (
<>
<form onSubmit={handleSubmit(val => handleItemSubmit(val, mutation))}>
<Field name="photo" component={UploadField} />
</form>
</>
)
}
export default compose(
connect((state, props) => {
const { items } = props;
return {
initialValues: {
...items,
photo:
items && items.photoPath
? { name: items.photoName, size: 12345 }
: null,
languages:
items &&
items.languages &&
get(items, "languages", "")
.split(",")
.map(lang => ({
label: lang,
value: lang
}))
}
};
}),
reduxForm({
form: "item_form",
enableReinitialize: true,
fields: { ...requiredFields },
validate
})
)(Form);
import React from "react";
import styled from "styled-components";
import { useDropzone } from "react-dropzone";
export const UploadField = props => {
const {
input: { onChange },
disabled
} = props;
const { getRootProps, getInputProps } = useDropzone({
onDrop: files => onChange(files)
});
const files = props.input.value;
if (disabled) {
return null;
}
return (
<>
<DropzoneContainer {...getRootProps()}>
<input {...getInputProps()} />
Upload files here!
</DropzoneContainer>
<br />
<div>
{Object.keys(files).map((key, index) => {
console.log("FILES ---", files);
return (
<ThumbsContainer>
<p>{files[key].name}</p>
</ThumbsContainer>
);
})}
</div>
</>
);
};
export default UploadField;
const DropzoneContainer = styled.div`
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border-width: 2px;
border-radius: 2px;
border-color: ${props => getColor(props)};
border-style: dashed;
background-color: #fafafa;
color: #bdbdbd;
outline: none;
transition: border 0.24s ease-in-out;
`,
ThumbsContainer = styled.aside`
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 16px;
`,
Thumb = styled.div`
display: inline-flex;
border-radius: 2px;
border: solid 1px #eaeaea;
margin-bottom: 8px;
width: 100;
height: 100;
padding: 4px;
box-sizing: border-box;
`,
ThumbInner = styled.div`
display: flex;
min-width: 0;
overflow: hidden;
`,
Image = styled.img`
display: block;
max-width: 100%;
width: 180px;
height: 180px;
`;
const getColor = props => {
if (props.isDragAccept) {
return "#00e676";
}
if (props.isDragReject) {
return "#ff1744";
}
if (props.isDragActive) {
return "#2196f3";
}
return "#eeeeee";
};
I get these two fields when uploading
other gets pre filled but not to upload field in my case.