React Native - Advanced Concepts

React Native
10

here is the code to the insertListing API call, I made sure everything is the same as from the video.

const insertListing = (listing) => {
	const data = new FormData();

	data.append("title", listing.title);
	data.append("price", listing.price);
	data.append("categoryId", listing.category.value);
	data.append("description", listing.description);
	listing.imageUris.forEach((image, index) => {
		data.append("images", {
			name: "image" + index,
			type: "image/jpeg",
			uri: image,
		});
	});
	if (listing.location) {
		data.append("location", JSON.stringify(listing.location));
		console.log(JSON.stringify(listing.location));
	}

	return client.post(endpoint, data);
};

also, here is the code for handleSubmit, for when the user clicks on the submitButton.

const location = useLocation();

	const handleSubmit = async (listing) => {
		const result = await listingsApi.insertListing({
			...listing,
			location,
		});

		if (!result.ok) {
			console.log(result);
			alert("error");
			return;
		}
		alert("Success");
	};

the backend is pretty much the same, but I did do this because when I did npm i it gave me the same errors as this post. however i didn’t change the version of joi because gpt4 said the joi functions mosh used was deprecated, so i decided to use the same joi version as him, however all the other dependencies are the latest. Here is what i get for console logging the result variable in handleSubmit:

{"config": {"adapter": ["xhr", "http"], "baseURL": "http://my-ip-address:9000/api", "data": "null", "env": {"Blob": [Function Blob], "FormData": [Function FormData]}, "headers": [Object], "maxBodyLength": -1, "maxContentLength": -1, "method": "post", "timeout": 0, "transformRequest": [[Function transformRequest]], "transformResponse": [[Function transformResponse]], "transitional": {"clarifyTimeoutError": false, "forcedJSONParsing": true, "silentJSONParsing": true}, "url": "/listings", "validateStatus": [Function validateStatus], "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN"}, "data": "<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<title>Error</title>
</head>
<body>
<pre>SyntaxError: Unexpected token &#39;n&#39;, &quot;null&quot; is not valid JSON<br> &nbsp; &nbsp;at JSON.parse (&lt;anonymous&gt;)<br> &nbsp; &nbsp;at createStrictSyntaxError (C:\\Users\\dyup3\\Desktop\\React Native\\Carrot Market\\backend\\node_modules\\body-parser\\lib\\types\\json.js:169:10)<br> &nbsp; &nbsp;at parse (C:\\Users\\dyup3\\Desktop\\React Native\\Carrot Market\\backend\\node_modules\\body-parser\\lib\\types\\json.js:86:15)<br> &nbsp; &nbsp;at C:\\Users\\dyup3\\Desktop\\React Native\\Carrot Market\\backend\\node_modules\\body-parser\\lib\\read.js:128:18<br> &nbsp; &nbsp;at AsyncResource.runInAsyncScope (node:async_hooks:206:9)<br> &nbsp; &nbsp;at invokeCallback (C:\\Users\\dyup3\\Desktop\\React Native\\Carrot Market\\backend\\node_modules\\raw-body\\index.js:238:16)<br> &nbsp; &nbsp;at done (C:\\Users\\dyup3\\Desktop\\React Native\\Carrot Market\\backend\\node_modules\\raw-body\\index.js:227:7)<br> &nbsp; &nbsp;at IncomingMessage.onEnd (C:\\Users\\dyup3\\Desktop\\React Native\\Carrot Market\\backend\\node_modules\\raw-body\\index.js:287:7)<br> &nbsp; &nbsp;at IncomingMessage.emit (node:events:518:28)<br> &nbsp; &nbsp;at endReadableNT (node:internal/streams/readable:1696:12)</pre>
</body>
</html>
", "duration": 16, "headers": {"connection": "keep-alive", "content-length": "1272", "content-security-policy": "default-src 'none'", "content-type": "text/html; charset=utf-8", "date": "Sat, 27 Apr 2024 09:31:53 GMT", "keep-alive": "timeout=5", "x-content-type-options": "nosniff", "x-powered-by": "Express"}, "ok": false, "originalError": [AxiosError: Request failed with status code 400], "problem": "CLIENT_ERROR", "status": 400}

thank you sm in advance

p.s. @Mosh please consider updating the react native course as there was a lot of errors along the way which I guess was not that hard to solve but I finally got stuck on one :frowning:. or maybe if you decide to just update the backend that would be great :smiley: