DEV Community: mitchelln11

How to Make a Reusable Function that Removes Duplicates

mitchelln11 — Sat, 11 Feb 2023 19:45:21 +0000

I am trying to make a function as re-usable as possible.

I have a JSON file containing "products" for now.

export let productList = [
    {
        id: 0,
        productName: "Men's Merrel Hiking Boots",
        price: 65.00,
        brand: "Merrell",
    },
    {
        id: 1,
        productName: "Women's Merrel Hiking Boots",
        price: 65.00,
        brand: "Merrell",
    },
    {
        id: 2,
        productName: "Natural Walking Stick",
        price: 22.00,
        brand: "Fayet",
    }
]

In my case, I am trying to map through these products and return all the brands without duplicates. I know I can do that with this Set function:

function dedupeCheckboxOptions() {
    return [...new Set(productList.map(product => product.brand))];
}

This works, but I am struggling to figure out a way to make this more re-usable. I would think it would look something like this so I could also use the function to maybe return the prices:

function dedupeCheckboxOptions(fullList, item) {
    return [...new Set(fullList.map(product => product[item]))];
}

The syntax appears to be correct, but whenever I try to pass values, whatever iterable list I send through in the fullList parameter, it comes through undefined.

Ex:

dedupeCheckboxOptions(productList , brand)

returns undefined

Any thoughts as to why?

Is There a Complete In-Depth Reading/Tutorials/Guide for Full-Stack Development?

mitchelln11 — Sun, 22 Jan 2023 20:45:17 +0000

Are there any resources out there that really get in depth about a true full-stack for building web or mobile applications? I know about MERN/MEAN stack which includes: M - MongoDB - used to host your data E - Express - middleware to spin up a server R/A - React/Angular - used to build the front-end through components (Made up of HTML, CSS, JS) N - Node - I think of it as an easy way to keep track of and download dependencies instead of going through one by one. It makes it easier for multiple people to use and start working locally. An index in a ways to your project.

However, this doesn't really cover anything like testing, CI/CD, Docker, Kubernetes, pipelines(yml), Schemas, version control hosting(GitHub/GitLab/Bitbucket), git vs yarn, etc. Maybe this is what DevOps is?

I am sure I am missing a few things, but is there anything like that out there, or do I just have to piece it together as I do my own research?

It would also be good to know alternatives, like git vs yarn, MongoDb vs a traditional database like MySQL, using client-side JS vs a true back-end language like C# or Java.

I have experience in the front-end; HTML, CSS, JS; but I am lacking in the back-end knowledge and am curious to learn more. I've even gotten things working locally on a C# project with MySQL, but have no idea how to move forward and host it in the cloud to make it truly a live application.

Anything will help moving forward, even main keywords to look for.

How to Display Junction Tables in .NET Core MVC 3.1

mitchelln11 — Thu, 09 Jul 2020 15:31:16 +0000

What is the best way to going about shared data with .NET Core? I understand that between the MVC model, you should keep information separated into their related areas.

Ex:
I've been working on a web app that builds Hiker profiles. It also connects to the National Park Service Rest API that populates the National Parks in the US.

All previous teaching tells me to break that down into the following:

Hikers:
-HikerController
-Hiker Model
-Hiker Views (Create, Details, Edit, Delete)

Parks:
-ParkController
-Park Model
-Park Views (Create, Details, Edit, Delete)

That all works great, but what happens when I want to create a Wishlist?

That would need information from the Hikers AND Parks models.

What is the best way to display that info on a view?
I've come across:
-Partial Views
-View Components
-Junction Table MVC (Don't know if there's a name for this), which would have the following

-Wishlist Controller
-Wishlist Model
-Wishlist Views (Create, Details, Edit, Delete)

I've tried, unsuccessfully, on the Partial Views and View Components. The last option seems plausible, but it also seems like overkill. It might fall in line with clean architecture, but then what's the point in View Components or Partial Views.

Thanks

Proper Folder Structure with Dynamic Methods?

mitchelln11 — Fri, 19 Jun 2020 15:28:29 +0000

If I have dynamic methods that could be used on several Controllers, where should those go?

Is this a possibility? Is it the wrong way to go about folder/file structure?

Ex:



-ParkController
--with FetchParkApiMethod() inside file

-TrailController
--with FetchTrailApiMethod() inside file

--OR--

-ParkController
-TrailController

-HelperFolder
--FetchDynamicApiMethod() which could be referenced in the Park or Trail Controllers.

.Net Core Shared Link Returning Null?

mitchelln11 — Mon, 15 Jun 2020 15:39:31 +0000

I am trying to convert a .NET Framework web application to a .NET Core web application. I did start a new project, so I'm copying over info.

In the Shared Views, I am trying to link to index view inside of a Hiker folder. Inside the Hiker database, I populated 2 hikers.

I am trying to access the list with the following:

<li class="nav-item">
  <a class="nav-link text-dark" asp-area="" asp-controller="Hiker" asp-action="Index">Hikers</a>
</li>

However, I am getting the following error message:

System.NullReferenceException: 'Object reference not set to an instance of an object.'

Microsoft.AspNetCore.Mvc.Razor.RazorPage<TModel>.Model.get returned null.

It would make sense if there was no information, but that's not true. Any ideas why I'm getting an error?

Using Standard Views

Hiker Model:

public class Hiker
{
    [Key]
    public int Id { get; set; }

    [Display(Name = "First Name")]
    public string FirstName { get; set; }

    [Display(Name = "Last Name")]
    public string LastName { get; set; }

    [Display(Name = "Street Address")]
    public string StreetAddress { get; set; }

    [Display(Name = "City")]
    public string City { get; set; }

    [Display(Name = "State")]
    public string State { get; set; }

    [Display(Name = "Latitude")]
    public string Latitude { get; set; }

    [Display(Name = "Longitude")]
    public string Longitude { get; set; }
}

The action I'm trying to get to (The out-of-the-box action):

public ActionResult Index()
{
  return View();
}

2 Hikers are populated.

Thanks for any help.

Update:
This seems to only be the case for the Index. Create, Edit, Delete, Details appear to be linking properly.

Run Function after useEffect to Manipulate Data?

mitchelln11 — Fri, 12 Jun 2020 16:45:36 +0000

I'm using the OpenWeather REST API which comes in JSON format. I know I have to make my fetch,(Axios in my case) call inside the useEffect because the component needs to render first, then calls the REST endpoint.

I can log out the information, only the temperature comes in Kelvin. In this case, I need to create another function that does the conversion. The only thing I am stuck on is how to transfer the API object info to my temperature conversion function. Any thoughts on how to do this? I assume props are involved.

My Code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {KelvinConvert} from './MathConversions';

const LocalWeather = () => {
    const [openWeather, setWeather] = useState({});

    useEffect(() => {
        axiosGet();
    }, []); //  Run once on load

    const axiosGet = () => {
        axios.get(`https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=${process.env.REACT_APP_WEATHER_KEY}`)
        .then(data => setWeather(data.data));
    }

    return (
        <ul id="weather-container">
            <KelvinConvert />  // Trying to add converted temperature here
            <li>{openWeather.main && openWeather.main.temp}&deg;F</li>
            <li>{openWeather.weather && openWeather.weather[0].main}</li>
            <li>{openWeather.name}</li>
        </ul>
    );
}

export default LocalWeather;

Then there's my method to do the conversion.

import React, {useState, useEffect} from 'react';

export const KelvinConvert = props => {
  const [temperature, setTemperature] = useState({props});

  useEffect(() => {
    convertKelvinToFahrenheit();
  }, []);

  const convertKelvinToFahrenheit = props => {
    setTemperature(((props - 273.15) * 9/5) + 32);
  }

  return {temperature};

}

Not actually properly passing data to the convertKelvinToFahrenheit method.

Getting the following errors:

./src/components/MathConversions.js
  Line 1:8: 'React' is defined but never used
no-unused-vars
  Line 4:10: 'temperature' is assigned a value but never used                                                     
no-unused-vars
Compiled with warnings.

Not sure where to go from this point.

List of XML REST APIs?

mitchelln11 — Wed, 10 Jun 2020 00:18:36 +0000

I know JSON is the better and newer format for REST APIs. However, businesses still list XML along with JSON in their job descriptions. I just want to find and use one in my portfolio just to get practice and show that I know how to work with them. The crazy part is, I've been searching most of the day, and all I am finding is JSON format REST APIs.

Does anybody have a list of REST APIs that at least offer XML as an option?

Thanks

Undefined Nested Object in REST API with React Hooks?

mitchelln11 — Thu, 04 Jun 2020 16:30:27 +0000

Having trouble trying to access nested objects in the OpenWeather REST API. Getting full results in Postman, but not when trying to render.

Postman results(condensed):

{
"coord": {
    "lon": -0.13,
    "lat": 51.51
},
"weather": [
    {
        "id": 500,
        "main": "Rain"
    }
],
"main": {
    "temp": 290.38
},
"name": "London"
}

Using const [openWeather, setweather] = useState([]);
If I want to access name, I can easily do that with openWeather.name, which works just fine when returning "London".

However, if I try openWeather.weather[0].main, it comes back as undefined. Why would that be?

If I change my setWeather to: setWeather(data.data.weather[0].main);, I am able to return "Rain" by using openWeather.main.

Anything would help, thanks.

Help with Image Click Through (Like a Carousel) using React Hooks

mitchelln11 — Wed, 06 May 2020 15:38:19 +0000

I have a component that is similar to a carousel, only I'm just clicking through using React Hooks. I have a full-width image with a left and a right click arrow. (I only have the right arrow click for now. Also not worrying about conditionals just yet.)

I am setting the images in the useState
Setting the default image to be the 0 index of the state values.

let indexValue = 0; // Initial slide index value
    let currentSlide = slides[indexValue];

Image, alt, and title display properly, cool.

Created a right arrow click function that's supposed to update the image.

    const arrowRightClick = () => {
        currentSlide = slides[indexValue + 1];
        console.log(currentSlide);
    }

When I click on the right arrow, the console log does indeed display the next image, img2.jpg, however, the image itself never updates.

??? What am I doing wrong?

I feel like I have to do useEffect somewhere.
I've tried this(doesn't work):

useEffect(() => {
        function changeSliderImage(currentSlide) {
            setSlides(currentSlide.setSlides);
        }
        return () => {
        <img src={currentSlide.source} alt={currentSlide.title} title={currentSlide.title} className="slider-img" />
    }
    }, [])

I feel like it's close to something like the previous code, but I'm not sure.

Full code below:

import React, { useState, useEffect } from 'react';

function Carousel() {

    const [slides, setSlides] = useState([
        {
            source: "../images/img1.jpg",
            title: "Half Moon Pier"
        },
        {
            source: "../images/img2.jpg",
            title: "Port Washington Rocks"
        },
        {
            source: "../images/img3.jpg",
            title: "Abandoned Rail"
        }
    ]);

    let indexValue = 0; // Initial slide index value
    let currentSlide = slides[indexValue]; // variable index value we can reference later

    // Index value moves up, but doesn't update the image. Why???
    const arrowRightClick = () => {
        currentSlide = slides[indexValue + 1];
        console.log(currentSlide);
    }

    return (
        <div className="carousel-block">
            <div className="flex-container">
                <div id="slider">
                    <div className="slide">
                        <img src={currentSlide.source} alt={currentSlide.title} title={currentSlide.title} className="slider-img" />
                        <div className="arrows">
                            <div id="arrow-left"><i className="fas fa-arrow-alt-circle-left"></i></div>
                            <div id="arrow-right" onClick={arrowRightClick}><i className="fas fa-arrow-alt-circle-right"></i></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    )
}

export default Carousel;

Any help would be appreciated

React Help with Put Method on Bootstrap Modal

mitchelln11 — Thu, 19 Mar 2020 15:52:32 +0000

I have a flashcard project I am building with React and Bootstrap. I am using json-server to simulate that my json-file is on another server.
(Project on localhost:3000, data.json file on localhost:3001).

The front-side of the card reads a title while the back reads the rest of the material from each object. I am originally pulling the data using fetch, but I am using Axios to Post and Delete cards. The one that's tripping me up is the put method.

Right now, I have a button per card that says "update" which opens a Bootstrap modal. I can't for the life of me figure out how to pass the id to the modal based on which update button is clicked. Then I want to populate the modal fields with the existing data.

Original Call to the json file

componentDidMount() {
      let url = "http://localhost:3001/collections"
      fetch(url)
      .then(response => response.json())
      .then(data => {
        console.log(this.state.collections)
          let collections = data.map((collection) => {
              return (
                <div key={collection.id}>
                  <div className="cards">
                      <div className="cards-inner">
                          <div className="card-front">
                              <h3>{collection.title}</h3>
                          </div>
                          <div className="card-back">
                              <div>
                                  {collection.cards.map((words) =>
                                  <div key={words.id}>
                                      <h4>{words.word}</h4>
                                      <p>{words.definition}</p>
                                  </div>
                                  )}
                              </div>
                          </div>
                      </div> 

                  </div>
                  **<button className="btn btn-primary"  data-toggle="modal" data-target="#putCard">
                    Update Card
                  </button>**

                  <button className="btn btn-primary" 
                    onClick={() => this.deleteCollection(collection.id)}>
                    Delete Card
                  </button>
                </div>
              )
          });
          this.setState({collections: collections});
      });
  }

Modal

<div className="modal fade" id="putCard" tabIndex="-1" role="dialog" aria-labelledby="putCardlLabel" aria-hidden="true">
            <div className="modal-dialog" role="document">
              <div className="modal-content">
                <div className="modal-header">
                  <h5 className="modal-title" id="putCardlLabel">Update Card</h5>
                  <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>

                <div className="modal-body">
                  <ModalPutCard />
                </div>

                <div className="modal-footer">
                  <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>

Here is the form inside the ModalPutCard

render(props) {
        return (
        <form onSubmit={this.handleSubmit}>
            <div className="form-group" id={this.state.value}>
                <label htmlFor="cardTitle">Title:</label>
                <input type="text" className="form-control" name="title" id="cardTitle" aria-describedby="text" onChange={this.handleChange} value={this.state.title} />
                <label htmlFor="cardState">State:</label>
                <input type="text" className="form-control" name="cardState1" id="cardState1" aria-describedby="text" onChange={this.handleChange} />
                <label htmlFor="cardComponent">Component:</label>
                <input type="text" className="form-control" name="cardComponent1" id="cardComponent1" aria-describedby="text" onChange={this.handleChange} />
                <hr></hr>
                <label htmlFor="cardState">State:</label>
                <input type="text" className="form-control" name="cardState2" id="cardState2" aria-describedby="text" onChange={this.handleChange} />
                <label htmlFor="cardComponent">Component:</label>
                <input type="text" className="form-control" name="cardComponent2" id="cardComponent2" aria-describedby="text" onChange={this.handleChange} />
                <hr></hr>
                <label htmlFor="cardState">State:</label>
                <input type="text" className="form-control" name="cardState3" id="cardState3" aria-describedby="text" onChange={this.handleChange} />
                <label htmlFor="cardComponent">Component:</label>
                <input type="text" className="form-control" name="cardComponent3" id="cardComponent3" aria-describedby="text" onChange={this.handleChange} />
            </div>
            <button type="submit" className="btn btn-primary">Submit</button>
        </form>
        );
    }

I would think it would be is simple as this.state.title, or maybe this.props.title (Or whatever one I'm working on), however, I always get an undefined, which makes me think I'm never passing the id to the modal in order to display the values.

Can I use the regular Bootstrap Modal?
Is this even possible?

Any help or hints would be awesome.
I also read through the components and state section of the React docs, trying to do it without Hooks at this point.

Here is my github: Github