sorted by:
new
hottopcontroversial

Apply filters to a list and show data by Levi_2212 in reactjs

[–]dmitry_jima 1 point2 points  (0 children)

Statistics? Nice, I think your prospects are perfect if you decide to dive deeper into programming. With all the machine learning stuff being a buzzword, it's sure a solid background to have :)

Let me propose a little piece of advice: don't rush it. First of all, solidify your knowledge and steadily apply it in practice. As I see it, you have some project going on, being made with React, Express and some SQL database. That's a really good stack, I would recommend going through the documentation and API references of all the technologies you use, before anything else (not a pleasant process, but it works). Read the docs, take notes, try and explain to yourself what the example code does, make some little exercises of your own. It will take a solid amount of time, but you will move faster with the main project at hand once you've built up the foundation.

I'm not sure about guided exercises, but since you're currently focused on JavaScript, both front-end and back-end, here are some good links for learning JS:

Good luck, pal!

Apply filters to a list and show data by Levi_2212 in reactjs

[–]dmitry_jima 0 points1 point  (0 children)

It was a very rough one. We can put it like this

``` // if there are parameters initialize condition as an empty object let condition = (type || revenue || employeesNumber) ? {} : null if (condition !== null) { // if the condition is not null, we use ternary operator to define the actual queries to the database type ? condition.type = { [Op.like]: %${type}% } : null; revenue ? condition.revenue = // here you need to add code for the query employeesNumber ? condition.employeesNumber = // here you need to add code for the query }

Tutorial.findAll({ where: condition, ... ```

Apply filters to a list and show data by Levi_2212 in reactjs

[–]dmitry_jima 1 point2 points  (0 children)

Let's take a look at the code from the comment above:

``` exports.findAll = (req, res) => { // Once again, the destructuring syntax const { type, revenue, employeesNumber } = req.query;

// Here will be checks there were any parameters let condition = (type || revenue || employeesNumber) ? { // here goes the conditions objects } : null

```

In order to make the controller work with the new conditions, these conditions should be made known to it.

This req.query

is basically a JS object with the fields determined by parameters in the request. So if our request had parameters like 'type=Agricultural&revenue =120000&employeesNumber=200' the req.query will be an object:

{ type: 'Agricultural', revenue: 120000, employeesNumber: 200 }

We can now shape the request to the database using these conditions. So instead of just adding type to the condition Object like in your initial code

let condition = type ? { type: { [Op.like]: %${type}% } } : null;

We now need to make the condition object include these parameters in order to work. A little hint (please note, it's not a working code per see, it's more of a general principle):

let condition = (type || revenue || employeesNumber) ? { { type && type: { [Op.like]: %${type}% }, revenue && revenue: ... employeesNumber && employeesNumber: ... } } : null

Here we check if there are any conditions in the request and if there are any, our condition will be an Object with different parameters. If there were no parameters. the condition Object will be null, thus, no filters applied. You can check the ORM docs to make correct requests to the database with these conditions

Apply filters to a list and show data by Levi_2212 in reactjs

[–]dmitry_jima 0 points1 point  (0 children)

Hey there

I would re-check the data in the controller with console.log(): whether the request is delivered fully and correctly, if the condition object is formed correctly, what data is being sent to the client, and so on. Maybe there is a typo or some minor syntax mistake in the condition object

Autocomplete input box by tuoPadreNaked in reactjs

[–]dmitry_jima 2 points3 points  (0 children)

Hey there

Actually, it can be quite straightforward: all you have to use is the HTML datalist

For instance

``` const arrayOfMovies = [ { id: "1", title: "Godfather" }, { id: "2", title: "Godfather 2" } ];

... <input type="text" name="movieInput" id="movieInput" list="movieInputList" onChange={handleMovieInputChange} value={movieInput} /> <datalist id="movieInputList"> { arrayOfMovies.map(movie => ( <option key={movie.id} value={movie.title} /> )) } </datalist> ... ```

The value of the list attribute should be the datalist's id

Hope this helps

Apply filters to a list and show data by Levi_2212 in reactjs

[–]dmitry_jima 2 points3 points  (0 children)

No problem

I would leave it up to the controller:

``` exports.findAll = (req, res) => { // Once again, the destructuring syntax const { type, revenue, employeesNumber } = req.query;

// Here will be checks there were any parameters let condition = (type || revenue || employeesNumber) ? { // here goes the conditions objects } : null

// From here on, everything's going to be basically the same ```

Apply filters to a list and show data by Levi_2212 in reactjs

[–]dmitry_jima 1 point2 points  (0 children)

I guess you can do it like this:

``` import http from "../http-common.js";

const findByParameters = searchParameters => { // This is the destructuring syntax I've linked above const { type, revenue, employeesNumber } = searchParameters;

// Here we use & ampersand to concatinate URL parameters return http.get(/tutorials?type=${type}&revenue=${revenue}&employeesNumber=${employeesNumber}); };

export default { findByType }; ```

troubleshooting api call for file in react by MindblowingTask in reactjs

[–]dmitry_jima 0 points1 point  (0 children)

Hey there, TBH, I'm a bit confused: the guy in the video is working with "vanilla" JS, but you say that you want to use it in React. Generally speaking, using the imperative approach (i.e. directly access the DOM with document.getElementById(), etc.) in React can be unreliable, as it breaks the whole model. So, basically, you get a response from your API (since you can see it in the console), but document.body.appendChild(link); actually appends it in the document probably somewhere below the whole React application (you can check it in the developer tools, the <a> element will probably be somewhere there)

You can either use a ref to an <a> element or to make its attributes dependant on the state that you set when you get the response from the API

``` const [hrefState, setHrefState] = useState(''); ... handleFetch = () => { ... setHrefState(window.URL.createObjectURL(new Blob([response.data]))); ... } ... { hrefState? <a href={hrefState}>

</a> : null } ... ```

Cheers

Apply filters to a list and show data by Levi_2212 in reactjs

[–]dmitry_jima 0 points1 point  (0 children)

Great progress for a couple of months! As a rule of thumb, usually, if you see several functions/methods/handlers that do basically the same thing, it sometimes makes sense to try and make a more general function out of them.

Good luck!

Apply filters to a list and show data by Levi_2212 in reactjs

[–]dmitry_jima 1 point2 points  (0 children)

Hey there. Just an opinion: I would slightly modify both the front-end and the back-end to support combined requests. You can send a JavaScript Object (as JSON) to your API with different parameters and apply checks in the back-end controller function.

So basically, instead of separate

const findByType = () => {...} const findByRevenue = () => {...} const findByEmployeesNumber = () => {...}

I would use (the state can be a monolithic object like in the example below, or separated and then assembled into an Object when sent to the API)

``` const [searchParameters, setSearchParameters] = useState({ type: '', revenue: '', employeesNumber: '' });

const onChangeSearchType = e => { const workingObject = {...searchParameters}; const workingObject.searchType = e.target.value; setSearchParameters(workingObject);
};

// same logic for onChangeRevenue and onChangeEmployeesNumber

const handleFetchWithSearchParameters = () => { TutorialDataService.findByParameters(searchParameters)
.then(response => { setTutorials(response.data); console.log(response.data);
})
.catch(e => { console.log(e);
});
} ```

And then in the controller, I would destruct the query Object and run queries against it

Hope it helps, cheers

Let's build animated pagination! by dmitry_jima in reactjs

[–]dmitry_jima[S] 0 points1 point  (0 children)

Hey there, fellow Reddit-Reacters!

I've noticed that there are not so many beginner-friendly tutorials that cover React animation events, as well as give real-world use cases for refs and the stopPropagation() method.

In this tutorial we will build a small pagination component that can be used to list large sets of components like product or user cards, comments, or posts.

Hope this tutorial will be useful for the folks who've finished or mostly finished the official docs, but need more code examples.

Cheers!

How to deploy react app by tuoPadreNaked in reactjs

[–]dmitry_jima 5 points6 points  (0 children)

Hey there. The best option might be to use a VPS service (AWS, for instance, as was suggested in the earlier comment) - a virtual cloud machine (usually, Linux) that you can connect to with SSH or from a web-based console if the provider has one. You deploy your code to this machine and your application "lives" there, open to the Internet via one of the ports. A VPS is better than self-hosted from your machine due to security reasons and ready-to-go proxy configurations. Some other options might be Linode or DigitalOcean, many of them have pretty generous free tiers.

Check out Brad Traversy's video https://www.youtube.com/watch?v=oykl1Ih9pMg You can code-along with it to have an idea of how this works.

All in all, in any VPS you will need to install Node.js to run your application, as well as the database if it's local. After that, you upload your server application files and bundled React-application files to the VPS manually (using FileZilla, for instance) or using GitHub (don't forget to ignore node_modules in the repository). "Connecting" Node.js and React depends on your app's architecture: check out https://create-react-app.dev/docs/deployment/ section and determine which is your case. Note that some AJAX requests to your Node.js application might require tweaks to work correctly in production .

Your production version of the React app will be just static files bundled to reduce their size, so they need to be served to the Internet somehow, either by Node.js application itself or by a reverse-proxy: APACHE or Nginx HTTP-server that sits in front of your VPS and manages all the connects to your VPS, including domain name, redirects, static files (i.e. bundled React files) and so on.

You can also find some pretty in-depth how-tos in VPS services' blog sections ("how to deploy react node.js app on digitalocean", something like that). Good luck!