From f04dc760e2d70238a038cd10bafd720b84ccc872 Mon Sep 17 00:00:00 2001 From: Rahul Jain Date: Sun, 31 Oct 2021 10:36:41 +0530 Subject: [PATCH] fix: few ESLint warnings --- src/components/addons.js | 380 +++++++++++++++++------------- src/components/header.js | 4 +- src/components/markdownPreview.js | 10 +- 3 files changed, 219 insertions(+), 175 deletions(-) diff --git a/src/components/addons.js b/src/components/addons.js index 1e6fc46..72e5d8b 100644 --- a/src/components/addons.js +++ b/src/components/addons.js @@ -2,12 +2,22 @@ import React, { useState, useEffect } from "react" import { withPrefix } from "gatsby" import { latestBlogs } from "../utils/workflows" import links from "../constants/page-links" -import { isMediumUsernameValid, isGitHubUsernameValid } from "../utils/validation" -import { ToolsIcon, XCircleIcon } from "@primer/octicons-react"; +import { + isMediumUsernameValid, + isGitHubUsernameValid, +} from "../utils/validation" +import { ToolsIcon, XCircleIcon } from "@primer/octicons-react" -const AddonsItem = ({ inputId, inputChecked, onInputChange, Options, onIconClick, ...props }) => { - const [open, setOpen] = useState(false); - const Icon = open ? XCircleIcon : ToolsIcon; +const AddonsItem = ({ + inputId, + inputChecked, + onInputChange, + Options, + onIconClick, + ...props +}) => { + const [open, setOpen] = useState(false) + const Icon = open ? XCircleIcon : ToolsIcon return ( <> @@ -36,8 +46,8 @@ const AddonsItem = ({ inputId, inputChecked, onInputChange, Options, onIconClick {Options && open && Options} - ); -}; + ) +} const CustomizeOptions = ({ title, CustomizationOptions }) => (
( {CustomizationOptions}
-); +) - -const CustomizeBadge = ({githubName, badgeOptions, onBadgeUpdate}) => { +const CustomizeBadge = ({ githubName, badgeOptions, onBadgeUpdate }) => { return ( <> - - - - - - - - Preview:  - { - isGitHubUsernameValid(githubName)? - - : Invalid GitHub username + + + + /> + + + + + + Preview:  + {isGitHubUsernameValid(githubName) ? ( + profile-visitors-count + ) : ( + + Invalid GitHub username + + )} + ) } -const CustomizeGithubStatsBase = ({ prefix, options, onUpdate }) => - <> - - - - - - - - +const CustomizeGithubStatsBase = ({ prefix, options, onUpdate }) => ( + <> + + + + + + + + +) const CustomizeStreakStats = ({ prefix, options, onUpdate }) => ( <> @@ -208,48 +233,48 @@ const CustomizeStreakStats = ({ prefix, options, onUpdate }) => ( ) const Addons = props => { - const [debounce, setDebounce] = useState(undefined); + const [debounce, setDebounce] = useState(undefined) const [badgeOptions, setBadgeOptions] = useState({ - badgeStyle: props.data.badgeStyle, - badgeColor: props.data.badgeColor, - badgeLabel: props.data.badgeLabel - }); + badgeStyle: props.data.badgeStyle, + badgeColor: props.data.badgeColor, + badgeLabel: props.data.badgeLabel, + }) useEffect(() => { setBadgeOptions({ - badgeStyle: props.data.badgeStyle, - badgeColor: props.data.badgeColor, - badgeLabel: props.data.badgeLabel + badgeStyle: props.data.badgeStyle, + badgeColor: props.data.badgeColor, + badgeLabel: props.data.badgeLabel, }) }, [props.data.badgeStyle, props.data.badgeColor, props.data.badgeLabel]) const [githubStatsOptions, setGithubStatsOptions] = useState({ ...props.data.githubStatsOptions, - }); + }) useEffect(() => { setGithubStatsOptions({ - ...props.data.githubStatsOptions + ...props.data.githubStatsOptions, }) }, [props.data.githubStatsOptions]) const [topLanguagesOptions, setTopLanguagesOptions] = useState({ ...props.data.topLanguagesOptions, - }); + }) useEffect(() => { setTopLanguagesOptions({ - ...props.data.topLanguagesOptions + ...props.data.topLanguagesOptions, }) }, [props.data.topLanguagesOptions]) const [streakStatsOptions, setStreakStatsOptions] = useState({ ...props.data.streakStatsOptions, - }); + }) useEffect(() => { setStreakStatsOptions({ - ...props.data.streakStatsOptions + ...props.data.streakStatsOptions, }) }, [props.data.streakStatsOptions]) @@ -283,30 +308,37 @@ const Addons = props => { const onBadgeUpdate = (option, value) => { const callback = () => { - let newVal = (option==='badgeLabel' && value==='')?'Profile views':value; - setBadgeOptions({...badgeOptions, [option]: newVal}); - props.handleDataChange(option, {target: {value: newVal}}) + let newVal = + option === "badgeLabel" && value === "" ? "Profile views" : value + setBadgeOptions({ ...badgeOptions, [option]: newVal }) + props.handleDataChange(option, { target: { value: newVal } }) } - clearTimeout(debounce); - setDebounce(setTimeout(callback, 300)); + clearTimeout(debounce) + setDebounce(setTimeout(callback, 300)) } const onStatsUpdate = (option, value) => { - const newStatsOptions = {...githubStatsOptions, [option]: value} + const newStatsOptions = { ...githubStatsOptions, [option]: value } setGithubStatsOptions(newStatsOptions) - props.handleDataChange("githubStatsOptions", {target: {value: newStatsOptions}}) + props.handleDataChange("githubStatsOptions", { + target: { value: newStatsOptions }, + }) } const onTopLangUpdate = (option, value) => { - const newLangOptions = {...topLanguagesOptions, [option]: value} + const newLangOptions = { ...topLanguagesOptions, [option]: value } setTopLanguagesOptions(newLangOptions) - props.handleDataChange("topLanguagesOptions", {target: {value: newLangOptions}}) + props.handleDataChange("topLanguagesOptions", { + target: { value: newLangOptions }, + }) } const onStreakStatsUpdate = (option, value) => { - const newStreakStatsOptions = {...streakStatsOptions, [option]: value} + const newStreakStatsOptions = { ...streakStatsOptions, [option]: value } setStreakStatsOptions(newStreakStatsOptions) - props.handleDataChange("streakStatsOptions", {target: {value: newStreakStatsOptions}}) + props.handleDataChange("streakStatsOptions", { + target: { value: newStreakStatsOptions }, + }) } return ( @@ -323,7 +355,7 @@ const Addons = props => { title="Customize Badge" CustomizationOptions={ @@ -348,7 +380,11 @@ const Addons = props => { + } /> } @@ -363,7 +399,11 @@ const Addons = props => { + } /> } @@ -378,7 +418,11 @@ const Addons = props => { + } /> } @@ -425,7 +469,7 @@ const Addons = props => { e.keyCode === 13 && blogPostPorkflow()} + onKeyDown={e => e.keyCode === 13 && blogPostPorkflow()} role="button" tabIndex="0" style={{ cursor: "pointer", color: "#002ead" }} diff --git a/src/components/header.js b/src/components/header.js index 394a308..0c50be6 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -10,9 +10,9 @@ import { act } from "react-dom/test-utils" const Header = props => { const shouldRequestStats = () => { const isFirstRequest = stats.starsCount === 0 - const isVisible = window.document.visibilityState === 'visible' + const isVisible = window.document.visibilityState === "visible" const hasFocus = window.document.hasFocus() - return isFirstRequest || isVisible && hasFocus + return isFirstRequest || (isVisible && hasFocus) } const fetchData = async () => { diff --git a/src/components/markdownPreview.js b/src/components/markdownPreview.js index dcf8da2..55429f3 100644 --- a/src/components/markdownPreview.js +++ b/src/components/markdownPreview.js @@ -123,9 +123,9 @@ export const DisplaySocial = props => { export const SocialPreview = props => { let viewSocial = false const icon_base_url = - "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/"; + "https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/" Object.keys(props.social).forEach(key => { - if (props.social[key] && key != "github") viewSocial = true + if (props.social[key] && key !== "github") viewSocial = true }) return (
@@ -245,14 +245,14 @@ export const SocialPreview = props => { <> <> @@ -315,7 +315,7 @@ export const TwitterBadgePreview = props => { return (
{" "} - + {props.twitter} {" "}