|
Biowarfare posted:Good old jQuery_jsonp1249805732097({...}) way to ruin my day by reminding me jsonp is a thing that existed
|
# ? Feb 25, 2021 14:31 |
|
|
# ? May 31, 2024 09:18 |
|
Jsonp is great because you can return a response full of whatever code you want and it'll run it on the client. As nature intended.
|
# ? Feb 25, 2021 15:10 |
|
I’m having the dumbest time trying to understand react context and react hooks together. I’m simply trying to get a state variable to be shared between two components and have both components be able to modify the state. This is in NextJS btw. Anyways, I’m not sure if context is even the best way to do this, but I tried searching for some goods but it seems ike they’re all vague and assume you know what you’re doing (I don’t!). This is what I got so far off of using this guide as a base (https://www.netlify.com/blog/2020/12/01/using-react-context-for-state-management-in-next.js/): code:
code:
code:
|
# ? Feb 25, 2021 18:02 |
|
…I figured it out. It was because I wasn’t restructuring correctly I guess. This is how I got it to work:code:
|
# ? Feb 25, 2021 19:07 |
|
You want const [ viewport, setViewport ] = useGeoContext(); I think. In your first post you were assigning setViewport only, viewport was not getting set.
|
# ? Feb 25, 2021 22:11 |
|
Ill try that. I spent all day incredibly frustrated with nextjr and formik. I didn't expect there to be so many small gotchas with nextjr when trying to use npm modules. I left the day feeling unaccomplished/a fraud so I think that's a good thing lmao. I could not for the life of me figure out how to pass a variable to a paramtere using Geocoding and Formik. Maybe if one of you goons. Know what I was doing wrong that's be great. Here's the stack overflow post I made https://stackoverflow.com/questions/66375858/getting-value-from-component-with-formik-field I dunno if it's my next install or what but I had a bunch of weird errors today trying to get small stuff to work I couldn't get mapbox to process a env variable even though it worked literally everywhere else in the app etc. Maybe I should just pay for google places sigh.
|
# ? Feb 26, 2021 03:56 |
|
I'm not familar with formik and that geocoder package but check this out: https://reactjs.org/docs/components-and-props.html#props-are-read-only I imagine you are running into problems because onSelected is trying to modify the field prop. Try updating the state of the component instead, like in the example from that npm's package docs: code:
|
# ? Feb 27, 2021 05:44 |
|
That's a good idea i'm going to try that. Thanks
|
# ? Feb 27, 2021 15:03 |
|
I'm randomly researching things regarding Javascript and React. What sort of patterns should I look at when I want to do something from traditional development, like loading/spawning forms or controls inside a container of a page (or app in case of Electron)? Say if I want an application frame with all sorts of navigation stuff, like a drawer and a breadcrumb bar, and then load the appropriate things into the content area. I'm not sure what I should look up for this. It's all happening in the render() function I guess?
|
# ? Feb 28, 2021 16:50 |
|
Combat Pretzel posted:I'm randomly researching things regarding Javascript and React. What sort of patterns should I look at when I want to do something from traditional development, like loading/spawning forms or controls inside a container of a page (or app in case of Electron)? Say if I want an application frame with all sorts of navigation stuff, like a drawer and a breadcrumb bar, and then load the appropriate things into the content area. I'm not sure what I should look up for this. It's all happening in the render() function I guess? Have you tried react router? Doing a drawer or breadcrumb navigation is pretty straightforward if you google tutorials for it.
|
# ? Feb 28, 2021 16:59 |
|
It’s not like React is that complicated a mental model either. The render function has some inputs, some state, and an output. If you want a page that changes what it displays based on something, you just write some basic if-then code that does that.
|
# ? Feb 28, 2021 17:05 |
|
It's the lack of littering controls all over the application surface and accessing them by name that's not clicking yet.
|
# ? Feb 28, 2021 19:53 |
|
One thing I don't understand about React & State is whats the best way to set a global state? For example I have two components, a search box and a map. I'd like the search box upon submit to set the global state to a new variable and then the map reads it and updates it, but it doesn't work that way in theory so I have a weird thing where if you press search the map component won't update unless you refresh or what not, if that makes sense. It's something i've read that Vue handles fine but that's vue?
|
# ? Feb 28, 2021 21:52 |
|
Empress Brosephine posted:One thing I don't understand about React & State is whats the best way to set a global state? For example I have two components, a search box and a map. I'd like the search box upon submit to set the global state to a new variable and then the map reads it and updates it, but it doesn't work that way in theory so I have a weird thing where if you press search the map component won't update unless you refresh or what not, if that makes sense. It's something i've read that Vue handles fine but that's vue? For a long time people used redux to handle global state in react, but that's probably overkill with recent versions. I would look into the context api (e.g. https://reactjs.org/docs/context.html).
|
# ? Feb 28, 2021 22:25 |
|
Empress Brosephine posted:One thing I don't understand about React & State is whats the best way to set a global state? For example I have two components, a search box and a map. I'd like the search box upon submit to set the global state to a new variable and then the map reads it and updates it, but it doesn't work that way in theory so I have a weird thing where if you press search the map component won't update unless you refresh or what not, if that makes sense. It's something i've read that Vue handles fine but that's vue?
|
# ? Feb 28, 2021 22:47 |
|
Thank you both those both are good ideas.
|
# ? Feb 28, 2021 23:21 |
|
I have a little server.code:
code:
code:
|
# ? Mar 1, 2021 20:23 |
|
just use express, no one uses raw http for a reason
|
# ? Mar 1, 2021 20:28 |
|
Well express doesn't do what I'm trying to do either. You gotta spin up a server and probe it with supertest, or you have to just unit test your route definition files. No way to inject a request into the app for some reason. That's right I'm pointing it all out. This blimp is coming down! Lazy devs all over.
|
# ? Mar 1, 2021 20:55 |
|
So I am reasonably sure that you aren't supposed to be manually constructing new http.ClientRequests and http.ServerResponses yourself. If you're averse to spinning up a HTTP server and using real HTTP requests and responses, you need mock requests and responses. However, I would be inclined to figure out a way to separate out the logic of the application from the HTTP layer. I'd much rather test the application by driving it with regular function calls.
|
# ? Mar 1, 2021 23:28 |
|
All joking aside I have mocked server requests and responses. https://github.com/Kequc/kequserver/tree/main/src/inject Which may not be the right solution. I probably could have given up after I figured out that node really didn't want me messing with http objects, and that I'm really not supposed to be doing what I've done. This doesn't seem like an optimal solution because I had to inspect the objects like crazy and the variables that were coming up don't even match the documentation. Who knows how long my mocks will remain valid. For example the `headers` parameter doesn't exist when you inspect the `ClientRequest` instance. Nor does any of the `setHeader`, `getHeader` etc, but it's in the docs and does work if you use it. On the `ServerResponse` object `_headers` exists and all of the extra methods that work on `ClientRequest` but `headers` also works even though it isn't there. So who knows. Maybe the correct solution in node is just make a server and send requests to yourself. Maybe that isn't even a lot of processing. Nolgthorn fucked around with this message at 03:16 on Mar 2, 2021 |
# ? Mar 2, 2021 03:14 |
|
Sorry to interrupt with yet another question but I'm not really clicking with React and/or NextJS or i'm trying to make it do things that it can't do...so is this even possible? : I have a form that lets you select a city. Upon selecting a city and hitting the submit button, the app would take the value of the form fields and passes it to a database to filter/query. The database returns the data and then the app uses that new data as it needs. I've been trying for the past three days to figure this out but I can't get it to work the way I think it should in Nextjs or React. The closest i've gotten so far is when I try to access the db within my form handleSubmit function, I get what might be the most vague error of all time: Unhandled Runtime Error SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data But I don't use classes So i'm just trying to wonder if this is even possible. I know how to do this with something like express rather easily, but it's not dynamic and requires a re-render. Think i've about ripped my hair out trying to figure this and retrieving and setting state between two components over the past few days. Empress Brosephine fucked around with this message at 06:11 on Mar 2, 2021 |
# ? Mar 2, 2021 06:02 |
|
Empress Brosephine posted:Sorry to interrupt with yet another question but I'm not really clicking with React and/or NextJS or i'm trying to make it do things that it can't do...so is this even possible? : What does "access the db" mean in this context? You're really not giving enough information here. Also, that error is pretty straightforward: you're trying to JSON.parse something that isn't JSON.
|
# ? Mar 2, 2021 06:42 |
|
Empress Brosephine posted:So i'm just trying to wonder if this is even possible. I know how to do this with something like express rather easily, but it's not dynamic and requires a re-render. Think i've about ripped my hair out trying to figure this and retrieving and setting state between two components over the past few days. It's totally possible. Maybe post code or put project on git etc?
|
# ? Mar 2, 2021 06:42 |
|
Yeah if you all don't mind looking at it. It's nothing complex since I've been trying to figure this out lol. Thanks for taking a moment to look. https://github.com/disneyquesting/campgroundSearchFinal In pseudo code terms "accessing the db" means having the handle Submit function send the query to the Api functions to get data, so with the above code ( https://github.com/disneyquesting/campgroundSearchFinal/blob/main/lib/api.js ) I'm trying to call getCamogroundsByCity from this https://github.com/disneyquesting/campgroundSearchFinal/blob/main/components/newsearch.js These are the main files I've been working on; there's alot of garbage in that project since I've been determined on trying to get this to work https://github.com/disneyquesting/campgroundSearchFinal/blob/main/components/searchbox.js This one you can see the commented out code that kinda works, but I can't figure out the right way to get the campgroundsbycity to call https://github.com/disneyquesting/campgroundSearchFinal/blob/main/components/newsearch.js That was me just trying to get something to work. https://github.com/disneyquesting/campgroundSearchFinal/blob/main/components/map.js That's the map component https://github.com/disneyquesting/campgroundSearchFinal/blob/main/pages/camps.js https://github.com/disneyquesting/campgroundSearchFinal/blob/main/pages/index.js The two main pages so far. Thanks for looking i appreciate it!!
|
# ? Mar 2, 2021 06:58 |
|
Nolgthorn posted:I have a little server. If you want to test a request handler then you should probably use supertest or something similar, which does run a server for you and actually does send local HTTP requests. The HTTP request/response handling is an integral part of the unit you're testing in this case, so it would be a mistake to try to mock the request and response IMO. Some purists may argue that this makes it not a unit test anymore but rather an integration test but I think that's pointless nitpicking. On the other hand if you want to unit test a bit of functionality that is used by a request handler then you should extract that bit of functionality into its own function or something (its own unit, as it were) such that it can be unit tested. TheFluff fucked around with this message at 11:14 on Mar 2, 2021 |
# ? Mar 2, 2021 11:11 |
|
It seems by going the super minimalist route I've shot myself in the foot with regard to unit testing, as node doesn't make these objects available outside of an actual networking request. You're right probably, my only options are to completely abstract the native objects out of the picture, or use supertest. I think I got enamored with fastify's solution which does something similar. But after reading the code they're using a giant library that is so large that it has to be conditionally loaded to make the integration possible. That seems less efficient than just creating http requests. It was an interesting deep dive into node networking anyway. Nolgthorn fucked around with this message at 12:55 on Mar 2, 2021 |
# ? Mar 2, 2021 12:44 |
Our approach is: end to end/integration tests against api endpoints, and untested thin handler functions that take the relevant data off requests and pass them to the actual logic functions which are unit tested, and return data which are then put on the responses again by the thin function. Basically mocking requests is making your life more difficult in order to test mostly other people's code (express or whatever) Osmosisch fucked around with this message at 13:14 on Mar 2, 2021 |
|
# ? Mar 2, 2021 13:01 |
|
Nolgthorn posted:It seems by going the super minimalist route I've shot myself in the foot with regard to unit testing, as node doesn't make these objects available outside of an actual networking request. You're right probably, my only options are to completely abstract the native objects out of the picture, or use supertest. You can manually create the request & response objects — make a request with the http.request function (which is just a wrapper around the ClientRequest constructor) and a ServerResponse only needs a request Like everyone else said, it's probably a bad idea as they're not really intended to be used like that
|
# ? Mar 2, 2021 13:42 |
|
I thought that was for performing actual http requests. So by creating a req object in this way my tests are going to attempt to communicate with whatever URL I put in there. And because I'm then channeling that req into a workflow that will do God knows what with it, and because it is trying to communicate via http simultaneously in the background, won't it likely throw an error?
|
# ? Mar 2, 2021 14:24 |
|
Empress Brosephine posted:This one you can see the commented out code that kinda works, but I can't figure out the right way to get the campgroundsbycity to call I would check if your api call is failing using something like fiddler/postman, and what the api is actually returning. Sometimes if a data service is failing on a web server, instead of returning json, it'll return something like "<html>Unhandled exception...." because a generic error handler is invoked because something bad happened like authorization didn't work (e.g because service protected using token auth and token not provided), or service isn't running, etc (even though you asked for JSON, it's entirely possible error pages don't respect that). The client tries to deserialize that returned generic error page as json, and "<" as the first character in the json string causes parser to spit nails because that's Not JSON.
|
# ? Mar 2, 2021 14:48 |
|
Bruegels Fuckbooks posted:I would check if your api call is failing using something like fiddler/postman, and what the api is actually returning. Sometimes if a data service is failing on a web server, instead of returning json, it'll return something like "<html>Unhandled exception...." because a generic error handler is invoked because something bad happened like authorization didn't work (e.g because service protected using token auth and token not provided), or service isn't running, etc (even though you asked for JSON, it's entirely possible error pages don't respect that). The client tries to deserialize that returned generic error page as json, and "<" as the first character in the json string causes parser to spit nails because that's Not JSON. I feel stupid for not even thinking of trying that. I'll try that and report back. Thanks for the help!
|
# ? Mar 2, 2021 15:31 |
|
Looks like supertest starts a server on port 0 which I didn't know you can do. That's nice at least. https://github.com/visionmedia/supertest/blob/master/lib/test.js#L56 Then I suppose I just make requests to my app in a wrapper running at that location, that'll be my solution I think after I get something to eat.
|
# ? Mar 2, 2021 16:24 |
|
Nolgthorn posted:Looks like supertest starts a server on port 0 which I didn't know you can do. That's nice at least. Passing 0 as the port number to server.listen() just means "listen on a random unused port". See the node docs for net.server. I'm not sure what you're trying to do, here - are you reimplementing supertest functionality yourself?
|
# ? Mar 2, 2021 18:29 |
|
Pako JS: I have a 400-character string I'd like to compress down to URL-safe characters. I turn the string into an array by using split, since Pako seems to require an array and not a plain string. The length of the compressed array is 137, which I consider a good result, but the compressed object is made up of a list of 3-digit numbers, which is undesirable. I want the result to be a string single characters, not 3-digit numbers. Is there enough single characters to represent each number that are URL-safe? Is there an easy way to apply this to the compression, and then uncompress it to its original 400-character string? code:
|
# ? Mar 2, 2021 18:52 |
|
It's not actually a list of 3 digit numbers. You have a Uint8array as output. You can probably use something like https://github.com/WebReflection/uint8-to-base64
|
# ? Mar 2, 2021 19:08 |
|
TheFluff posted:Passing 0 as the port number to server.listen() just means "listen on a random unused port". See the node docs for net.server. I'm not sure what you're trying to do, here - are you reimplementing supertest functionality yourself? I'm building a little server requestListener lib for node. https://github.com/Kequc/kequserver I'm unsatisfied with supertest because it doesn't allow me to test streaming, and it is heavy handed for my minimalist little tiny lib. I'm interested in just working on it here and there learning about multipart requests and so on, implementing those details. Right now I'm concerned about being able to test. Part of me thinks it's outside the scope of the lib, because someone could use the lib and just install supertest. But it's all a learning experience.
|
# ? Mar 2, 2021 19:53 |
|
Biowarfare posted:It's not actually a list of 3 digit numbers. You have a Uint8array as output. Thank you! The Uint8array part was really helpful. I'm using this code: https://stackoverflow.com/a/36046727/586006 Edit: Ugh. It's not working for me since it uses spaces and forward slashes. Good Sphere fucked around with this message at 21:41 on Mar 2, 2021 |
# ? Mar 2, 2021 20:44 |
|
Good Sphere posted:Thank you! The Uint8array part was really helpful. I'm using this code: https://stackoverflow.com/a/36046727/586006 to b64 .replace(/\//g, '_').replace(/\+/g, '-'))) from b64 .replace(/_/g, '/').replace(/-/g, '+')
|
# ? Mar 3, 2021 00:02 |
|
|
# ? May 31, 2024 09:18 |
|
Biowarfare posted:to b64 .replace(/\//g, '_').replace(/\+/g, '-'))) Exactly what I needed. Thank you. Now to see how this compression holds up to my own. I'm suspicious as a more noisy image only compressed down to 396/400.
|
# ? Mar 3, 2021 02:38 |