add task solution #2088

rvoshchylo · 2024-01-14T18:35:40Z

olya-shyian

Nicely done!👍

olya-shyian · 2024-01-16T11:54:57Z

src/components/NewMovie/NewMovie.tsx

+
+  const sumbitCheck = !(
+    title.trim() && imageUrl.trim() && imdbUrl.trim() && imdbId.trim()
+  );


are you sure this works correctly?

https://private-user-images.githubusercontent.com/33029864/296501640-684ffd37-f36c-46e2-b942-f6d3eb774682.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDU0MDYyNDQsIm5iZiI6MTcwNTQwNTk0NCwicGF0aCI6Ii8zMzAyOTg2NC8yOTY1MDE2NDAtNjg0ZmZkMzctZjM2Yy00NmUyLWI5NDItZjZkM2ViNzc0NjgyLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAxMTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMTE2VDExNTIyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU2YWM5ODEzZjYxZWQ1NWQ0ZTNjMjYwNmNmYTNmMzgyMTk4ZmIyYzE3ZjY3NDNkOGEzZjA3ZWQ4YjZlZTEyMzYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.twyfQfCemLjrvZyxqtjPkgiNqu6RlP2refCfBjJ5Buo

yes, forgot to redeploy

olya-shyian · 2024-01-16T11:56:56Z

src/components/NewMovie/NewMovie.tsx

+  const [description, setDescription] = useState('');
+  const [imageUrl, setImageUrl] = useState('');
+  const [imdbUrl, setImdbUrl] = useState('');
+  const [imdbId, setImdbId] = useState('');


instead of creating a lot of states, use just one

const defaultMovie = { title: '', description: '', imgUrl: '', imdbUrl: '', imdbId: '', }; const [count, setCount] = useState(0); const [newMovie, setNewMovie] = useState(defaultMovie);

olya-shyian · 2024-01-16T11:59:21Z

src/App.tsx

      </div>
      <div className="sidebar">
-        <NewMovie /* onAdd={(movie) => {}} */ />
+        <NewMovie onAdd={movie => setMovies([...movies, movie])} />


move this function into separate handler

DanilWeda

Good job! All good!
Check submit validation. Made it more readable.
Thanks!

DanilWeda · 2024-01-17T11:07:19Z

src/components/NewMovie/NewMovie.tsx

+        onChange={(newValue => setForm({
+          ...form,
+          imdbId: newValue,
+        }))}


you can write a handler for it ( not critical )

DanilWeda · 2024-01-17T11:07:27Z

src/components/NewMovie/NewMovie.tsx

+        onChange={(newValue => setForm({
+          ...form,
+          imdbUrl: newValue,
+        }))}


you can write a handler for it ( not critical )

DanilWeda · 2024-01-17T11:07:33Z

src/components/NewMovie/NewMovie.tsx

+        onChange={(newValue => setForm({
+          ...form,
+          imgUrl: newValue,
+        }))}


you can write a handler for it ( not critical )

DanilWeda · 2024-01-17T11:07:39Z

src/components/NewMovie/NewMovie.tsx

+        onChange={(newValue => setForm({
+          ...form,
+          description: newValue,
+        }))}


you can write a handler for it ( not critical )

DanilWeda · 2024-01-17T11:07:50Z

src/components/NewMovie/NewMovie.tsx

+        onChange={(newValue => setForm({
+          ...form,
+          title: newValue,
+        }))}


you can write a handler for it ( not critical )

DanilWeda · 2024-01-17T11:09:54Z

src/components/NewMovie/NewMovie.tsx

+type AddMovie = {
+  onAdd: (movie: Movie) => void
+};


you can move it in another file ( not critical )

DanilWeda · 2024-01-17T11:15:07Z

src/components/NewMovie/NewMovie.tsx

+  const sumbitCheck = !(
+    form.title.trim() && form.imgUrl.trim()
+    && form.imdbUrl.trim() && form.imdbId.trim()
+  );


try to rewrite for best readability.

SerhiiKirik

Great 🔥
Let's make some improvements 🧑‍💻

SerhiiKirik · 2024-01-17T15:41:57Z

src/App.tsx


 export const App = () => {
+  const [movies, setMovies] = useState([...moviesFromServer]);
+
+  const handleMovie = (movie: Movie) => setMovies([...movies, movie]);


use functional setState

Suggested change

const handleMovie = (movie: Movie) => setMovies([...movies, movie]);

const handleMovie = (movie: Movie) => setMovies((...) => ...);

SerhiiKirik · 2024-01-17T15:42:22Z

src/components/NewMovie/NewMovie.tsx


-export const NewMovie = () => {
+type AddMovie = {


better to use interface for Props

Suggested change

type AddMovie = {

interface Props = {

SerhiiKirik · 2024-01-17T15:42:37Z

src/components/NewMovie/NewMovie.tsx

+  const [form, setForm] = useState({
+    title: '',
+    description: '',
+    imgUrl: '',
+    imdbUrl: '',
+    imdbId: '',
+  } as Movie);


Suggested change

const [form, setForm] = useState({

title: '',

description: '',

imgUrl: '',

imdbUrl: '',

imdbId: '',

} as Movie);

const [form, setForm] = useState<Movie>({

title: '',

description: '',

imgUrl: '',

imdbUrl: '',

imdbId: '',

});

SerhiiKirik · 2024-01-17T15:42:46Z

src/components/NewMovie/NewMovie.tsx

+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    setCount(count + 1);


functional setState

SerhiiKirik · 2024-01-17T15:43:34Z

src/components/NewMovie/NewMovie.tsx

+    setForm({
+      title: '',
+      description: '',
+      imgUrl: '',
+      imdbUrl: '',
+      imdbId: '',
+    });
+
+    onAdd(form);


first, you send the form, after - do reset

Suggested change

setForm({

title: '',

description: '',

imgUrl: '',

imdbUrl: '',

imdbId: '',

});

onAdd(form);

onAdd(form);

setForm({

title: '',

description: '',

imgUrl: '',

imdbUrl: '',

imdbId: '',

});

SerhiiKirik · 2024-01-17T15:44:10Z

src/components/NewMovie/NewMovie.tsx

-        value=""
-        onChange={() => {}}
+        value={form.title}
+        onChange={(newValue => setForm({


you can replace this

to =>

onChange={event => onChange(event)}

add name attribute to the input
After that create handleChange function, in this function take this name, title for example, from the event & set with this key ( name )

i dont understand how to do it(

DanilWeda

Great.
Approved!
Many thanks.

rvoshchylo added 3 commits January 14, 2024 20:34

add task solution

260a268

remove onClick from submit button

28f942e

add trim

fea8f03

olya-shyian suggested changes Jan 16, 2024

View reviewed changes

fixed solution

919fc93

rvoshchylo requested a review from olya-shyian January 16, 2024 14:31

revode extra symbols

7ca5698

DanilWeda suggested changes Jan 17, 2024

View reviewed changes

fixed for better readability only

98698ca

rvoshchylo requested a review from DanilWeda January 17, 2024 11:19

SerhiiKirik suggested changes Jan 17, 2024

View reviewed changes

fixed

e7949a9

DanilWeda approved these changes Jan 18, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add task solution #2088

add task solution #2088

rvoshchylo commented Jan 14, 2024

olya-shyian left a comment

olya-shyian Jan 16, 2024

rvoshchylo Jan 16, 2024

olya-shyian Jan 16, 2024

olya-shyian Jan 16, 2024

DanilWeda left a comment

DanilWeda Jan 17, 2024

DanilWeda Jan 17, 2024

DanilWeda Jan 17, 2024

DanilWeda Jan 17, 2024

DanilWeda Jan 17, 2024

DanilWeda Jan 17, 2024

DanilWeda Jan 17, 2024

rvoshchylo Jan 17, 2024

SerhiiKirik left a comment

SerhiiKirik Jan 17, 2024

SerhiiKirik Jan 17, 2024

SerhiiKirik Jan 17, 2024

SerhiiKirik Jan 17, 2024

SerhiiKirik Jan 17, 2024

SerhiiKirik Jan 17, 2024

rvoshchylo Jan 17, 2024

DanilWeda left a comment

	const handleMovie = (movie: Movie) => setMovies([...movies, movie]);
	const handleMovie = (movie: Movie) => setMovies((...) => ...);

add task solution #2088

Are you sure you want to change the base?

add task solution #2088

Conversation

rvoshchylo commented Jan 14, 2024

olya-shyian left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DanilWeda left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SerhiiKirik left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DanilWeda left a comment

Choose a reason for hiding this comment