{"size": 1430, "ext": "js", "max_stars_repo_path": "src/pages/search_name.js", "max_stars_repo_name": "mark-rand/naughty-list", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/search_name.js", "max_issues_repo_name": "mark-rand/naughty-list", "max_issues_repo_issues_event_min_datetime": "2021-08-31T21:14:34.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T10:46:30.000Z", "max_forks_repo_path": "src/pages/search_name.js", "max_forks_repo_name": "mark-rand/naughty-list", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 3, "max_forks_count": null, "avg_line_length": 25.5357142857, "max_line_length": 83, "alphanum_fraction": 0.6223776224}
import React, { useState } from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

const Search_Page = props => {
  const [onNaughtyList, setOnNaughtyList] = useState(true)

  const name = props.location.state.name

  const toggleNaughtyList = () => {
    const naughtyListStatus = !onNaughtyList
    setOnNaughtyList(naughtyListStatus)
    var naughtyListObject = JSON.parse(window.localStorage.getItem("naughtyList"));
    if (naughtyListObject) naughtyListObject[name] = naughtyListStatus
    else {
      naughtyListObject = {}
      naughtyListObject[name] = naughtyListStatus
    }
    localStorage.setItem("naughtyList", JSON.stringify(naughtyListObject))
  }

  const toggleButton = () => {
    return (
      <button onClick={toggleNaughtyList}>
        {onNaughtyList ? `Remove ${name} from` : `Add ${name} to`} the naughty list
      </button>
    )
  }
  const naughtyListStatus = () => {
    if (onNaughtyList)
      return (
        <span>
          <p>{name} is on the naughty list</p>
          {toggleButton()}
        </span>
      )
    return (
      <span>
        <p>{name} is not on naughty list</p>
        {toggleButton()}
      </span>
    )
  }

  return (
    <Layout>
      <SEO title="Search page" />
      {naughtyListStatus()}
      <Link to="/">Search for another name</Link> <br />
    </Layout>
  )
}

export default Search_Page
