Fixed linting 😃

Signed-off-by: Avior <florian.bouillon@delta-wings.net>

components/Element.tsx

@@ -38,7 +38,13 @@ export default class Element extends React.Component<Props, {}> {
 			<div>
 				<Link href="/[category]/[slug]" as={this.props.link}>
 					{this.props.image ? (
-						<a aria-label={this.props.title}><Picture src={this.props.image} alt={this.props.alt} style={{height: 250, borderRadius: 10}} /></a> //<img src={require(`../images${this.props.image}`/*this.props.image*/)} alt={this.props.alt}/>
+						<a aria-label={this.props.title}>
+							<Picture
+								src={this.props.image}
+								alt={this.props.alt}
+								style={{height: 250, borderRadius: 10}}
+							/>
+						</a>
 					) : (
 						<div></div>
 					)}

components/Filters.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import React from 'react'
+import React, { RefObject, FormEvent } from 'react'
 import { ChevronDown, ChevronRight } from 'react-feather'
 
 import config from '../config'
@@ -18,7 +18,13 @@ interface States {
 
 export default class Filters extends React.Component<Props, States> {
 
-	private input = undefined
+	private input: RefObject<HTMLInputElement>
+
+	public constructor(props: Props) {
+		super(props)
+
+		this.input = React.createRef()
+	}
 
 	public render() {
 		return (
@@ -35,14 +41,20 @@ export default class Filters extends React.Component<Props, States> {
 				</div>
 				<label htmlFor="sidebar-filter">Filtrer</label>
 				<div className="input icon-right inline">
-					<input id="sidebar-filter" placeholder="ex: dzeio.com" type="text" ref={this.setInput} onKeyDownCapture={this.onKeyDown} />
+					<input
+						id="sidebar-filter"
+						placeholder="ex: dzeio.com"
+						type="text"
+						ref={this.input}
+						onKeyDownCapture={this.onKeyDown}
+					/>
 					<i>
 						<ChevronRight onClick={this.onClick} />
 					</i>
 				</div>
 				<p>Languages :</p>
 				<span>
-					{this.props.categories.map((cat) => (
+					{this.props.categories?.map(cat => (
 						<Link key={cat} href="/tag/[tag]" as={`/tag/${cat.toLowerCase()}`}>
 							<a className="button">{cat}</a>
 						</Link>
@@ -93,10 +105,6 @@ export default class Filters extends React.Component<Props, States> {
 		)
 	}
 
-	private setInput = (element) => {
-		this.input = element
-	}
-
 	private onKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
 		setTimeout(() => {
 			this.submit()
@@ -104,20 +112,20 @@ export default class Filters extends React.Component<Props, States> {
 	}
 
 	private onClick = () => {
-		if (this.input.value !== '') {
+		if (this.input.current?.value !== '') {
 			this.submit()
 			return
 		}
-		this.input.focus()
+		this.input.current.focus()
 	}
 
-	private onChange = (ev) => {
-		this.submit(ev.target.value === 'true')
+	private onChange = (ev: React.KeyboardEvent<HTMLInputElement>|FormEvent<HTMLSelectElement>) => {
+		this.submit((ev.target as HTMLInputElement).value === 'true')
 	}
 
 	private submit = (sort?: boolean) => {
-		if (this.props.onQuery) {
-			this.props.onQuery(this.input.value, sort)
+		if (this.props.onQuery && this.input.current?.value) {
+			this.props.onQuery(this.input.current.value, sort)
 		}
 	}
 }

components/Footer.tsx

@@ -10,19 +10,39 @@ export default class Footer extends React.Component<{}, {}> {
 				<div className="pre"></div>
 				<div className="footer">
 					<span>
-						<a aria-label="Email Address" href="mailto:contact@avior.me" target="_blank">
+						<a
+							aria-label="Email Address"
+							rel="noopener noreferrer"
+							href="mailto:contact@avior.me"
+							target="_blank"
+						>
 							<Mail color={config.colors[500]} />
 						</a>
-						<a aria-label="Phone Number" href="tel:+33672292683" target="_blank">
+						<a aria-label="Phone Number" rel="noopener noreferrer" href="tel:+33672292683" target="_blank">
 							<PhoneCall color={config.colors[500]} />
 						</a>
-						<a aria-label="Git" rel="noopener noreferrer" href="https://git.delta-wings.net" target="_blank">
+						<a
+							aria-label="Git"
+							rel="noopener noreferrer"
+							href="https://git.delta-wings.net"
+							target="_blank"
+						>
 							<GitHub color={config.colors[500]} />
 						</a>
-						<a aria-label="Twitter" rel="nofollow noopener noreferrer" href="https://twitter.com/aviortheking" target="_blank">
+						<a
+							aria-label="Twitter"
+							rel="nofollow noopener noreferrer"
+							href="https://twitter.com/aviortheking"
+							target="_blank"
+						>
 							<Twitter color={config.colors[500]} />
 						</a>
-						<a aria-label="linkdedin" rel="nofollow noopener noreferrer" href="https://www.linkedin.com/in/florian-bouillon/" target="_blank">
+						<a
+							aria-label="linkdedin"
+							rel="nofollow noopener noreferrer"
+							href="https://www.linkedin.com/in/florian-bouillon/"
+							target="_blank"
+						>
 							<Linkedin color={config.colors[500]} />
 						</a>
 					</span>

components/Header.tsx

@@ -4,13 +4,14 @@ import config from '../config'
 
 export default class Header extends React.Component<{}, {}> {
 	public render() {
+		const t = `linear-gradient(90deg, ${config.colors[400]} 0%, ${config.colors[600]} 92.19%)`
 		return (
 			<div>
 				{/* <p>Bienvenue sur le Portfolio de Florian BOUILLON !</p> */}
 				<style jsx>{`
 					div {
 						position: relative;
-						background: url('/clouds.svg'), linear-gradient(90deg, ${config.colors[400]} 0%, ${config.colors[600]} 92.19%);
+						background: url('/clouds.svg'), ${t};
 						background-repeat: repeat-x;
 						background-position: bottom;
 						min-height: 207px;
@@ -22,12 +23,6 @@ export default class Header extends React.Component<{}, {}> {
 						font-size: 35px;
 						text-transform: uppercase;
 					}
-					img {
-						position: absolute;
-						bottom: 0;
-						min-width: 100%;
-						height: 50px;
-					}
 				`}</style>
 			</div>
 		)

components/Menu.tsx

@@ -6,37 +6,37 @@ import config from '../config'
 export default class Menu extends React.Component<{}, {}> {
 	public render() {
 		return (
-		<ul>
-			<li>
-				<Link href="/">
-					<a>Home</a>
-				</Link>
-			</li>
-			<style jsx>{`
-				ul {
-					list-style: none;
-					margin: 0;
-					padding: 0;
-				}
-				li {
-					background: white;
-					width: calc(100% - 10px);
-					padding: 5px;
-				}
-				a {
-					color: black;
-					display: block;
-					text-decoration: none;
-					padding: 10px;
-					border-radius: 10px;
-					transition: background 200ms
-				}
+			<ul>
+				<li>
+					<Link href="/">
+						<a>Home</a>
+					</Link>
+				</li>
+				<style jsx>{`
+					ul {
+						list-style: none;
+						margin: 0;
+						padding: 0;
+					}
+					li {
+						background: white;
+						width: calc(100% - 10px);
+						padding: 5px;
+					}
+					a {
+						color: black;
+						display: block;
+						text-decoration: none;
+						padding: 10px;
+						border-radius: 10px;
+						transition: background 200ms
+					}
 
-				a:hover {
-				background: ${config.colors[500]}20
-				}
-		`}</style>
-		</ul>
+					a:hover {
+					background: ${config.colors[500]}20
+					}
+			`}</style>
+			</ul>
 		)
 	}
 }

components/Navbar.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import React from 'react'
+import React, { RefObject } from 'react'
 import { Menu } from 'react-feather'
 
 import config from '../config'
@@ -16,11 +16,13 @@ export default class Navbar extends React.Component<Props, States> {
 
 	private height = 80
 
-	private menuRef = undefined
+	private menuRef: RefObject<any>
 
 	public constructor(props: Props) {
 		super(props)
 
+		this.menuRef = React.createRef()
+
 		if (this.props.height) {
 			this.height = this.props.height
 		}
@@ -60,12 +62,12 @@ export default class Navbar extends React.Component<Props, States> {
 					<Link href="/">
 						<a><img src="/logo.svg" alt="logo"/></a>
 					</Link>
-					<span onClick={this.onClick} data-menu={this.refs.menu}>
+					<span onClick={this.onClick} data-menu={this.menuRef}>
 						<Menu size={30} />
 					</span>
 				</div>
 
-				<div ref={this.setRef} className="menu">
+				<div ref={this.menuRef} className="menu">
 					{this.props.children}
 				</div>
 
@@ -129,10 +131,6 @@ export default class Navbar extends React.Component<Props, States> {
 		)
 	}
 
-	private setRef = (element) => {
-		this.menuRef = element
-	}
-
 	private onScroll = () => {
 		this.setState({
 			scrolled: window.pageYOffset > 207,
@@ -140,6 +138,6 @@ export default class Navbar extends React.Component<Props, States> {
 	}
 
 	private onClick = () => {
-		this.menuRef.classList.toggle('shown')
+		this.menuRef.current.classList.toggle('shown')
 	}
 }

components/Picture.tsx

@@ -1,19 +1,25 @@
-import { Component, CSSProperties } from "react"
+import React, { Component, CSSProperties } from 'react'
 
-interface props {
-	src: string,
-	alt?: string,
+interface Props {
+	src: string
+	alt?: string
 	style?: CSSProperties
 	parentStyle?: CSSProperties
 }
 
-export default class Picture extends Component<props, {}> {
+export default class Picture extends Component<Props, {}> {
 	public render() {
 		const sets = require(`../images${this.props.src}?resize&sizes[]=300&sizes[]=600&sizes[]=1000`)
 		return (
 			<picture style={this.props.parentStyle}>
 				<source srcSet={require(`../images${this.props.src}?webp`).default} type="image/webp" />
-				<img srcSet={sets.srcSet} src={sets.src} alt={this.props.alt} style={Object.assign({width: "100%", objectFit: "cover"}, this.props.style)} />
+				<img
+					srcSet={sets.srcSet}
+					src={sets.src}
+					alt={this.props.alt}
+					style={
+						Object.assign({width: '100%', objectFit: 'cover'}, this.props.style)
+					} />
 			</picture>
 		)
 	}

components/Post.ts

@@ -21,6 +21,17 @@ export interface PostHeader {
 
 export default class Post implements PostInterface {
 
+	public slug: string
+	public title: string = ''
+	public content: string = ''
+	public isStarted = false
+
+	public header?: PostHeader
+
+	public constructor(slug: string) {
+		this.slug = slug
+	}
+
 	public static async fetchAll(): Promise<Array<Post>> {
 		const files: Array<string> = ((require as any).context('../posts', true, /\.md$/)).keys()
 		const posts: Array<Post> = []
@@ -30,16 +41,6 @@ export default class Post implements PostInterface {
 		return posts
 	}
 
-	public slug: string
-	public title: string
-	public content: string
-	public isStarted = false
-
-	public header: PostHeader
-
-	constructor(slug: string) {
-		this.slug = slug
-	}
 
 	public async fetch() {
 		if (!this.slug.endsWith('.md')) {

components/default.tsx

@@ -1,15 +1,13 @@
 import React from 'react'
 
-/* tslint:disable:no-empty-interface */
+/* eslint-disable @typescript-eslint/no-empty-interface */
 interface Props {}
 
 interface States {}
-/* tslint:enable:no-empty-interface */
+/* eslint-enable @typescript-eslint/no-empty-interface */
 
 export default class Name extends React.Component<Props, States> {
-	constructor(props: Props) {
-		super(props)
-	}
+
 	public render() {
 		return (
 			<span></span>