Wheeler

PHOTO

Fri Dec 08 2023 17:03:44 GMT+0000 (Coordinated Universal Time)

Saved by @bfpulliam #react.js

{
  "manifest": {
    "a": {
      "stylesheet": {
        "colors": {
          "primary": "black",
          "secondary": "#C89E56",
          "tertiary": "#C89E56"
        },
        "images": {
          "favicon": {
            "url": "https://cdn.myocv.com/ocvapps/a100879096/files/Badge-Icon@2x.png",
            "altText": ""
          },
          "titleImage": {
            "url": "https://cdn.myocv.com/ocvapps/a100879096/files/Badge-Icon@2x.png",
            "altText": ""
          }
        }
      },
      "homeOrder": [
        "slider",
        "featureBar",
        "welcome",
        "newsDigest",
        "jailInfo",
        "careerOp",
        "downloadOurApp"
      ],
      "baseLayout": [
        "{component}"
      ],
      "features": {
        "news": {
          "type": "newsDigestList",
          "url": "https://apps.myocv.com/feed/digest/a100879096/facebook",
          "title": "Social Media",
          "config": {
            "displayDate": true,
            "type": "newsDigestList",
            "limit": 10
          }
        },
        "contact": {
          "type": "contacts",
          "url": "https://cdn.myocv.com/ocvapps/a100879096/public/contact_contactUs.json",
          "title": "Contact Us",
          "limit": 10
        },
        "faq": {
          "type": "blogFAQ",
          "url": "https://cdn.myocv.com/ocvapps/a100879096/public/blog_fAQs.json",
          "title": "FAQ",
          "config": {
            "limit": 10
          }
        },
        "joinOurTeam": {
          "title": "Join Our Team",
          "type": "form",
          "url": "https://cdn.myocv.com/ocvapps/a100879096/public/form_joinOurTeam.json",
          "formID": "joinOurTeam"
        },
        "submitATip": {
          "title": "Submit A Tip",
          "type": "form",
          "url": "https://cdn.myocv.com/ocvapps/a100879096/public/form_submitATip.json",
          "formID": "submitATip"
        },
        "sexOffender": {
          "title": "Sex Offenders Map",
          "type": "sexOffendersMap",
          "url": "https://myocv.s3.amazonaws.com/ocvapps/a100879096/sexOffenders-TX.json",
          "config": {
            "zoom": 10,
            "clusterSize": 3
          }
        },
        "inmateSearch": {
          "title": "Inmate Search",
          "type": "feedList",
          "url": "https://apps.myocv.com/feed/rtjb/a100879096/inmates",
          "config": {
            "submitATipLink": true,
            "backgroundColor": "#eee",
            "showImage": "top",
            "blogKey": "inmates",
            "limit": 10,
            "appID": "a100879096",
            "type": "rtjb",
            "displayDate": false,
            "truncation": true,
            "sort": "nameAZ",
            "showSort": false,
            "showSearch": true
          }
        },
        "caseReport": {
          "title": "Case Report",
          "type": "form",
          "url": "https://cdn.myocv.com/ocvapps/a100879096/public/form_caseReport.json",
          "formID": "caseReport"
        },
        "closePatrolRequest": {
          "title": "Close Patrol Request",
          "type": "form",
          "url": "https://cdn.myocv.com/ocvapps/a100879096/public/form_closePatrolRequest.json",
          "formID": "closePatrolRequest"
        },
        "livestockOwnerLocation": {
          "title": "Livestock Owner/Location",
          "type": "form",
          "url": "https://cdn.myocv.com/ocvapps/a100879096/public/form_livestockOwnerLocation.json",
          "formID": "livestockOwnerLocation"
        },
        "crashReports": {
          "title": "Crash Reports",
          "type": "webview",
          "url": "https://cris.dot.state.tx.us/public/Purchase/app/home",
          "external": true
        },
        "backgroundCheck": {
          "title": "Background Check",
          "type": "webview",
          "url": "https://publicsite.dps.texas.gov/ConvictionNameSearch/",
          "external": true
        },
        "fingerprints": {
          "title": "Fingerprints",
          "type": "webview",
          "url": "https://www.identogo.com/services/live-scan-fingerprinting",
          "external": true
        },
        "civilServicesFees": {
          "title": "Civil Services Fees",
          "type": "page",
          "url": "https://cdn.myocv.com/ocvapps/a100879096/public/page_civilServiceFees.json"
        },
        "sheriffTaxSales": {
          "title": "Sheriff Tax Sales",
          "type": "page",
          "url": "https://cdn.myocv.com/ocvapps/a100879096/public/page_sheriffTaxSales.json"
        },
        "crimePrevention": {
          "title": "Crime Prevention",
          "type": "blogList",
          "url": "https://cdn.myocv.com/ocvapps/a100879096/public/blog_crimePrevention.json",
          "config": {
            "blogKey": "blog_crimePrevention",
            "limit": 4,
            "appID": "a100879096",
            "type": "blog",
            "displayDate": false,
            "truncation": false,
            "sort": "dateDesc",
            "showSort": false,
            "showSearch": false
          }
        },
        "payCitations": {
          "title": "Pay Citations",
          "type": "blogList",
          "url": "https://cdn.myocv.com/ocvapps/a100879096/public/blog_payCitations.json",
          "config": {
            "blogKey": "blog_payCitations",
            "limit": 4,
            "appID": "a100879096",
            "type": "blog",
            "displayDate": false,
            "truncation": false,
            "sort": "dateDesc",
            "showSort": false,
            "showSearch": false
          }
        },
        "jailInformation": {
          "title": "Jail Information",
          "type": "blogList",
          "url": "https://cdn.myocv.com/ocvapps/a100879096/public/blog_jailInformation.json",
          "config": {
            "blogKey": "blog_jailInformation",
            "limit": 10,
            "appID": "a100879096",
            "type": "blog",
            "displayDate": false,
            "truncation": false,
            "sort": "dateDesc",
            "showSort": false,
            "showSearch": false
          }
        },
        "recordsSubmenu": {
          "navHeader": "Records Request",
          "type": "submenu",
          "dropdown": [
            "caseReport",
            "crashReports",
            "backgroundCheck",
            "closePatrolRequest",
            "livestockOwnerLocation"
          ]
        },
        "resourcesSubmenu": {
          "navHeader": "Resources",
          "type": "submenu",
          "dropdown": [
            "crimePrevention",
            "civilServicesFees",
            "fingerprints",
            "payCitations",
            "sheriffTaxSales"
          ]
        }
      },
      "views": {
        "navbar": {
          "type": "navbar",
          "config": {
            "hideSearch": true,
            "title": "Wheeler County<br/> Sheriff's Office TX",
            "socialMedia": [
              {
                "icon": "facebook",
                "url": "https://www.facebook.com/WheelerCountySO/"
              }
            ],
            "items": [
              "contact",
              "recordsSubmenu",
              "faq",
              "resourcesSubmenu"
            ]
          }
        },
        "footer": {
          "type": "footer",
          "config": {
            "vertical": "sheriff",
            "title": "Wheeler County Sheriff's Office TX",
            "socialMedia": [
              {
                "icon": "facebook",
                "url": "https://www.facebook.com/WheelerCountySO/"
              }
            ],
            "item1": {
              "title": "CONTACT",
              "address": "7944 US-83,<br/> WHEELER, TX 79096",
              "phoneName": "Phone: ",
              "phone": "(806) 826-5537",
              "businessHours": "HOURS: 8:00 A.M. - 5:00 P.M. CST <br/>MONDAY THROUGH FRIDAY."
            },
            "item2": {
              "title": "RESOURCES",
              "options": [
                {
                  "feature": "joinOurTeam",
                  "featureText": "Join Our Team"
                }
              ]
            },
            "item3": {
              "buttonColor": "#C89E56",
              "buttonText": "DOWNLOAD OUR APP",
              "buttonTextColor": "#0F2445",
              "buttonBorderColor": "#C89E56",
              "buttonLink": "https://apps.myocv.com/share/a100879096"
            }
          }
        },
        "slider": {
          "type": "slider",
          "config": {
            "interval": 6000,
            "height": "600px",
            "media": [
              {
                "mediaURL": "https://cdn.myocv.com/ocvapps/a100879096/files/Header%203@2x.png",
                "mediaAlt": "Wheeler CSO Car"
              }
            ]
          }
        },
        "downloadOurApp": {
          "type": "slider",
          "config": {
            "interval": 6000,
            "externalURL": "https://apps.myocv.com/share/a100879096",
            "height": "600px",
            "media": [
              {
                "mediaURL": "https://cdn.myocv.com/ocvapps/a100879096/files/downloadourapp.png",
                "mediaAlt": "Download Our App"
              }
            ]
          }
        },
        "featureBar": {
          "title": "Quick Links",
          "type": "featureBar",
          "config": {
            "items": [
              {
                "title": "Submit A Tip",
                "feature": "submitATip",
                "icon": "submit"
              },
              {
                "title": "Sex Offender",
                "feature": "sexOffender",
                "icon": "personSearch"
              },
              {
                "title": "Inmate Search",
                "feature": "inmateSearch",
                "icon": "jail"
              },
              {
                "title": "Join Our Team",
                "feature": "joinOurTeam",
                "icon": "team"
              }
            ],
            "showVertical": false,
            "showHeading": true,
            "titleColor": "white",
            "headingColor": "white",
            "tileColor": "#C89E56",
            "bgColor": "#181818",
            "verticalColor": "#C89E56",
            "textColor": "white"
          }
        },
        "welcome": {
          "title": "Wheeler County Sheriff's Office TX",
          "type": "welcome",
          "characteristics": "Integrity | Professionalism | Commitment | Honesty | Trust | Respect",
          "subTitle": "As a Sheriff's Office, we value:",
          "imageCaption": "Sheriff Johnny Carter",
          "url": "https://cdn.myocv.com/ocvapps/a100879096/public/page_wEBWelcome.json",
          "config": {
            "showCaption": true,
            "titleColor": "black",
            "showSubTitle": true
          }
        },
        "newsDigest": {
          "title": "Social Media",
          "type": "newsDigest",
          "feature": "news",
          "config": {
            "titleColor": "white",
            "displayDate": true,
            "socialBar": false,
            "socialBarName": "socialBar",
            "bgColor": "black",
            "buttonTextColor": "black",
            "buttonBgColor": "#C89E56",
            "backgroundSize": "cover",
            "buttonText": "View More Posts",
            "buttonLink": "news"
          }
        },
        "jailInfo": {
          "title": "Jail Information",
          "type": "twoColumnButton",
          "url": "https://cdn.myocv.com/ocvapps/a100879096/public/page_jailInfo.json",
          "config": {
            "bgColor": "#eee",
            "textColor": "black",
            "titleColor": "black",
            "align": "center",
            "buttons": [
              {
                "buttonFeature": "jailInformation",
                "buttonText": "Learn More",
                "buttonTextColor": "black",
                "buttonColor": "#C89E56"
              }
            ]
          }
        },
        "careerOp": {
          "title": "Career Opportunities",
          "type": "twoColumnButton",
          "url": "https://cdn.myocv.com/ocvapps/a100879096/public/page_careerOpportunities.json",
          "config": {
            "row": "row-reverse",
            "bgColor": "#eee",
            "titleColor": "black",
            "align": "center",
            "buttons": [
              {
                "buttonFeature": "joinOurTeam",
                "buttonText": "Apply Now",
                "buttonTextColor": "black",
                "buttonColor": "#C89E56"
              }
            ]
          }
        }
      }
    }
  },
  "lookup": {
    "web": {
      "4.1.0": {
        "1": "a",
        "dev": "a",
        "prod": "a"
      }
    },
    "ios": [],
    "android": []
  }
}

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

#react.js #redux

Check if token expires and logout user

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object

const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }

    useEffect(()=>{
        const token = user?.token;

        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

##javascript ##js #next.js #react.js

Animate header on scroll with Next.js & TailwindCSS

const [animateHeader, setAnimateHeader] = useState(false)

useEffect(() => {
  const listener = () =>
  window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false)
  window.addEventListener('scroll', listener)
  return () => {
    window.removeEventListener('scroll', listener)
  }
}, [])

// Example usage with TailwindCSS:
<div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>

React Color Gradients

https://codepen.io/marcobiedermann/pen/WNGWzYR

#react.js #javascript #checkboxtoggle

javascript - How to toggle boolean state of react component? - Stack Overflow

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

#javascript #react.js

lowercase, uppercase, remove spaces ( trim ) , capitalize first letter

// making all uppercase
city.toUpperCase();

//removing spaces and making all lowercase
city = city.trim().toLowerCase();

//capitalizing the first letter
cityCapitalized = city.charAt(0).toUpperCase() + city.slice(1);

Open new window onclick reactJS

onClick={() => window.open(url, "_blank")}

Определяет клик вне компонента

import { useEffect } from 'react';

export const useClickOutside = (ref, setIsModalOpen) => {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsModalOpen(false)
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
};

useWorker | useWorker

https://useworker.js.org/

React JSX Iterating a List/Array

this.state = {
	zombies:[
    {
    	name: 'Zombie'
    },{
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    } {
    	name: 'Zombie'
    }
    ]
}

render() {
	return (
    	<div>
        {
        	this.state.zombies.map(zombie => <h1>{zombie.name}</h1>)
        }
        
        </div>
    )
}

#javascript #react.js

Hooks at a Glance – React

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

function Example() {
  const [count, setCount] = useState(0);


  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

#javascript #react.js

loop in react jsx

render() {
  const elements = ['one', 'two', 'three'];

  const items = []

  for (const [index, value] of elements.entries()) {
    items.push(<li key={index}>{value}</li>)
  }

  return (
    <div>
      {items}
    </div>
  )
}

////////// or:

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
    <ul>
      {elements.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>
  )
}

Material UI style snippet

const useStyles = makeStyles((theme) => ({}));

GRID material ui

<Grid container><Grid item></Grid></Grid>

MATERIAL UI _ custom style

import { createMuiTheme } from '@material-ui/core/styles';

// A custom theme for this app
const theme = createMuiTheme({});

export default theme;

#react.js #setstate

A correct way to log the current state after the update would be:

this.setState({ name: 'Matt' }, () => console.log(this.state.name))

Browse more snippets >>