Fixed Chores and added eslint

LoginRadius · Jan 24, 2022 · 3da7515 · 3da7515
1 parent 1b14fed
commit 3da7515
Show file tree

Hide file tree

Showing 12 changed files with 525 additions and 48 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  globals: {
+    __PATH_PREFIX__: true,
+  },
+  extends: `react-app`,
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
     "typography": "^0.16.19"
   },
   "devDependencies": {
+    "eslint-config-react-app": "^7.0.0",
     "husky": "^7.0.2",
     "lint-staged": "^11.1.2",
     "prettier": "2.0.5"

diff --git a/src/components/blog-list.js b/src/components/blog-list.js
@@ -1,8 +1,7 @@
 import React from "react"
-import Layout from "../components/layout"
 import CardList from "../components/cardList"
+import Layout from "../components/layout"
 import Pagination from "../components/pagination"
-import SEO from "../components/seo"
 
 const BlogList = props => {
   const { data, pathname, currentPage, type } = props

diff --git a/src/components/header.js b/src/components/header.js
@@ -43,7 +43,7 @@ const Header = ({ searchIndex }) => {
             <Link
               to={"/"}
               activeClassName={headerStyles.active}
-              isPartiallyCurrent={true}
+              partiallyActive={true}
               onClick={e => {
                 setActive("")
               }}
@@ -55,7 +55,7 @@ const Header = ({ searchIndex }) => {
             <Link
               to={"/async"}
               activeClassName={headerStyles.active}
-              isPartiallyCurrent={true}
+              partiallyActive={true}
               onClick={e => {
                 setActive("async")
               }}
@@ -70,6 +70,8 @@ const Header = ({ searchIndex }) => {
           >
             <Link
               to={"/start-with-identity"}
+              activeClassName={headerStyles.active}
+              partiallyActive={true}
               onClick={e => {
                 setActive("start-with-identity")
               }}
@@ -80,6 +82,8 @@ const Header = ({ searchIndex }) => {
           <li className={active.includes("fuel") ? headerStyles.active : ""}>
             <Link
               to={"/fuel"}
+              activeClassName={headerStyles.active}
+              partiallyActive={true}
               onClick={e => {
                 setActive("fuel")
               }}

diff --git a/src/components/header.module.scss b/src/components/header.module.scss
@@ -332,21 +332,28 @@
       &:nth-child(2) {
         &.active {
           & ~ hr {
-            left: 33.33%;
+            left: 25%;
           }
         }
       }
       &:nth-child(3) {
         &.active {
           & ~ hr {
-            left: 66.66%;
+            left: 50%;
+          }
+        }
+      }
+      &:nth-child(4) {
+        &.active {
+          & ~ hr {
+            left: 75%;
           }
         }
       }
     }
     hr {
       height: 3px;
-      width: 33.33%;
+      width: 25%;
       margin: 0;
       background: $blue-bright;
       border: none;

diff --git a/src/components/pagination.js b/src/components/pagination.js
@@ -46,9 +46,9 @@ const Pagination = ({ pages, currentPage, type }) => {
                 <path
                   d="M15.375 5.25L8.625 12L15.375 18.75"
                   stroke="#0D8DCF"
-                  stroke-width="2.25"
-                  stroke-miterlimit="10"
-                  stroke-linecap="square"
+                  strokeWidth={2.25}
+                  strokeMiterlimit={10}
+                  strokeLinecap="square"
                 />
               </svg>
             </span>

diff --git a/src/components/pinnedCard.js b/src/components/pinnedCard.js
@@ -1,14 +1,14 @@
-import React from "react"
-import styles from "./cardlist.module.scss"
-import { Link, StaticQuery } from "gatsby"
-import Bio from "./bio"
-import defaultImg from "../../content/assets/default-blog.jpg"
-import style from "./post.module.scss"
+import { Link } from "gatsby"
+import Img from "gatsby-image"
 // Utilities
 import kebabCase from "lodash/kebabCase"
-import Img from "gatsby-image"
-import getTimeToRead from "../utils/timeToRead"
+import React from "react"
 import ReactGA from "react-ga"
+import defaultImg from "../../content/assets/default-blog.jpg"
+import getTimeToRead from "../utils/timeToRead"
+import Bio from "./bio"
+import styles from "./cardlist.module.scss"
+import style from "./post.module.scss"
 
 const signUplogger = function () {
   ReactGA.event({
@@ -25,7 +25,7 @@ const PinnedCard = props => {
   let coverImagePath = node.frontmatter.coverImage
   return (
     <React.Fragment>
-      <section className={`${styles.pinnedwrap} py-96`}>
+      <section key={"pinned_card"} className={`${styles.pinnedwrap} py-96`}>
         <div className={styles.blogContentPinned}>
           <div className={styles.avatarPinned}>
             <Link to={node.fields.slug} className="bs-md">
@@ -73,7 +73,7 @@ const PinnedCard = props => {
           </div>
         </div>
       </section>
-      <section className={style.bgBright01}>
+      <section key={"pinned_card_cta"} className={style.bgBright01}>
         <div className={`${style.grid6633} ${style.ctaSmall}`}>
           <div className={style.ctaSmallText}>
             <h3>Free, Secure and Trusted Way to Authenticate Your Visitors</h3>

diff --git a/src/components/post.js b/src/components/post.js
@@ -101,8 +101,8 @@ const Post = ({ post, relatedPost, type }) => {
                 dangerouslySetInnerHTML={{ __html: post.html }}
               />
 
-              <div class={`${styles.author} d-flex py-96`}>
-                <div class={styles.authorImage}>
+              <div className={`${styles.author} d-flex py-96`}>
+                <div className={styles.authorImage}>
                   <Link to={`/author/${kebabCase(author.id)}/`}>
                     <img
                       className={`circle extra-large`}
@@ -111,8 +111,8 @@ const Post = ({ post, relatedPost, type }) => {
                     />
                   </Link>
                 </div>
-                <div class={styles.aboutAuthor}>
-                  <div class={styles.aboutAuthorInner}>
+                <div className={styles.aboutAuthor}>
+                  <div className={styles.aboutAuthorInner}>
                     <h3>
                       Writter by&nbsp;
                       <Link to={`/author/${kebabCase(author.id)}/`}>
@@ -123,10 +123,10 @@ const Post = ({ post, relatedPost, type }) => {
                   </div>
                 </div>
               </div>
-              <div class={`${headStyles.sidebar} ${headStyles.detailPage}`}>
+              <div className={`${headStyles.sidebar} ${headStyles.detailPage}`}>
                 {relatedPost && relatedPost.length ? (
                   <div
-                    class={`${headStyles.sidebarWidget} ${headStyles.posts}`}
+                    className={`${headStyles.sidebarWidget} ${headStyles.posts}`}
                   >
                     <h3>Related Posts</h3>
                     <ul>
@@ -147,16 +147,18 @@ const Post = ({ post, relatedPost, type }) => {
                     </ul>
                   </div>
                 ) : null}
-                <div class={headStyles.subscribeDetail}>
+                <div className={headStyles.subscribeDetail}>
                   <h3>
                     Did you enjoy this article? Subscribe to new articles!
                   </h3>
                   <Subscribe type={type} />
                 </div>
               </div>
             </div>
-            <div class={headStyles.sidebar}>
-              <div class={`${headStyles.sidebarWidget} ${headStyles.posts}`}>
+            <div className={headStyles.sidebar}>
+              <div
+                className={`${headStyles.sidebarWidget} ${headStyles.posts}`}
+              >
                 {type === "async" ? (
                   <AsyncFeatList slug={post.fields.slug} />
                 ) : type === "fuel" ? (
@@ -165,15 +167,15 @@ const Post = ({ post, relatedPost, type }) => {
                   <IdentityFeatList slug={post.fields.slug} />
                 )}
               </div>
-              <div class={`${headStyles.sidebarWidget} ${headStyles.tags}`}>
+              <div className={`${headStyles.sidebarWidget} ${headStyles.tags}`}>
                 <TagMenu />
               </div>
 
-              <div class={`${headStyles.sidebarWidget} ${headStyles.cta}`}>
-                <div class={headStyles.image}>
+              <div className={`${headStyles.sidebarWidget} ${headStyles.cta}`}>
+                <div className={headStyles.image}>
                   <img src={Docs} alt="LoginRadius Docs" />
                 </div>
-                <div class={headStyles.text}>
+                <div className={headStyles.text}>
                   <h3>Implement Authentication in Minutes</h3>
                   <a
                     className={`${headStyles.btnPrimary} btn-primary ga_event`}

diff --git a/src/components/search.js b/src/components/search.js
@@ -50,7 +50,7 @@ export default class Search extends Component {
         ? `/blog/search/?${query}`
         : `/search/?${query}`
 
-    query && typeof window !== "undefined" && window.open(uri, "_self")
+    navigate(uri)
   }
 
   componentDidMount() {
@@ -66,12 +66,12 @@ export default class Search extends Component {
     return (
       <>
         <a
-          class={searchStyle.btnSearch}
-          tabindex="0"
+          className={searchStyle.btnSearch}
+          tabIndex={0}
           onClick={this._toggleSearch}
         >
           <div
-            class={`${searchStyle.megaMenuSearchDarkIcon} ${
+            className={`${searchStyle.megaMenuSearchDarkIcon} ${
               toggleOpen === null
                 ? ""
                 : toggleOpen

diff --git a/src/components/tagMenu.js b/src/components/tagMenu.js
@@ -24,8 +24,10 @@ const TagMenu = () => {
         })
         return (
           <React.Fragment>
-            {group.slice(0, 10).map(item => (
-              <Link to={`/tags/${kebabCase(item.tag)}/`}>{item.tag}</Link>
+            {group.slice(0, 10).map((item, index) => (
+              <Link key={`tag_${index}`} to={`/tags/${kebabCase(item.tag)}/`}>
+                {item.tag}
+              </Link>
             ))}
           </React.Fragment>
         )

diff --git a/src/pages/author/{AuthorYaml.id}.js b/src/pages/author/{AuthorYaml.id}.js
@@ -29,20 +29,20 @@ const AuthorTemplate = ({
     />
     <main>
       <section>
-        <div class={`${styles.authorPage} pt-96`}>
-          <div class={`${styles.author} d-flex`}>
-            <div class={styles.authorImage}>
+        <div className={`${styles.authorPage} pt-96`}>
+          <div className={`${styles.author} d-flex`}>
+            <div className={styles.authorImage}>
               <img
                 src={
                   github
                     ? `https://github.com/${github}.png?size=100`
                     : `https://ui-avatars.com/api/?name=${id}&size=460`
                 }
                 alt={id}
-                class="circle extra-large"
+                className="circle extra-large"
               />
             </div>
-            <div class={styles.aboutAuthor}>
+            <div className={styles.aboutAuthor}>
               <h1>{id}</h1>
               <p>{bio}</p>
             </div>