Today it’s one of those articles. We’re going to look at a few super useful JavaScript features that can make your coding life (and mine) a whole lot easier. Whether you’re just starting out or you’ve been coding for a while, these tools are worth adding to your toolkit.

Let’s dive in!

1. Object.hasOwn(): A Safer Way to Check for Properties

Have you ever needed to check if an object has a specific property? Maybe you’ve used the in operator or Object.prototype.hasOwnProperty() before. Well, Object.hasOwn() is here to make that task simpler and safer.

How it works:

Object.hasOwn(object, propertyName)

You pass in the object you want to check and the name of the property you’re looking for. It returns true if the object has that property as its own (not inherited), and false otherwise.

Why it’s cool:

Unlike Object.prototype.hasOwnProperty(), Object.hasOwn() works even if the object doesn’t inherit from Object.prototype or if it has its own hasOwnProperty method. It’s like a superhero version of hasOwnProperty!

Before Object.hasOwn():

const person = { name: "Alice" };

// Old way (potentially unsafe)
if (person.hasOwnProperty("name")) {
  console.log("Person has a name");
}

// Safer old way
if (Object.prototype.hasOwnProperty.call(person, "name")) {
  console.log("Person has a name");
}

With Object.hasOwn():

const person = { name: "Alice" };

if (Object.hasOwn(person, "name")) {
  console.log("Person has a name");
}

Much cleaner, right?

2. String.replaceAll(): Find and Replace Made Easy

This one is a game changer. I’m sure you’ve run into the old school replace – where it only does the first occurrence. I’m sure you’ll always almost need to replace ALL occurrences right? No more messing with regular expressions or some clever looping. Now, it’s as easy as pie!

How it works:

string.replaceAll(searchValue, replaceValue)

You provide the substring you want to replace and what you want to replace it with. It returns a new string with all matches replaced.

Why it’s awesome:

It’s straightforward and doesn’t require you to mess with regular expressions for simple replacements. Plus, it replaces ALL occurrences, not just the first one like replace() does.

Before String.replaceAll():

const sentence = "The quick brown fox jumps over the lazy dog. The fox is quick!";

// Using regular expression
const newSentence = sentence.replace(/fox/g, "cat");

// Or using split and join
const newSentence2 = sentence.split("fox").join("cat");

With String.replaceAll():

const sentence = "The quick brown fox jumps over the lazy dog. The fox is quick!";
const newSentence = sentence.replaceAll("fox", "cat");

So much easier to read and understand!

3. structuredClone(): Deep Cloning Made Simple

Another good one that will blow your mind. Let’s talk about structuredClone(). If you’ve ever tried to create a deep copy of an object in JavaScript, you know it can be tricky. This function makes it a breeze!

How it works:

const clone = structuredClone(original)

You pass in the object you want to clone, and it returns a deep copy of that object.

Why it’s fantastic:

It can handle circular references, and it works with a wide variety of built-in types (like Date, Map, Set, and more). It’s also typically faster than other deep cloning methods.

Before structuredClone():

Can you say “yuck”?

const original = { 
  name: "Alice", 
  pets: ["dog", "cat"],
  details: { age: 30 }
};

// Using JSON (loses some data types)
const jsonClone = JSON.parse(JSON.stringify(original));

// Or a custom recursive function (complex and error-prone)
function deepClone(obj) {
  if (typeof obj !== "object" || obj === null) return obj;
  const newObject = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    newObject[key] = deepClone(obj[key]);
  }
  return newObject;
}
const customClone = deepClone(original);

With structuredClone():

const original = { 
  name: "Alice", 
  pets: ["dog", "cat"],
  details: { age: 30 }
};

const clone = structuredClone(original);

It’s like magic, isn’t it?

4. Array.at(): Flexible Array Index Access

Last one: ever wanted to access array elements from the end without knowing the array’s length? I’m sure you’ve done this hundreds of times. Well with Array.at() – your development life is going to be a tad better.

How it works:

array.at(index)

You provide an index, which can be positive or negative. Positive indices work like normal array access, while negative indices count from the end of the array.

Why it’s great:

It provides a clean way to access elements relative to the end of an array without needing to know its length. It’s especially useful for accessing the last few elements of an array.

Before Array.at():

const fruits = ['apple', 'banana', 'cherry', 'date'];

// Getting the last element
const lastFruit = fruits[fruits.length - 1];

// Getting the second to last element
const secondToLastFruit = fruits[fruits.length - 2];

With Array.at():

const fruits = ['apple', 'banana', 'cherry', 'date'];

// Getting the last element
const lastFruit = fruits.at(-1);

// Getting the second to last element
const secondToLastFruit = fruits.at(-2);

It’s more readable and less error-prone, especially when dealing with array lengths!

And there you have it! Super handy JavaScript features that can make your code cleaner, safer, and more efficient. Give them a try in your next project and see how they can level up your coding game.

Before you go, you might also find this one useful: Common JavaScript snippets for data manipulation

Happy coding!

The post Essential JavaScript Features You Probably Already Know – But Here It Is Anyway appeared first on Michael Soriano.

In HTML, this is easily achieved by the “Details” element. But of course, our users cannot write HTML. Similarly, a default block already exists in WordPress called “details“. The problem with this one is that our users do not find it intuitive. Also, they want to limit the formatting of the contents for each item.

You see how each item is contained within a big block. A button will add a title/content pair to the list – along with a checkbox that allows for the section to be expanded or collapsed by default.

Register the Block

This is the “housekeeping” part of the codebase. There is a PHP part of this process – and it really depends if you’re putting this in a plugin or a theme. But main function is below:

register_block_type(
    'namepsace/my-blocks-accordion',  // Block name with namespace
    [
        'style' => 'accordion-style',  
        'editor_style' => 'accordion-edit-style', 
        'editor_script' => 'accordion-js'  
    ]
);
...

Also, there are other parts of this such as enqueuing the styles and scripts for your blocks – which I’m not going to cover here. We’re mostly focusing on the “client” or JS side of things.

To read more about registering blocks in WordPress – see the codex.

For the JavaScript, create a file called index.js and start with the registerBlockType() function. If you’re not familiar with how to build blocks for WP – this is a good start Anatomy of a Block | Block Editor Handbook | WordPress Developer Resources.

registerBlockType(
    'namespace/accordion', {
      title: __('Accordion'),  
      icon: 'list-view',
      category: 'my-blocks', 
      attributes : {
        items : { 
         type: 'array',
         default : []
     }
    ...
}

Pay extra attention to the “attributes” object. This is the main “context” of our application. Notice that we want an array called “items” inside attributes – this is where we’ll manage our data.

The “Edit” Component

So in Gutenberg Blocks, the two major components that we have to worry about is the “Edit” and “Save”. Edit is what you see during the editing of Posts or Pages. Let’s look at how to build this first – particularly the JSX section:

const { RichText } = wp.editor;  
const { __ } = wp.i18n;

...

title: __('Accordion'),  
icon: 'list-view',
category: 'my-blocks', 
attributes : {
   items : { 
     type: 'array',
     default : []
   }
},
edit ( {className, attributes, setAttributes} ) {

... 

return (
<div>
{attributes.items && attributes.items.length > 0 ? attributes.items.map((item,i) => {
return (
<div>
    <div className={`${className}-item-title-wrap`}>
    <RichText   
        allowedFormats={[]}   
        tagName="div"     
        placeholder="Enter Title"               
        className={ `${className}-item-title` }
        value={ item.title }
        disableLineBreaks={ true }
        onChange={ val => updateItemTitle(val,i)}
    />
    <label>
    <input type="checkbox" data-index={i}
        checked={item.expand} 
        onChange={e=>updateItemExpand(e)} />
        Expanded
    </label>
    </div>
    <RichText  
        placeholder="Enter Content"  
        allowedFormats={ ['core/bold','core/italic','core/link'] }    
        multiline="p"
        tagName="div"                    
        className={ `${className}-item-content` }
        value={item.content}
        onChange={ val => updateItemContent(val,i)}
    />
</div>
)
}) : null}
<button 
    className={ `${className}-add-btn` } 
    onClick={addEmptyItem}>Add Accordion Item</button>
</div>
);

} //END EDIT

The HTML above is the UI for our editors. Notice that we’re going through out “items” and outputting it for action. We’re using the built-in RichText component for our editable sections (title and content). RichText is awesome – find out more about it. We’re also including a checkbox called expanded – that will allow our users to show the item expanded or collapsed.

Adding Items

When first using the block – all you see is a button that says “Add Accordion Item“. Clicking this button will execute below:

const addEmptyItem = () => {
    const items = [...attributes.items, {
      title : '', 
      content : '', 
      expand : true
    }];
   setAttributes({items})
}

This will add an empty object to our Attributes Items array, allowing our users to be able to edit our RichText components.

Click and Change Handlers

If you look in our JSX, we’ve mapped our inputs to event handlers. Add the code below”

const updateItemExpand= (e) => {
    const items = attributes.items.slice();
    const index = e.target.attributes.getNamedItem('data-index').value;
    items[index].expand = e.target.checked;
    setAttributes({items})
}
const updateItemTitle = (title,i) => {
    const items = attributes.items.slice();
    items[i].title = title;
    setAttributes({items})
}
const updateItemContent = (content,i) => {
    const items = attributes.items.slice();
    items[i].content = content;
    setAttributes({items})
}

The function names are pretty self explanatory. All we’re doing is manipulating the data in our Attributes. Also notice the setAttributes() function we’re using in each function. This is a “setter” that is very similar to React’s useState setters.

With all that in place, our Accordion block is ready for editing:

Typing “/accordion” will insert our block – ready for editing.

The “Save” Component

This is simply JSX that outputs our HTML for the public users. The code for this is quite simple – we’re simply using “details” and “summary“. This automatically has the expand and collapse functionality out of the box.

save( { attributes } ) {
    return (
        <div>
        {attributes.items && attributes.items.length > 0 ? (
            attributes.items.map(item => {
                return (
                    <details open={item.expand}>
                    <summary>{item.title}</summary>
                    <div dangerouslySetInnerHTML={
                       {__html: item.content}
                    } /> 
                    </details>
                )
            })
        ) : null}
        </div>
        )
    } 
}

Notice the use of dangerouslySetInnerHTML – because we’re outputting HTML content from WordPress. If this can be done in other ways leave a comment below.

Styling the output with some CSS:

.wp-block-my-blocks-accordion {
    margin-bottom: 25px;
}

.wp-block-my-blocks-accordion details > summary {
    background:url('/images/arrow-down.png') no-repeat;
    background-size: 13px;
    background-position-x: right;
    background-position-y: 10px;
    font-weight: 500;
    border-bottom:1px solid #ebebeb;
    margin-bottom: 10px;
    padding-bottom: 6px;
    cursor:pointer;
}
.wp-block-my-blocks-accordion details[open] > summary {
    background:url('images/arrow-up.png') no-repeat;
    background-size: 13px;
    background-position-x: right;
    background-position-y: 10px;
} 
.wp-block-my-blocks-accordion details > summary:hover {
    opacity: 0.6;
}  
.wp-block-my-blocks-accordion details > summary > * {
    display: inline;
}

We’re simply overriding the default look of the details component – specifically the arrows. I prefer to see them in the right instead of left. Also, adding a subtle border to make it look better.

And with that in place – it should look like below when the post is saved:

There you have it. We’ve just made our own custom Gutenberg block. This was pretty fun to build – and learning about the Block API is quite straightforward. It’s very much like classic React – but simpler.

Be sure to leave your thoughts below.

The post How to create an Accordion Block using React and WordPress’ Block API appeared first on Michael Soriano.

FluentUI uses React under the hood, so the tutorial below is meant for React developers. A preview of how the search works is shown below.

Ready to code? Let’s begin.

Getting the items

So assuming you’re getting you list of items via fetch, you’re most likely going to have an “init”. In React, this is done using the useEffect hook – with an empty dependency array. We’re also setting a couple of getters and setters using state:

const [ links, setLinks ] = React.useState<LinkType[]>([]);
const [ allLinks, setAllLinks ]= React.useState<LinkType[]>([]);

useEffect(()=>{
   (async()=>{
       const items  = await fetch(...);            
       setLinks(items);
       setAllLinks(items);
     })()
 },[])

You’re probably wondering why we have two states “links” and “allLinks”. This is to store the “unfiltered” set of items (allLinks) on which we do a search on – while the results will be in “links”.

So this will load our items in our display when we first load our UI.

The Text input

Now let’s add a text input. You will realize that the HTML are all different – because they’re not regular HTML at all. Instead, they’re a bunch of wrappers designed by FluentUI in which we simply just have to learn what we can pass into it.

In our case, we’re passing an icon (a magnifying glass), a placeholder, some styles and an onChange event to the “TextField” component:

<TextField 
   iconProps={{ iconName: 'Search' }} 
   placeholder="Search for a link..." 
   onChange={doSearch} styles={getStyles}  />

I want to first focus on the getStyles function below. Notice that it just returns an object that contains CSS props as an array – for the nodes you want to target. Think of it as in regular HTML, when you design an input – you’d have to add a “label”, “fieldGroup”, “input” etc.

function getStyles(props: ITextFieldStyleProps): Partial<ITextFieldStyles> {
         return {
          fieldGroup: [
            { 
                marginTop : '15px',
                marginLeft : '8px',
                borderColor : '#c0c0c0',
                maxWidth: '224px',
            }
          ],
          subComponentStyles: {
             label: { ...labelstyles },
           },
        };
      }

You’ll be seeing a lot of this type of API throughout.

Let’s also add another state for the searchTerm:

const [ searchTerm, setSearchTerm ] = React.useState<string>('');

Add a function “doSearch” so we can tie it with our TextField’s onChange event. Every time we change it, it should update our state:

const doSearch = (e, val) : void => {
   setSearchTerm(val);   
}

Now let’s create another effect, that will filter our items:

useEffect(()=>{    
        if(searchTerm === ''){
            setItems(allLinks);
        }else{
            const filtered = allLinks.filter(link => {
                const title = link.Title.toLowerCase();
                return title.indexOf(searchTerm) !== -1;
              }).map(link => {
                return {
                  ...link, 
                  Highlighted : highlightTerm(searchTerm, link.Title)
              }})
            setItems(filtered); 
        }
 },[searchTerm])

One quick note is the dependency array – we have “searchTerm“. So this triggers every time our state changes. So if there is no term – we reset the items to “alltems”, otherwise – we do a “filter” on our items array.

The search algorithm is just a basic string match – which can be greatly improved. But that’s not the focus of this tutorial.

You’ll also notice a .map – where we add a “Highlighted” property. That comes next.

Highlighting the term

It’s always a nice touch to highlight the search term in the results. This is a little helper that is called to wrap the term in a “mark” tag – so we can style it.

export function highlightTerm(term : string, src : string) : string {               
    if(term && src){
      term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
      const pattern = new RegExp(`(${term})`, "gi");
      src = src.replace(pattern, "<mark>$1</mark>");
      src = src.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");
      return src;
    } 
    return src;
}

Now that all our elements are in place, its time for the display.

Displaying the results

This section should be really familiar – its just a map that returns some JSX:

{links.map(link => {
      return (
         <div dangerouslySetInnerHTML={{__html:item.Highlighted}}/>
      )
 })}       

Notice the use of dangerouslySetInnerHTML – that’s because we want our “mark” which is HTML to show.

This is as simple as it gets. As mentioned before – the actual search mechanism can be better. I also would like to see some “loading” mechanism – for instances that the data takes long to fetch. And of course – some error handling would be good.

Leave your thoughts below.

The post Let’s write a simple search component using React and FluentUI appeared first on Michael Soriano.

Nobody likes waiting for stuff to load. And no – loading spinners is not a solution.

Of course, you can cache the responses in the backend. But that means either you have to use some kind of storage in the server – such as a database This solution caches the responses in the client’s browser – using sessionStorage.

It is not unusual to see code like this:

useEffect(()=>{
    (async()=>{
       let data : FeedType = {}
       const resp = await fetch(`/get-feed/${id}`)
       data = await resp.json(); 
       setData(data)
    })();
},[])

Wouldn’t it be great if it doesn’t do the fetch to the backend at all?

Remember, this is only recommended if your application doesn’t require real time data. If you can afford to serve cached data (say 15 mins) – then this solution is for you.

First, let’s write the cache to sessionStorage.

useEffect(()=>{
    (async()=>{
       let data : FeedType = {};
       const resp = await fetch(`/get-feed/${id}`);
       data = await resp.json(); 
       
       const currentTimeStamp = Math.floor(Date.now() / 1000);
       data.cacheSet = currentTimeStamp;
       sessionStorage.setItem(`id-${id}`, JSON.stringify(data));


       setData(data)
    })();
},[])

Right after we get the data from the backend we write to sessionStorage with a unique key. This key is necessary for later retrieval. We’re also adding a timestamp on when we created the cache – this will come in handy for later.

Let’s create a function that gets the cache:

const getCache = (id : number) : {isCacheGood : boolean, data : FeedType} => {
    let isCacheGood = false;
    let data : { cacheSet ?: number}= {};
    const currentTimeStamp = Math.floor(Date.now() / 1000); 
    const threshold = 900; //15 minutes   
    const cacheStr = sessionStorage.getItem(`id-${id}`); 
  
    if(cacheStr){ 
        data = JSON.parse(cacheStr);
        if(data.cacheSet){
            const numSeconds = Math.abs(currentTimeStamp - data.cacheSet);
            if(numSeconds < threshold){
                isCacheGood = true;
            } 
        }
    }
    return {
        isCacheGood : isCacheGood,
        data : data
    }
}

As you can see, just a simple function that gets the sessionStorage with our unique key. It also converts the JSON string back to an object for consumption later. Also, the logic for checking if the cache is good is in here. It return true if its less than the threshold we set (in our case 15 minutes).

Now, let’s modify our code to not fetch when cache is found and good:

useEffect(()=>{
    (async()=>{
       let data : FeedType = {};

       const dataFromCache = getCache(id);
  
       if(dataFromCache.isCacheGood){
          data = dataFromCache.data
       }else{
          const resp = await fetch(`/get-feed/${id}`);
          data = await resp.json(); 
          const currentTimeStamp = Math.floor(Date.now() / 1000);
          data.cacheSet = currentTimeStamp;
          sessionStorage.setItem(`id-${id}`, JSON.stringify(data));
       }

       setData(data)
    })();
},[])

So now, we first check if cache is good and use it for our data. Otherwise, we do a fetch – and write to cache.

What about invalidation?

Good question. We don’t want to keep writing to cache and not clean up right? The good thing is, sessionStorage automatically gets cleared once the user closes the browser session. Also, remember the unique key that we set – well, that keeps getting overwritten – if its the same response.

Let me know your thoughts below.

The post Use sessionStorage for caching data from your backend API appeared first on Michael Soriano.

Disclaimer: This tutorial will not show how to make this component, instead we’ll go through how to hook it up to the backend. I’m also going to assume you know React and databases.

Ready to get started? Let’s go:

We’re using Mantine’s MultiSelect – which has a pretty consistent api – with other mutli selects out there. I also like Mantine’s accessibility, and its simplicity. We’re also using Prisma for our ORM – which makes it super easy to interact with our tables in the backend.

The Data / Tables

For this application, I have a main table called “Dish”. This is where we will connect our “Categories”. But for this work, we will need a “many to many” relation – so we will need a 3rd table – we’ll call it CategoriesOnDishes.

Below is the schema for tables.

model Dish {
  id          Int                   @id @default(autoincrement())
  title       String
  ...
  categories  CategoriesOnDishes[]
}

model Category {
  id          Int                  @id @default(autoincrement())
  name        String
  default     Boolean?
  dishes      CategoriesOnDishes[]
}

//THIS IS THE LOOKUP TABLE
model CategoriesOnDishes { 
  dish       Dish     @relation(fields: [dishId], references: [id], onDelete: Cascade)
  dishId     Int
  category   Category @relation(fields: [categoryId], references: [id])
  categoryId Int
  @@id([dishId, categoryId])
}

Notice our “lookup table” is simply the connecting table for both main tables. This way we can assign multiple ids to each other.

The MultiSelect Component

Looking at Mantine’s documentation, our component simply takes in an array of objects, with 2 properties: value and label:

We also have access which values the user selected – which is simply an array of strings. With this in mind, we can go ahead and build our app.

Get the categories

We’re using NextJS – so we can create API endpoints and interact with our database. We wouldn’t be able to achieve this with only client side code. With NextJS – we have the luxury of both, in one codebase – how nice is that.

In our endpoint, we simply check the method for “GET” and bring back the categories for selection in our component:

if(req.method === 'GET'){ //THIS IS FOR GETTING THE VALUES FOR THE SELECT
    
        let data  : Categories[] = [];
        data  = await prisma?.category.findMany() as Categories[];

            const uniqueValuesSet = new Set();
            
            //REMOVE DUPLICATE NAMES... 
            data = data.filter((item)=>{ 
                const isPresentInSet = uniqueValuesSet.has(item.name);  
                uniqueValuesSet.add(item.name);         
                return !isPresentInSet;
            })
        }
        return res.status(200).json({ categories : data  })
    }

Notice that we have a remove duplicates section – this is optional. In my application, there could be duplicates due to the categories are based on each user / dish.

The Component

Now in the front end, we add the component to our form. You will notice a lot of this code doesn’t show the entire thing. I have greatly trimmed it down – only to highlight the important parts.

function CategorySelect( props:any) {
    const [ catOptions, setCatOptions ] = useState<any>();

    useEffect(()=>{
        (async()=>{
            const resp = await fetch('/api/lookups');
            let { categories } = await resp.json(); 
           
            let parsedCats = categories.map((cat:any)=>{
               return {
                    value : cat.name,
                    label : cat.name
                }
            })
            setCatOptions(parsedCats);
        })()
    },[])

  return ( 
        catOptions ? 
        <MultiSelect
            mb="sm"
            label="Categories"
            data={catOptions}
            placeholder="Select or type categories"
            searchable
            creatable
            getCreateLabel={(query) => `+ Create ${query}`}
            onCreate={(query) => { 
                const item = { value: query, label: query };
                setCatOptions((current:any) => [...current, item]);
                return item;
            }}
            />
         : null 
  );
}
export default CategorySelect;

Above will set up our input to have data. As soon as you focus – you will see the list appear in the bottom. And as soon as you start typing – and what you typed is not in the list, a “Create XXX” appears in the bottom – all you have to do is select it.

How cool is that!

Inserting, Updating and Deleting Records

Now back to our API, we will add the logic that will allow us to insert, update and remove records. Remember, we only have an array of strings – so we are writing our logic based on that.

 try{
        const dataFromPost : string[]= req.body.data; 
        const dishId = req.body.id;
        
        //FIRST FIND CATIDS FROM ARRAY OF STRINGS 

        const foundData = await prisma?.category.findMany({
            where : {
               name : { in: dataFromPost }
            }
        }) as Categories[];

        const foundDataStr : string[] = [];
        let newEntry : string[] = [];
        let entryIds : number[] = []; 
        
        foundData?.map((item)=>{
            entryIds.push(item.id);
            foundDataStr.push(item.name);
        })
        
        //PUT NEW CATEGORIES TO BE INSERTED IN A TEMP ARRAY FOR NOW...
        newEntry = dataFromPost.filter((item)=>!foundDataStr.includes(item))
        
        // CHECK IF CAT ID && DISHID EXIST IN LOOKUP...

        const existingLookup = await prisma?.categoriesOnDishes.findMany({
            where : {
            dishId : dishId, 
            }
        })

        // ACTUAL CATS TO BE DELETED FROM LOOKUP
        let itemIdsToDelete : number[] = [];   
        
        // REMOVING CATS TO PREVENT DUPLICATE INSERT TO LOOKUP
        let itemIdsToRemove : number[] = [];  
        
        foundData?.forEach((item)=>{
            if(!dataFromPost.includes(item.name)){
            itemIdsToDelete.push(item.id)
            }
        }) 
        
        existingLookup?.forEach((item : any)=>{
            if(entryIds.includes(item[lookupItemIdKey])){
               itemIdsToRemove.push(item[lookupItemIdKey]);
            }else{
               itemIdsToDelete.push(item[lookupItemIdKey]);
            }
        })
        
        // REMOVE EXISTING LOOKUPS...     
        entryIds = entryIds.filter((id)=>{
            return !itemIdsToRemove.includes(id);
        })
        type newEntryType = {
           name:string,
           userId:number, 
           description?:string, 
           default:boolean}

        // INSERT NEW CATEGORIES, ADD IDS TO CATIDS...
        if(newEntry.length > 0){
            let newEntryObj : newEntryType[] = []; 
            newEntryObj = newEntry.map(item=>{
            let obj : newEntryType= {
                name:item,          
                default : false           
            }
                return obj
            })
            const itemsInserted = await prisma?.category.createMany({ 
                data: newEntryObj, 
            })
            
            if(itemsInserted){
                const itemsInsertedResult = await prisma?.category.findMany({
                where : {
                userId : curUser.id, 
                name : { in: newEntry },
                }
            })
            
            let itemsInsertedIds : number[] = [];
            itemsInsertedResult?.forEach((item : any)=>{
                itemsInsertedIds.push(item.id)
            })
            if(itemsInsertedIds){
                entryIds = entryIds.concat(itemsInsertedIds);
            }
            }   
        } //end if catsinserted...  
      
        
        //INSERT TO LOOKUP TABLE...
        const itemOnDishes = entryIds.map((item)=>{
            return {
            dishId : dishId, 
            [lookupItemIdKey] : item
            }
        })

        //DOES NOT RETURN THE IDS!!!!
        await prisma?.categoryOnDishes.createMany({ 
            data: itemOnDishes, 
        }) 
        
        //DELETE ITEMS FROM LOOKUP
        if(itemIdsToDelete.length > 0){
            await prisma?.categoryOnDishes.deleteMany({
               where: {
                 categoryId :{ in: itemIdsToDelete }, 
                 dishId : dishId
               },
            })
        }      
        return res.status(200).json({ success: true}) 

}catch(err){
    return res.status(500).json({ error: JSON.stringify(err)})  
}

A lot going on here. First we check if categories exist in our category table. If it does, let’s save the ids in a temp array. We are also saving the ones that are not in the table – these are the “new items” that we have to insert.

We’re also figuring out which ones are existing in the lookup table – which is not found in the submitted array of strings. These are the lookups we have to delete.

Finally, we are simply returning “success : true” for now. Ideally, you will return the ids of the records you’ve updated. But at the time of writing, one of Prisma’s methods – specifically createMany() doesn’t return the ids. For the sake of simplicity – we just return “true”.

Back to the Component

Okay, back to the front – let’s finish up our connect the dots. I’m only showing the necessary parts – that we need to add to our component. The comments below should show you how it works, and what its for.

//DONT FORGET THE STATE:
const [ selectedCats, setSelectedCats ] = useState([]);
const categoryChanged = (val:any) => {
        setSelectedCats(val);
    }
//THIS IS THE METHOD THAT CALLS OUR API...
const upsertMultiSelects = async (url:string, data:string[], id:number)=>{        
        const options = {
            method: 'POST',
            ...getHeaders(null), 
            body : JSON.stringify({data,id})
        }
        const resp = await fetch(url, options)
        const res = await resp.json();
    }

//ADD THIS TO THE FORM SUBMIT HANDLER:

upsertMultiSelects(`/api/lookups`,selectedCats,result.id);


//ADD THIS TO THE COMPONENT PROPS:
value={selectedCats} 
onChange={categoryChanged}

With all that in place, you can wire it up to your form’s submit function. This approach is a separate method to calling the updating of the lookup and category table. But you can of course – bunch it all up along with the rest of the fields on your form – into a single REST call.

Final Result

Now if all of that works, you should be able to save your changes. Remember, the front end will work the same as before – its the saving to the database – is what we went through.

Go ahead and save your form – and hit refresh. If all goes well, your data will be preserved – and you can continue with your day.

The post Code a multi-select input with Mantine, Prisma and NextJS appeared first on Michael Soriano.

Let me explain.

Most front end developers know, React is king at the moment. There are many things to love about React, but there are also many things that people don’t like. But why stick to React? While there are countless alternatives out there like Svelte, VueJS, SolidJS?

Well for me – its the ecosystem. There are thousands of components, design systems, plugins for React – that will make your development so much faster. A major feature is just an npm install away.

What’s one of the most important thing that is missing from Solid? It’s the meta framework. The ability to go “isomorphic” – combine server and client side in one codebase. The ability to write APIs, file based routing, caching – all the good stuff a full stack development environment has to offer.

A “NextJS” for Solid basically.

As you can see, these are basically what NextJS can do. The simple fact that you no longer need another server to put your server side logic in – is a big win. Also, having the “fine grained” reactivity is what makes SolidJS so attractive. Also, fixing the stuff we’re not particularly crazy about in React.

So what to build next?

I am thinking of re-doing my Shopping Cart code in SolidStart. If you think about it, an e-commerce website will always need to be “SEO” friendly. So you will need that HTML rendered by the server. I would also like to redo that in TypeScript.

I was also considering a Job listing website. With features like – applicants can upload a PDF resume and it automatically pre-fills the required fields. For the database, I’ve been working with Prisma + PostgreSQL and have fallen in love with it – so I think I’ll stick with that.

I just wish there was more SolidJS design systems out there. Something like a Mantine or Chakra for SolidJS. If you guys know of any, please leave a comment below.

The post Just in: SolidStart is in Beta – Now what to build? appeared first on Michael Soriano.

Note that if you want to simply download the code – head on to Github. If you’d like to see the working demo, click the button below.

View Demo

Otherwise, let’s continue from where we left off:

Display a single Product

So when clicking a product – all we get is a blank screen with the slug. Open the file Product.jsx and start by creating our signals.

import { useParams } from "solid-app-router"
import { productList } from '../data/productList';

export default function Product(){
    const ALLPRODUCTS = productList.slice();
    const [ product, setProduct ] = createSignal({});
    const params = useParams();

    ... 
}

First we’re importing our static list and creating a constant for us to use. We’re also creating a signal called product – which will hold the current focused product – depending on the slug from the url.

Let’s add an onMount() to show a single product.

 onMount(()=>{
        let productArr = ALLPRODUCTS.filter((item)=>{
            return item.slug === params.slug;
        })
        if(productArr.length === 0){
            alert('HANDLE ERROR');
        }else{
            setProduct(productArr[0])
        }        
 })

All this does is setting up a single product on mount. We’re just alerting an error when a product is not found – we can improve this later.

We’re also going to add some options before adding items to the cart. This will be the “quantity” and the “size” of the product.

Still in Product.jsx – I’m just going to show the important parts below. I will omit the bootstrap HTML to save space.

import { createSignal, For, onMount } from "solid-js";
import { Button, Card, Col, Container, Form, FormLabel, Row } from "solid-bootstrap";

export default function Product(){
  ...
  const [ selectedSize, setSelectedSize ] = createSignal('');
  const [ quantity, setQuantity ] = createSignal(1);
  const [ btnDisabled, setBtnDisabled ] = createSignal(true);
  ...
  return (
        <Container class="mb-5 mt-5 row inner-wrap">        
           ...
            <Form.Select name="size" value={selectedSize()} onChange={changeHandler}>                        
                 <For each={product().sizes}>
                   {size=><option value={size}>{size}</option>}
                 </For>
                 </Form.Select>
           ... 
            <Form.Select name="quantity" value={quantity()} onChange={changeHandler}>
           ...
           </Form.Select>    
           ...        
           <Button disabled={btnDisabled()} value={product().id} onclick={addToCart}>Add to Cart</Button>                    
        </Container>       
    )

So we’re adding more signals – for the two input fields that we need – which is the size and quantity. And since both are required fields, we’re setting the Button to disabled first, then when both values are not empty – we enable it. We do this by adding a “createEffect()”:

...
createEffect(()=>{
        if(selectedSize() !== '' && quantity() !== ''){
            setBtnDisabled(false);
        }else{
            setBtnDisabled(true);
        }
})

Now take a look at our button and try changing the inputs:

Adding to Cart

Let’s move on the addToCart() logic. Now adding is pretty straightforward – but let’s remember, you don’t want to keep pushing to the cart items array – because what if the item is already in there? In that case you want to just update it.

function addToCart(){
        let productToAdd ={
             ...product(), 
            size : selectedSize(),
            quantity : quantity()
        
        }; 
        let items = cartItems.slice();
        let foundIndex, found;
        found = items.filter((item,ind)=>{            
            if(item.id === productToAdd.id 
                && item.size === productToAdd.size){
                    foundIndex = ind;
                    return item
                }
        })

        let msg = '';
        if(found.length > 0){
            msg = 'Item updated in cart';
            let productToUpdate = {
                ...found[0], 
                quantity : productToAdd.quantity, 
                subtotal : productToAdd.quantity * productToAdd.price
            }
            items.splice(foundIndex, 1, productToUpdate); 
        }else{
            msg = 'Item added to cart';
            productToAdd.size = selectedSize();
            productToAdd.quantity = parseInt(quantity());
            productToAdd.subtotal = productToAdd.quantity * productToAdd.price;
            items.push(productToAdd);
        }
        setCartItems(items);
        setToastMessage(msg);
}

A quick run down of what’s going on above, we’re simply rebuilding the cartItems array (which is a central store), so we can display it in our cart. As mentioned, we’re trying to see if an item is already in the cart “productToUpdate” by checking if its the same product and size. If it is, we’re simply updating the quantity and subtotal. If it’s not existing “productToAdd“, then we simply push to the array.

We’re also setting a toast message to display a small notification after they update the cart.

Really quick – let’s add a small bubble to the “Cart” link in our header. Remember how “cartItems” is accessible in all of our components?

import { setShowCart, cartItems } from '../App';
...
<Nav.Link class="cart-link" onClick={setShowCart(true)}>Cart 
                    { cartItems.length > 0 
                    ? <span class="cart-item-indicator">{cartItems.length}</span> 
                    : null }</Nav.Link>

So above is a simple span tag that shows up if there’s items in our cart. Note that I’ve stuffed the CSS in index.html for simplicity – just grab it from the repo.

Let’s see how it looks so far:

Let’s now move on to our Cart component and display our items.

Display Cart Items

Remember in Part 1 – we’ve created an “OffCanvas” component called “Cart“? Let’s add some code to it that will show us our cart items. First, let’s import cartItems and let’s create a signal for the total. We’re also going to create an effect – so that every time cartItems change, our total reacts with it.

import { createEffect, createSignal, For } from "solid-js";
import { cartItems } from "./App";
...
const [total, setTotal ] = createSignal(0);
...

export default function Cart(){
    createEffect(()=>{
        let ttl = 0;
        cartItems.forEach((item)=>{
            ttl = ttl+item.subtotal;
        })      
        setTotal(ttl);
    })
}

The HTML simply loops through our cartItems and shows the details of each cart item:

<For each={cartItems}>
            {(product)=>{
                return (
                    <Row class="mb-4">
                        <Col xs="3">
                            <Image src={product.image} class='thumbnail' /> 
                        </Col>
                        <Col xs="9" class="cart-item-text">
                            <h6>{product.name}</h6>
                            <p><span>{product.size}</span></p>
                            <p class="price-row">
                                <span>${product.price.toFixed(2)} (x{product.quantity})</span>
                                <span>${product.subtotal.toFixed(2)}</span>
                            </p>
                        </Col>    
                    </Row> 
                )
            }}
        </For>

Note that there are optimal ways to handle the calculation of the totals. For instance, we’re simply doing a “toFixed()” – to make the display of the totals better. But in reality, you’d want to calculate decimals etc. Again, we’re keeping it simple for now.

Let’s see how our cart looks.

Edit / Remove Cart Items

Finally, let’s look at the cart experience. You’d want to let your users edit the cart items directly. Most likely, the ability to adjust the quantity of an item – and of course, remove it entirely.

In our CartItems component, let’s add the buttons in the HTML.

<button  value={ind()} onClick={evt=>removeItem(evt)}>x</button>
...
<span>
    <button value={ind()} onClick={evt=>updateQuantity(evt,'add')}>+</button>
      {product.quantity}
    <button value={ind()} onClick={evt=>updateQuantity(evt,null)}>-</button>
</span>

Notice the two handlers that we’ve attached the buttons with (updateQuantity and removeItem) – we’ll get to that in a bit.

Let’s add a bit of styling to our newly added buttons.

 .cart-item-text button {
        border: 1px solid #ccc;
        color: #0a0909;       
        border-radius: 4px;
        margin-left: 5px;
        margin-right: 5px;
        font-size: 12px;
        height: 16px;     
        line-height: 9px;
        padding-bottom: 2px;
} 

Taking a quick look at how our buttons look – I say its not too shabby eh?

Now clicking on each button doesn’t do anything yet. Let’s fix that.

Let’s start by creating the updateQuantity() function:

function updateQuantity(evt,method){
     evt.preventDefault();
     const index = parseInt(evt.target.value);         
     let temp = cartItems.map((item,i)=>{
         if(index === i){
             if(item.quantity === 1 && !method){
                 return {...item};
             }
             const qty = method === 'add' ? item.quantity + 1 : item.quantity - 1;
             const subtotal = item.price * qty;
             return {
                 ...item,
                 quantity : qty, 
                 subtotal : subtotal
             }
         }else{
             return {...item};
         }            
     })
     setCartItems(temp);     
}

Going through the code above, first – we prevent default to stop the default behavior of the button. Then we grab the index of the clicked item, so we know which item in the cartItems array will be updated.

Now we do everything inside a map() function. We’re basically checking if its the right index, otherwise, we simply return the item. If it is the right index – we do our calculation. Depending if the operation is a “sum” – we increment, or decrement if its not.

Finally, let’s build the removeItem() function:

function removeItem(evt){
     evt.preventDefault();
     const index = parseInt(evt.target.value);    
     let items = [...cartItems]; 
     items.splice(index,1)
     setCartItems(items);
 }

This function is pretty simple. We just do a splice – for the clicked index to remove it from the array.

Below shows how our newly created buttons behave:

You can see, everything is reacting to our updates accordingly. Not only the quantity, as well as the subtotals and the total.

Conclusion

There you have it. A simple Shopping Cart application built on SolidJS and Bootstrap. Hopefully by going through this tutorial, you can truly see how SolidJS’s reactivity works.

So what’s the verdict? Is SolidJS better than React?

I think it is.

It is definitely a lot cleaner and much more intuitive to write. I am glad that they kept the good parts of React, and addressed the most annoying parts. I hope to see a lot more SolidJS in the future.

What’s your experience with Solid? Leave your comments below.

The post Let’s build a Shopping Cart website with SolidJS and Bootstrap – Part 2 appeared first on Michael Soriano.

Now don’t get me wrong – I like React. I think functional components, JSX, hooks – are all good things. But there are a few quirks that I wish was different.

View Demo

I recommend going through Solid’s website and finding out for yourself. I’ve also decided to use Bootstrap for the CSS framework because its what’s available. Note that there are hardly any pre-built CSS components available for Solid at time of writing. I do hope this will change in time – because I honestly like Solid so far.

So let’s give this a go. We’re building a shopping cart website. One with a product listing page, complete with filters. We’ll add a single product page and a global store where the cart lives. And finally, we’ll add routes so we can access parts of the application through a bookmarkable url.

Here’s a quick preview of what we’re building:

Ready to start? Let’s begin.

Setting things up

Note that I will skip the installation parts – simply clone and run npm install. The Github repository found here. You can also checkout the demo which can be accessed through this link.

Let’s start with the routes. We’re going to keep things simple – with just 2 routes: Products and Product. The products (which is also the homepage) simply lists all the products we have, and the Product – will show the product detail when clicked.

In index.jsx, let’s wrap our App inside a Router component:

import { render } from 'solid-js/web';
import { Router } from 'solid-app-router';
import App from './App';

render(
    () => 
        ( <Router>
         <App />
       </Router> ), document.getElementById('root'));

Now let’s move on to App.jsx. Let’s add the two routes that we talked about:

import { lazy } from "solid-js";
import { Routes,Route } from 'solid-app-router';
import { Container } from "solid-bootstrap";

const Product = lazy(() => import("./routes/Product"));
const Products = lazy(() => import("./routes/Products"));

function App() {
  return (
    <Container class="pb-5">      
      <Routes>
        <Route path='/' element={<Products />}   />
        <Route path="/:slug" element={<Product />} />
      </Routes>
    </Container>
  );
}
export default App;

Let’s also go ahead and create a folder called “routes” and add two components inside it. Name them Products.jsx and Product.jsx

//this is Products.jsx:
export default function Products(){
    return (
        <div class="products-page mb-5 mt-5 row">
        <h3 class="mb-5">Products</h3>
        <div class="col-md-3">
            Filters
        </div>         
        <div class="col-md-9 d-flex flex-wrap gap-4">        
            Product List     
        </div>       
        </div>
    )
}
//this is Product.jsx:
import { useParams } from "solid-app-router"
import { Container } from "solid-bootstrap";

export default function Product(){
    const params = useParams();
    return (
        <Container class="inner-wrap  mb-5 mt-5 row">
            <h3 class="mb-5">Single product - slug: {params.slug}</h3>
        </Container>       
    )
}

Not a lot going on here, but we’ve setup our website with the minimum routes necessary. Let’s see what we have so far:

Let’s also add a header and footer – to make our website look nicer. Note that the header and footer code are all boilerplate code from Bootstrap – so don’t pay too much attention to them. Just keep note of the “Cart” button in the header – we’ll use this to hide/show our cart.

//this is Header.jsx
import logo from '../logo.svg';
import { Link } from 'solid-app-router';
import { Navbar, NavDropdown, Nav, Container } from 'solid-bootstrap';

function Header(){
    return (
        <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
            <Container>
            <Navbar.Brand>
            <Link href='/' class="no-underline color-white">
                <img class="me-2" src={logo} width="30" height="28" alt="logo" />
                Shopping Demo
            </Link>            
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">                
                <Nav>
                <Nav.Link>Cart</Nav.Link>
                </Nav>
            </Navbar.Collapse>
            </Container>
        </Navbar>
    )
} 
export default Header;

//this is footer
import { Container } from "solid-bootstrap";

export default function Footer(){
    return (
        <footer>
            <Container>Solid JS works!</Container>
        </footer>
    );
}

Now things are starting to shape up.

Now that our website frame is in place, we can start filling it up with some data and add some structure.

Add the Products

For our demo purposes, we’re just going to add static data to populate our products. You will probably add yours from an API of some sort. For now, add a static file called productList.js – with an array of objects like so:

[
 {
        id: 'prod_LbfpnuB1dc81pW',
        description : 'Lorem ipsum dolor sit amet...',
        name: 'Black Jacket',
        price: 50,
        currency: 'USD',
        image: 'https://images.unsplash.com...',
        slug : 'black-jacket', 
        category : ['Formal','Casual']
    },
    ...
]

Now back in App.jsx let’s create a store for our products and add the product list above:

import { productList } from "./data/productList";

...

export const [products,setProducts] = createStore(productList);

We’ve added this to App.jsx and exported it – so we can use our products globally. You can choose to add this store into a separate file – but for the sake of simplicity, I just added it here.

Now let’s display the products in our HTML.

import { For } from "solid-js";
import { products } from "../App";
import { useNavigate } from "solid-app-router";
import { Button, Card, Col } from "solid-bootstrap";

function ProductTile({product}){
    const navigate = useNavigate();
    return (
         <Col class="col-md-3">
            <Card>
            <Card.Img variant="top" src={product.image} />
            <Card.Body>
                <Card.Title>{product.name}</Card.Title>
                <Card.Text class="lt-clamp-3">
                    {product.description}
                </Card.Text>
                <Button variant="primary" onclick={()=>{navigate(`/${product.slug}/`)}}>Details</Button>
            </Card.Body>
            </Card>             
         </Col>
    )
}

export default function Products(){
    return (
        <div class="products-page mb-5 mt-5 row">
        <h3 class="mb-5">Products</h3>
        <div class="col-md-3">
            Filters
        </div>         
        <div class="col-md-9 d-flex flex-wrap gap-4">        
        <For each={products}>            
            {product => <ProductTile product={product} /> }
        </For>         
        </div>       
        </div>
    )
}

A few things to note in the code above. Notice the “For” component. This is specific to how Solid does it’s for loops in JSX. Although you can still use a .map() – but I thing having this is much cleaner.

Now try clicking the “details” and it should route to our single page.

Add Product Filters

Let’s add a simple filter mechanism for our products. If you notice in our fake data, each product has a category node – which is an array of categories. From this we can build our filters.

Let’s create another component called Filters.jsx. In it, add the following code:

import { createSignal, onMount } from "solid-js";
import { productList } from "../data/productList";
export default function Filters(){
    
    const ALLPRODUCTS = productList.slice(); //making copy so doesnt mutate
    const [filters,setFilters] = createSignal([]); 
   
    return (
        <For each={filters()}>
        {(filter)=>{               
            return (
                <div class="form-check">
                <input class="form-check-input" 
                    type="checkbox" 
                    value={filter.name} 
                    id={filter.name} 
                    checked={filter.checked} 
                     />
                <label class="form-check-label" for={filter.name}>
                    {filter.name}
                </label>
                </div>
            )
        }}
        </For>
    )
}

Okay so a few things going on in this file. First, notice that we’re bringing in the static list of products – we’re assigning it to a constant “ALLPRODUCTS” for later use. Also, note the signal we’ve created by using createSignal(). This is basically equivalent to React’s useState(). This is how things become reactive.

Notice that we have 2 contsants, “filters” and “setFilters” – which is basically a getter and a setter. We’re setting it to an empty array for now.

Add an onMount() function – to build our filters and set it using our setter.

 onMount(()=>{
        let filterList = [];
        ALLPRODUCTS.forEach((product)=>{
            product.category.forEach((cat)=>{
                let found = filterList.some(function(el) {
                    return el.name === cat;
                });
                if(!found){
                    filterList.push({name:cat,checked:false});
                }                
            })
        })     
        setFilters(filterList); 
    })

I really like Solid’s onMount() lifecycle hook – which is equivalent to React’s useEffect() with no dependencies. So it basically just runs once (on mount) – and it really only runs once (not like useEffect()). So inside this hook, we’re looping through the product categories and creating a unique array of objects out of it.

Each object is looped through our JSX – building our checkboxes like below:

Of course, nothing happens yet when you click it – that’s because we haven’t written the handler for it yet.

Add the following code for our click handler:

function filterChangeHandler(evt){
        setFilters(
            filters().map((item)=>{
                return item.name === evt.target.value ? {...item,checked : evt.target.checked} : {...item}; 
            })
        );
        return false;
 }

...

//on the checkbox input add this:
onChange={filterChangeHandler}
//it should look like this:
<input class="form-check-input" 
                    type="checkbox" 
                    value={filter.name} 
                    id={filter.name} 
                    checked={filter.checked} 
                    onChange={filterChangeHandler} />

Now upon clicking – it really doesn’t do anything yet, it just updates our “filters” array to mark which categories are “checked”. So if you console log our filters array – it should look like below:

Our filters array are now being updated – with the checkboxes that we’ve clicked. Now let’s update the DOM with the information we have. We do that by using “createEffect()“.

//add another import: 
import { setProducts } from "../App";

//add this to the component:
createEffect(() => {
        let filterArr = []; 
        filters().forEach((item)=>{
            if(item.checked){
                filterArr.push(item.name);
            }
        }) 

        if(filterArr.length === 0){       
            setProducts(ALLPRODUCTS);
        }else{
            let filteredProducts = ALLPRODUCTS.filter((item)=>{
                let found = item.category.some((cat)=>{
                    return filterArr.includes(cat);
                });
                if(found){
                    return item;
                }
            })
            setProducts(filteredProducts);
        }

    });

So effects are what’s know as “observers” in Solid. We use createEffect() – to track changes in our signals. Again, its the same as useEffect in React – but with a few notable differences. One in particular is not having to list the dependencies – which is quite annoying. Solid’s createEffect – simply knows what signals to observe.

So in our example, we’re really tracking changes in our filters array. It changes on mount, and every time we click the checkboxes.

So every time they change – we “react” by changing the listed products.

As you can see, our products are really starting to shape up. We can of course do a little more by adding a search and paging – but let’s keep it simple for now.

Add the Cart Component

Let’s wrap it up by adding a Cart component. It won’t contain logic yet, but more of a placeholder for the contents of our shopping cart. Create a Cart.jsx component and simply add the HTML below:

import { Offcanvas } from "solid-bootstrap";
import { showCart, setShowCart } from "./App";

export default function Cart(){  
    return (
        <>
        <Offcanvas
            show={showCart()}
            onHide={()=>{setShowCart(false)}}
            placement={'end'}>
            <Offcanvas.Header closeButton>
                <Offcanvas.Title>Shopping Cart</Offcanvas.Title>
            </Offcanvas.Header>
            <Offcanvas.Body>
                Some text as placeholder.
            </Offcanvas.Body>
            </Offcanvas>
        </>
    )
}

We’re using “Offcanvas” from react bootstrap – which is a sliding sidebar component. Notice we’re passing two props (showCart and setShowCart) – which we’re adding as a global state.

Let’s go back to App.jsx and export the signals and include the component we just created:

//import cart
const Cart = lazy(() => import("./Cart"));

//add signal
export const [showCart,setShowCart] = createSignal(false);

//add the component
<Cart />

Now, to show and hide the cart, we should be able to do it from any component in the application. Obviously – we’ll have an “add to cart” in the products section, but we’re not there yet.

For now, let’s add it to Header.jsx – so we can have a static “Cart” link for easy access.

//import our setter
import { setShowCart } from '../App';

//add as a handler to the click 
<Nav.Link onClick={setShowCart(true)}>Cart</Nav.Link>

Now when you click on the “Cart” link in the header, you should see our Cart component slide in and out

Okay time to stop for now. I think we’ve made good progress. If you want to capture the code at this point of the tutorial, I’ve created a tag named part-1.

Stay tuned for Part 2.

The post Let’s build a Shopping Cart website with SolidJS and Bootstrap – Part 1 appeared first on Michael Soriano.

So here are common JS snippets for data manipulation:

Find Unique Values from Array

// using SET:
let uniqueArr = [... new Set(arr)];     // MAKES NEW ARRAY
let uniqueObj = new Set(arr); 		// MAKES NEW OBJ

// not using SET 
let uniqueArray = arr.filter(function(item, pos) {
    return arr.indexOf(item) === pos;
})

Sorting Flat Arrays

arr.sort((a, b) => a - b);  // WILL SORT ASC 
arr.sort((a, b) => b - a);  // WILL SORT DESC
arr.sort()                  // WILL SORT STRINGS ASC 

Sorting an Array of Objects

arr.sort((a,b)=> a.prop - b.prop); //SORT BY VALUE OF .PROP IF NUMERIC
arr.sort((a,b) => (a.prop > b.prop) ? 1 : ((b.prop > a.prop) ? -1 : 0)); //SORT BY VALUE OF .PROP IF NOT NUMERIC

Sorting Objects by property value

This is when you have a Map (or a hash table), and you want to sort by key.

//obj is a map and you want to sort it by its property "sortProperty" and its a number 
Object.keys(obj).sort((a, b)=> obj[a].sortProperty - obj[b].sortProperty);
//if "sortProperty" is string use:
Object.keys(obj).sort((a,b) => (a.sortProperty > b.sortProperty) ? 1 : ((b.sortProperty > a.sortProperty) ? -1 : 0));  

Find number of occurrences of an element in an Array

const arr = [5, 5, 5, 2, 2, 2, 2, 2, 9, 4];
const counts = {};

for (const num of arr) {  //USE FOR OF
  counts[num] = counts[num] ? counts[num] + 1 : 1;
}
// WILL PRODUCE A MAP WITH ELEMENT (AS KEY), NUM OF OCCUR (AS VALUE)

Add/Subtract all numbers in an Array

let sum = arr.reduce((a, b) => a + b, 0); //ADD
let diff = arr.reduce((a, b) => a - b, 0); //SUBTRACT

Find Alphanumeric Chars from a String

'FT&abC3'.match(/^[A-Za-z0-9]+$/) //WILL RETURN [F,T,a,b,C,3]

Object keys and values

You don’t need to loop through objects to get an array of keys / values:

Object.keys(obj) 			// GET KEYS OF OBJECT as an array
Object.values(obj) 			// GET VALUES OF OBJECT as an array 
Object.keys(obj).length 	        //FIND LENGTH OF OBJECT (NOT ARRAY) 

Find Largest / Smallest number in Array:

Math.max(...arr);
Math.min(...arr);

Copy Arrays by value (not by reference)

let arr1 = origArray.slice();  
let arr2 = origArray.slice();
//arr1 and arr2 are complete cloned copies of origArray

The post Common JavaScript snippets for data manipulation appeared first on Michael Soriano.

We’re using React, Axios and the Media endpoint in WordPress’ REST API. First of, let’s see what we’re going to build:

We’re not going in details on how the modal or the loading gif works. We’re really focusing on the file input and the events that happen when the “Update” button is clicked.

Read to get started? Let’s begin.

First, let’s import our modules.

import React, { useState, useRef } from "react";
import axios from 'axios';

Let’s create a component called “ItemModal”, and add some HTML.

function ItemModal( { itemid } ){
    return (
        <div>
           {(()=>{
              if(img){
                return (<img src={img} alt='image' />)
              }
            })()}
           <input id="imgUpload" type="file" ref={imgUpload} onChange={previewImage}/>
           <button onClick={updateItem}>Update</button>
        </div>
    )
}

Above is a simple component that shows an image coming from our local state, an input of type “file” with a “ref” (will explain later), and a button that updates our record.

Let’s add a couple of hooks.

const imgUpload = useRef(null);
const [img, setImg] = useState('');

We need both hooks to make our elements work. We use “useRef”, to create a reference to our file input in the DOM. Also an “img” state, so we can store the “URL” of the image we’re working with.

The Update Item method

The file input works almost out of the box. Upon clicking, the OS file explorer will popup and navigate through your local files so you can select. But actually getting that file to the WordPress is what this Update method will entail.

function updateItem(){
      if(imgUpload.current.files.length > 0){
        var formData = new FormData();
        let file = imgUpload.current.files[0];
        formData.append( 'file', file );
        formData.append( 'title', file.name );
        formData.append( 'post', itemid ); //coming from props
        let headers = {};
        headers['Content-Disposition'] = 'form-data; filename=\''+file.name+'\'';
        headers['X-WP-Nonce'] = 'your nonce here...';
        axios.post('/wp-json/wp/v2/media/?featured='+itemid,formData, headers ).then(function(resp){
          getItems(); //callback to parent's this.getItems(),
        })
      }
    }

So basically, when we click our “Update” button, it triggers the above code. We’re checking if our DOM ref “imgUpload” has a file. The we create a FormData object so we can stuff it with our file details. 3 things in particular: 1) the file itself, 2) the title and 3) the post id – if you’re attaching it to a particular post / page or custom post type.

One thing to note is the custom headers that we are using. We need “Content-Disposition” – this is to tell WordPress’ API about our request, as well as “X-WP-Nonce“. Since this is only going to work when we’re authenticated, and the nonce is how WordPress handles this scenario.

You also notice in the media endpoint, we’re passing “?featured=id“. This completely optional – and only add this if you want it to be the “featured image“. You also need to add this to your functions.php file to get it to work:

add_filter( 'rest_prepare_attachment', 'attach_media_to_post',10,3);
function attach_media_to_post($response, $post, $request) {
    if($request->get_method()!='POST'){
        return $response;
    }
    $parameters = $request->get_params();
    if(isset($parameters['featured'])){
        set_post_thumbnail($parameters['featured'],$post->ID);
    }
    return $response;
}

Preview Image

Now the code above should work as is. But one thing you’ll see is when you select an image, our “img” tag remains the same as the old image – until you update it in the backend.

I want the user to see the file they selected before they even click “Update”. Well if you caught it early, our input has an “onChange” event bound to “previewImage”. That’s what its about.

function previewImage() {
      var oFReader = new FileReader();
      oFReader.readAsDataURL(imgUpload.current.files[0]);
      oFReader.onload = function (oFREvent) {
        setImg(oFREvent.target.result);
      };
    };

We’re using the same DOM ref “imgUpload”, and passing it into a “FileReader” object. And since our img tag is using our “img” state for it’s source, we simply call “setImg” to update that state.

Our selected image will show whenever we change it.

Improvements

This is a pretty barebones form / file upload component. There’s so much more we can do to improve it. For one, we need to restrict file types and file sizes. Maybe a nice error messaging when they select an invalid file.

Also, in my case, I want to delete the original image (since I don’t want it taking space in my server). So I simply add another AJAX call inside our update function (inside the successful axios.post).

Something like:

function deleteOrigImg(){
  if(origImg){
	let url = window.ONW.wp_api+'/media/'+origImg+'?force=1';
	axios.delete('/wp-json/wp/v2/media/',header).catch((err)=>{
	  handleError(context,err);
	})
  }
}

One last thing, you also would want to see the error logs when working with WordPress REST API. Now this can be cumbersome especially when working with the out of the box endpoints.

This plugin REST API Log provides an easy to use utility, so you can see what’s going on with your request / response. You’ll thank me (or the plugin author) later.

The post Create a File Uploader with React and WordPress REST API (Media) appeared first on Michael Soriano.