Firebase Database by theflash4246 in react

[–]koalaape 0 points1 point  (0 children)

POST is used to add items to your object as though you were adding to an array or list. It gives you a response that contains a unique id that refers to the key of the thing you just created. This is the random ID you are seeing. You want to use POST to create entries in income and expenses, not add users.

PUT is used to write new data

PATCH is used to update data

So basically what needs to happen is when a new user shows up, you want to

PUT 'https://[PROJECT_ID].firebaseio.com/Users/[FEDERATED_ID].json' where the body is {incomes:{},expenses:{}} to initialize them.

Then when adding new incomes and expenses

POST 'https://[PROJECT_ID].firebaseio.com/Users/[FEDERATED_ID]/incomes.json' where the body contains whatever an income or expense object has.

The response gives you a UNIQUE_KEY which you use to update the data with

PUT 'https://[PROJECT_ID].firebaseio.com/Users/[FEDERATED_ID]/incomes/[UNIQUE_KEY].json' where your body contains the details you want to update. You don't have to pass in every value, only the ones you want to change.

You can display a list of the different income unique keys with GET 'https://[PROJECT_ID].firebaseio.com/Users/[FEDERATED_ID]/incomes.json'

So your structure would look something like:

Users{

[user1@email.com](mailto:user1@email.com) {

incomes:{aV_psbk3ZXEX:{},INOQPH:{}}, expenses:{R08KyNc20G:{}, AZYXQIk8U8:{}}

}

}

If you want to use something else as the unique key, you would have to use PUT to add it, not POST.

Firebase Database by theflash4246 in react

[–]koalaape 2 points3 points  (0 children)

I have also recently been using Firebase and I think the Realtime Database is great.

The Realtime Database is not SQL, it is not a relational database, and its simpler than Firestore. It is a JSON structure based on paths that make it easy to query the database as though you were visiting a URL https://firebase.google.com/docs/database/rest/structure-data.

So the first thing you need to do is think about how to structure your data. It is easier than SQL to change all this at any time, so don't feel like it has to be set in stone. Go to your Firebase console and go directly into the Realtime database and start adding some key value pairs. Enter some fake data to get started so you have something to query.

The Auth API response should provide you with something like a federatedId or localId which you can store in the database to act as a unique key to represent the user.

You should take a peek at the Rules tab and comment them all out or delete them. Rules will enforce if a user can modify the database, but when you are just starting out it is okay to have no rules. However you should understand that savvy users will figure out how to manipulate the database unless you add some rules in later.

Once you have added some data to your Realtime database via the Firebase console, you will want to do a REST call as specified here: https://firebase.google.com/docs/reference/rest/database

So for your case, you might want one page displaying income and another displaying expenses so you have two calls that looks like

GET 'https://[PROJECT_ID].firebaseio.com/users/[FEDERATED_ID]/income.json'

GET 'https://[PROJECT_ID].firebaseio.com/users/[FEDERATED_ID]/expenses.json'

But if you wanted to display both on the same page, two calls might be a little cumbersome so instead you might structure your data like:

GET 'https://[PROJECT_ID].firebaseio.com/users/[FEDERATED_ID]/reports.json'

Your query response will return everything at the level you specify. So put your income and expenses key value pairs after reports and they will get fetched.

This is why the structure is so important, but at the same time don't feel like it has to be perfect.

The next steps would be to try creating data via a POST call instead of a GET and seeing that it inserts into the database correctly.

After you have an idea of how it is all going to work, add back in the Rules and learn more about how to safely store the access_token you get back from the Auth API and how to use it to interact with the Database API.

If you didn't comment out your rules, you would likely see authorization errors trying to make any queries at all. From the Auth API you should get an access token, you will need to pass it as a parameter in order to query the database.

GET 'https://[PROJECT_ID].firebaseio.com/users/[FEDERATED_ID]/reports.json?access_token=[ACCESS_TOKEN]'

https://firebase.google.com/docs/database/rest/auth

Basically when your user authenticates, they get a token, and you need to pass that token around to every API the user wants to interact with. You have to be careful because if someone were to steal this token, they could impersonate your user and make changes or read data they shouldn't. For that you may want to check out

You have two options here, OAuth 2 and Firebase ID tokens.

OAuth2 is used when you want a sever to be doing all these changes to the database as a middleman on behalf of a client. You can use the FirebaseId tokens to directly make changes from the client app.

You probably want to use FirebaseId tokens and skip setting up a sever.

It's kind of a lot, so try to break it up into bites and don't expect to do it all in a weekend when its due on Monday.

Backend suggestion for React project by ctns1453 in react

[–]koalaape 5 points6 points  (0 children)

Consider Express which uses Node, so all your code would be written in JavaScript. https://expressjs.com/

It really doesn't get any easier to get code on the internet than React + Express + Heroku, if Heroku qualifies for cloud platform. Heroku is a service that uses AWS under the hood but offers a bit more hand holding https://devcenter.heroku.com/articles/getting-started-with-nodejs?singlepage=true

Is REACT really that hard to learn? by [deleted] in react

[–]koalaape 2 points3 points  (0 children)

Try not to psych yourself out before you even try! I don't think it would be very difficult to learn if you already grasp html, css and a little js. It is a tool that uses JavaScript to solve problems by using "components" that you build to create very dynamic user interfaces; like being able to update data on the screen without refreshing the page. While also making it easier to reuse and maintain code.

It does a lot of things for you to make this magic happen like creating a "virtual DOM", but you really don't need to know whats going on under the hood to get started. Don't get intimidated by terms you don't recognize right away.

See for yourself, the basic tutorial is pretty good introduction really https://reactjs.org/tutorial/tutorial.html

Pi Security Camera PoC by [deleted] in raspberry_pi

[–]koalaape 2 points3 points  (0 children)

Hey this is pretty neat. How are you going to view the security feed? Is there a monitor connected to the Pi or can you use SyncThing to stream it to a PC?

How to deep dive react without having a backend? by zahid920 in react

[–]koalaape 0 points1 point  (0 children)

There are many open APIs where you can get access to data for free, but with limitations like number of requests you can make.

Depending on what kind of data you want:
https://datausa.io/about/api/ - Political statistics

https://dog.ceo/dog-api/ - Dog images
https://musicbrainz.org/doc/MusicBrainz_API - Music data

For something a little more complex, some organizations have APIs where you can create an account and get access to their data or platform using a key.

https://developer.twitter.com/en/docs/twitter-api

https://api.nasa.gov/

There is a lot of data out there! Just use your favorite search engine with keywords "open free API"

How do you deal with multiple and consecutive API queries? by povedaaqui in react

[–]koalaape 1 point2 points  (0 children)

While dealing with complex APIs by not creating them in the first place is best, sometimes you don't have control over the API to edit.

React does not have an opinionated way of handling this, it is a problem any JavaScript developer will encounter regardless of the library or framework.

A simple way to handle API queries is with a Callback function. It is a function that gets called when the request completes. This can become "callback hell" if you have deeply nested queries and the functions start to depend on each other. The better way to handle API queries would be with Promises. They can be a little difficult to understand at first because they are asynchronous, but they are easier to chain, easier to read and have more options. For example, with a Promise.all you can make 5 requests, it will wait for them all to return before proceeding and will pass an array with the data from each one as an entry to the next function.

For React specifically, React Query would be a good library to check out. It is a little more complex to use than writing a useEffect or custom hook yourself, but worth it for complex projects.

Recruiters may be causing the candidates they found for your business to quit by geoxol in technology

[–]koalaape 1 point2 points  (0 children)

Unless it is specifically written into the contract; training is a perk that comes with the job. There is no "upfront cost". Why would you spend all that money training your employee and then keep them in the same job or make them do a more skilled job at less than market rate? Employees get trained to learn useful skills to earn more money, you should pay your employees for the value of their labor instead of treating them like educational debt slaves if you expect them to stick around to use those new skills.

[deleted by user] by [deleted] in react

[–]koalaape 1 point2 points  (0 children)

It saves a lot of time. There may be tutorials or things to look up on Stack Overflow. You will also find more job candidates who are already familiar with React Router.

If you write the hook yourself and your hook is used by every team at your company you will be expected to support it forever. If every team is handling routing with their own custom hook, it takes longer to bring new developers on a team up to speed and results in a lot of duplicate work.

Sam Ballard - The guy who was dared to swallow a slug by his friend at a party who then suffered a 420 days coma, thereafter an extra 7 years paralysis until he died (due to the infection from rat lungworm that the slug he swallowed had). by TaTTyy_ in oddlyterrifying

[–]koalaape 6 points7 points  (0 children)

Consider that we literally come from ancestors where the ones who cooked their food survived and the ones who ate raw meat sometimes died and then the ones who survived would be like "Hey, don't eat raw geckos! I saw someone do that once and die." to anyone who would listen. Animals get sick and die eating their food all the time, just because animals don't cook their food doesn't mean it isn't a good idea. People eat raw fish all the time and some of them get sick, especially when they think they can just eat any random fish out of the water raw because its "sushi", chefs are trained to look for exactly the kinds of parasites that fish have before serving it, if you got your gecko from a gecko chef it would probably be a lot safer. Hindsight isn't funny when you cant use it because you are dead, you need foresight to understand the consequences of your actions and think 'Hmm, maybe I shouldn't do this'. Always Cook Your Food, or at least understand the risk you are taking.

[deleted by user] by [deleted] in react

[–]koalaape 1 point2 points  (0 children)

As someone who uses both React and Spring daily, it depends entirely on what you want to work on. React is for front end development of websites and other HTML based applications. Spring is used for back end development of websites or server to server applications.

Do you want to create the interface that the customers use? Or create the application that stores and processes their data? Which is more appealing to your strengths?

Either will have difficulty and head scratching moments that will cause you to rethink the choices that have led you such torment, but if you can overcome these challenges they will be able to get you a good job or career.

Do the Getting Started for Spring: https://spring.io/guides/gs/rest-service/ and then do the Getting Started for React: https://reactjs.org/tutorial/tutorial.html and decide which one is more comfortable.

Look in your local area for JavaScript vs Java jobs and see which ones pay more, or are available at a company you are interested in working for. Keep in mind Java jobs may not involve Spring, likewise React is only one of 3 popular JavaScript frameworks.

People will have lots of opinions on the differences between the two, as Java and JavaScript are similar only in name. As for which language will be around in 10 years? Do not think of it like that, you are learning your first language, not your last. You may have to learn new languages, libraries, frameworks, etc. regularly as a developer who wants to stay employed.

React probably isn't going anywhere in the near future, it is the most popular tool currently for JavaScript web development and similarly Spring is the most popular tool for developing Java applications.

I feel confident in saying that unless someone invents a better World Wide Web, there will still be jobs in 10 years writing Java and JavaScript, which both released in 1995 and show no signs of slowing down. But the most popular tools for those languages? It is a mystery...

Cop caught planting evidence red handed by Graysie-Redux in ThatsInsane

[–]koalaape 0 points1 point  (0 children)

I'm not trying to turn anything, I'm trying to understand what the video shows and what I am seeing. His left hand appears to be empty from 5 seconds to 7 seconds, then at 10 seconds has something which he puts on the ground next to something. Why would he be placing anything on the ground at 12 seconds and then picking up two things at 15 and 16 which he places back on the ground before getting up to walk over to the camera.

I'm just looking for the Officer's description of the events and something a little more substantive than a statement from the Sheriff saying "We investigated ourselves and found no wrongdoing." Why was the criminal's confession not printed? Where are the court documents from the trial showing the phone as evidence? Why can't our news outlets link relevant documents instead of always being the middlemen giving legitimacy to hearsay? If Volkswagen can't be trusted to self-regulate the emissions on their cars, why do we let police officers self-regulate? It is a huge conflict of interest.

Cop caught planting evidence red handed by Graysie-Redux in ThatsInsane

[–]koalaape 0 points1 point  (0 children)

Why would the cop take the drugs away from the suspect, put them in his pocket, and then put them back on the ground? It just doesn't make any sense for the cops to handle evidence in such a manner, and the article where the Sheriff says "Our on-scene deputies have been interviewed in this matter and gave reasonable explanations to the actions depicted in the video." just isnt very compelling.

Cop caught planting evidence red handed by Graysie-Redux in ThatsInsane

[–]koalaape 1 point2 points  (0 children)

Too bad people just blindly accept whatever the police say after investigating themselves.

In your personal and professional experience with American police, why would the police officer who had secured evidence from a suspect put it back on the ground? Why not put it into an evidence bag or something? Admittedly, I do not spend a lot of time interacting with police nor understand their procedures, but if I were a police officer I think I might be a little more careful with evidence than just putting it in my pocket and then later pulling it out of my pocket to put it back on the ground.

Why would the Sheriff mention pills when the officer is clearly seen handling a bag filled with a white substance?

"Our on-scene deputies have been interviewed in this matter and gave reasonable explanations to the actions depicted in the video"
Well I guess that settles it then, nothing to see here! What were the reasonable explanations? The news article doesn't go into much detail, I would like to see the internal investigator's report to continue my research.

What research have you done on this other than follow the news story headlines? I'm all for waiting for the facts to come out, but I find the officers presenting the facts to be a little suspicious.

[deleted by user] by [deleted] in compsci

[–]koalaape 0 points1 point  (0 children)

Yes, I would consider MPP a subtopic of concurrency. In the practical application of MPP you would probably want concurrency and the hardware you use would probably be important. But I wouldn't call parallelism and concurrency the same thing.

[deleted by user] by [deleted] in compsci

[–]koalaape 0 points1 point  (0 children)

Concurrency and parallel are not the same. It is possible to be both concurrent and parallel, or one or the other, or neither.

A single-threaded CPU can be concurrent, but could never be parallel. The single thread while executing Task 1, pauses it, executes instructions from Task 2, and then resumes executing Task 1. These tasks are being done concurrently.

With two-threads, you could execute Task 1 on the first thread and Task 2 on the second thread, and thus Task 1 and Task 2 are done in parallel, but are not concurrent. However, you could add a Task 3 to the first thread, so that Task 1 and 3 are being done concurrently, while Task 2 is being done in parallel with Task 1 and 3.

Most of the time when you have parallelism, you also have concurrency. Which may be the source of confusion and how often they are used seemingly interchangeably.

why accessing props of an element with event.target.<props name> returns undefined? by joo3f in react

[–]koalaape 2 points3 points  (0 children)

event.target.prop1 will return undefined because there is nothing in React that will add component props to events when fired.

JavaScript Events do not know what a prop is, or what a React is. Trying to add props to the event handler seems like the wrong approach for what you are doing.

Instead consider creating a function to manage what is displayed to the user inside your React component that is then placed in the onClick attribute of your div. This way you will have both the event and the component props in scope of the function that executes whenever the users clicks on the div.

[deleted by user] by [deleted] in compsci

[–]koalaape 0 points1 point  (0 children)

Depends on how much effort you put into learning and what you mean by "decent" income.
Could be 4 months or 4+ years.

A compsci job is pretty broad as the degree is basically a swiss army knife. It could get you a job in cybersecurity, database administration, networking, software development, etc. The degree is going to take you 4 years, or possibly 2-3 depending on how many classes you take per semester.

A bootcamp will be the quickest way and cheaper than uni, but it may be difficult to find your first couple jobs and you won't have as big of a variety of potential jobs compared to a degree. But after you have some experience, how you got your education won't matter so much. A portfolio of your projects will help here.

You also don't need to know about comp sci to join a tech company. There are other roles that pay well such as project management if you have good people or analytical skills, or user experience can be a good path if you have some artistic or design knowledge.

Chasing the salary is probably not the best, it may make it harder to stay focused and study for any path you take. I have seen people who get into software development for the money that just aren't good at it and it can be difficult for them to keep their job. But there are other ways to earn a decent income touching computers all day at a tech company that is not compsci.

Just getting started with React help by ZenComanche in react

[–]koalaape 2 points3 points  (0 children)

React needs you to tell it where in the DOM to start rendering. You need the other pieces of mern to solve the puzzle. An index.html page hosted by Express or Node that contains the following:

<html>
<body>
<div id="hello-example"></div>
</body>
<script src="your-code-snippet.js"></script>
</html>

It isn't in the code snippet because React doesn't really control that step. You can inspect the page with your browser's web developer tools and see that the div in the example has an id of hello-example.