Fixed lint errors :D

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

components/Element.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
 import Link from 'next/link'
+import React from 'react'
 import { ChevronRight } from 'react-feather'
-import next from 'next'
 
 interface Props {
 	title: string
@@ -12,7 +11,7 @@ interface Props {
 }
 
 const months = [
-	"le 13eme mois",
+	'le 13eme mois',
 	'Janvier',
 	'Février',
 	'Mars',
@@ -24,16 +23,13 @@ const months = [
 	'Septembre',
 	'Octobre',
 	'Novembre',
-	'Décembre'
+	'Décembre',
 ]
 
 export default class Element extends React.Component<Props, {}> {
-	constructor(props: Props) {
-		super(props)
-	}
-	render() {
+	public render() {
 		let date = this.props.date
-		if (typeof this.props.date === "string") {
+		if (typeof this.props.date === 'string') {
 			date = new Date(this.props.date)
 		}
 		const t = `${date.getDate()} ${months[date.getMonth()]} ${date.getFullYear()}`

components/Filters.tsx

@@ -1,11 +1,12 @@
-import React from 'react'
 import Link from 'next/link'
-import '../styl/styl.styl'
-import { ChevronRight, ChevronDown } from 'react-feather'
+import React from 'react'
+import { ChevronDown, ChevronRight } from 'react-feather'
+
 import config from '../config'
+import '../styl/styl.styl'
 
 interface Props {
-	categories?: string[]
+	categories?: Array<string>
 	onQuery?: (query: string, sort?: boolean) => void
 	onHeight?: (height: number) => void
 }
@@ -17,40 +18,9 @@ interface States {
 
 export default class Filters extends React.Component<Props, States> {
 
-	private aside = undefined
 	private input = undefined
 
-	constructor(props: Props) {
-		super(props)
-	}
-
-	setInput = element => {
-		this.input = element
-	}
-
-	onKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
-		setTimeout(() => {
-			this.submit()
-		}, 1);
-	}
-
-	onClick = () => {
-		if (this.input.value !== "") {
-			this.submit()
-			return
-		}
-		this.input.focus()
-	}
-
-	onChange = (ev) => {
-		this.submit(ev.target.value === "true")
-	}
-
-	submit = (sort?: boolean) => {
-		if (this.props.onQuery) this.props.onQuery(this.input.value, sort)
-	}
-
-	render() {
+	public render() {
 		return (
 			<aside>
 				<div>Trier</div>
@@ -72,14 +42,13 @@ export default class Filters extends React.Component<Props, States> {
 				</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>
 					))}
 				</span>
 
-
 				<style jsx>{`
 
 					aside {
@@ -123,4 +92,32 @@ export default class Filters extends React.Component<Props, States> {
 			</aside>
 		)
 	}
+
+	private setInput = (element) => {
+		this.input = element
+	}
+
+	private onKeyDown = (ev: React.KeyboardEvent<HTMLInputElement>) => {
+		setTimeout(() => {
+			this.submit()
+		}, 1)
+	}
+
+	private onClick = () => {
+		if (this.input.value !== '') {
+			this.submit()
+			return
+		}
+		this.input.focus()
+	}
+
+	private onChange = (ev) => {
+		this.submit(ev.target.value === 'true')
+	}
+
+	private submit = (sort?: boolean) => {
+		if (this.props.onQuery) {
+			this.props.onQuery(this.input.value, sort)
+		}
+	}
 }

components/Footer.tsx

@@ -1,17 +1,10 @@
 import React from 'react'
-import { PhoneCall, Mail, GitHub, Twitter, Linkedin } from 'react-feather'
-import Link from 'next/link'
+import { GitHub, Linkedin, Mail, PhoneCall, Twitter } from 'react-feather'
+
 import config from '../config'
 
-interface Props {}
-
-interface States {}
-
-export default class Footer extends React.Component<Props, States> {
-	constructor(props: Props) {
-		super(props)
-	}
-	render() {
+export default class Footer extends React.Component<{}, {}> {
+	public render() {
 		return (
 			<footer>
 				<div className="pre"></div>

components/Header.tsx

@@ -1,14 +1,9 @@
 import React from 'react'
+
 import config from '../config'
 
-interface Props {
-}
-
-export default class Header extends React.Component<Props, {}> {
-	constructor(props: Props) {
-		super(props)
-	}
-	render() {
+export default class Header extends React.Component<{}, {}> {
+	public render() {
 		return (
 			<div>
 				{/* <p>Bienvenue sur le Portfolio de Florian BOUILLON !</p> */}

components/Layout.tsx

@@ -1,20 +1,19 @@
 import React from 'react'
-import Navbar from './Navbar'
-import Menu from './Menu'
-import Header from './Header'
-import Footer from './Footer'
+
 import config from '../config'
 
+import Footer from './Footer'
+import Header from './Header'
+import Menu from './Menu'
+import Navbar from './Navbar'
+
 interface Props {
 	hasHeader?: boolean
 	headerChild?: JSX.Element
 }
 
 export default class Layout extends React.Component<Props, {}> {
-	constructor(props: Props) {
-		super(props)
-	}
-	render() {
+	public render() {
 		return (
 			<div>
 				<Navbar>

components/Menu.tsx

@@ -1,15 +1,10 @@
-import React from 'react'
 import Link from 'next/link'
+import React from 'react'
+
 import config from '../config'
 
-interface Props {
-}
-
-export default class Menu extends React.Component<Props, {}> {
-	constructor(props: Props) {
-		super(props)
-	}
-	render() {
+export default class Menu extends React.Component<{}, {}> {
+	public render() {
 		return (
 		<ul>
 			<li>

components/Navbar.tsx

@@ -1,6 +1,7 @@
+import Link from 'next/link'
 import React from 'react'
 import { Menu } from 'react-feather'
-import Link from 'next/link'
+
 import config from '../config'
 
 interface Props {
@@ -17,7 +18,7 @@ export default class Navbar extends React.Component<Props, States> {
 
 	private menuRef = undefined
 
-	constructor(props: Props) {
+	public constructor(props: Props) {
 		super(props)
 
 		if (this.props.height) {
@@ -25,39 +26,25 @@ export default class Navbar extends React.Component<Props, States> {
 		}
 	}
 
-	setRef = element => {
-		this.menuRef = element
-	}
-
-	onScroll = () => {
-		this.setState({
-			scrolled: window.pageYOffset > 207
-		})
-	}
-
-	componentDidMount() {
+	public componentDidMount() {
 		if (window.location.origin !== config.domain) {
 			window.location.replace(`${config.domain}${window.location.pathname}`)
 		}
 		window.addEventListener('scroll', this.onScroll)
 	}
 
-	componentWillUnmount() {
+	public componentWillUnmount() {
 		window.removeEventListener('scroll', this.onScroll)
 	}
 
-	onClick = () => {
-		this.menuRef.classList.toggle("shown")
-	}
-
-	render() {
+	public render() {
 		const height = this.props.height || 80
 
 		// if (!this.state.scrolled)
 
 		// console.log(this.state.scrolled)
 		return (
-			<nav className={this.state && this.state.scrolled ? "scrolled" : ""}>
+			<nav className={this.state && this.state.scrolled ? 'scrolled' : ''}>
 				<style jsx global>{`
 					body {
 						margin-top: ${height}px;
@@ -120,9 +107,9 @@ export default class Navbar extends React.Component<Props, States> {
 					}
 					.head {
 						display: flex;
-						height: ${height-10}px;
+						height: ${height - 10}px;
 						background: white;
-						padding-left: ${height-10}px;
+						padding-left: ${height - 10}px;
 						justify-content: center;
 						align-items: center;
 					}
@@ -132,8 +119,8 @@ export default class Navbar extends React.Component<Props, States> {
 
 					}
 					span {
-						width: ${height-10}px;
-						height: ${height-10}px;
+						width: ${height - 10}px;
+						height: ${height - 10}px;
 						cursor: pointer;
 						display: flex;
 						justify-content: center;
@@ -144,4 +131,18 @@ export default class Navbar extends React.Component<Props, States> {
 			</nav>
 		)
 	}
+
+	private setRef = (element) => {
+		this.menuRef = element
+	}
+
+	private onScroll = () => {
+		this.setState({
+			scrolled: window.pageYOffset > 207,
+		})
+	}
+
+	private onClick = () => {
+		this.menuRef.classList.toggle('shown')
+	}
 }

components/Post.ts

@@ -1,6 +1,5 @@
 import matter from 'gray-matter'
 
-
 interface PostInterface {
 	slug: string
 	title: string
@@ -15,13 +14,22 @@ export interface PostHeader {
 	imageAlt?: string
 	date: Date
 	url?: string
-	tags?: string[]
+	tags?: Array<string>
 	modifiedDate?: Date
 	short?: string
 }
 
 export default class Post implements PostInterface {
 
+	public static async fetchAll(): Promise<Array<Post>> {
+		const files: Array<string> = ((require as any).context('../posts', true, /\.md$/)).keys()
+		const posts: Array<Post> = []
+		for (const file of files) {
+			posts.push(new Post(file.replace('./', '')))
+		}
+		return posts
+	}
+
 	public slug: string
 	public title: string
 	public content: string
@@ -34,7 +42,10 @@ export default class Post implements PostInterface {
 	}
 
 	public async fetch() {
-		if (!this.slug.endsWith(".md")) this.slug = "portfolio/" + this.slug +  ".md"
+		if (!this.slug.endsWith('.md')) {
+			this.slug = `portfolio/${this.slug}.md`
+		}
+
 		const content = await import(`../posts/${this.slug}`)
 		const md = matter(content.default)
 		this.title = md.data.title
@@ -43,24 +54,14 @@ export default class Post implements PostInterface {
 	}
 
 	public fetchSync() {
-		if (!this.slug.endsWith(".md")) this.slug = "portfolio/" + this.slug +  ".md"
+		if (!this.slug.endsWith('.md')) {
+			this.slug = `portfolio/${this.slug}.md`
+		}
+
 		const content = require(`../posts/${this.slug}`)
 		const md = matter(content.default)
 		this.title = md.data.title
 		this.header = (md.data as PostHeader)
 		this.content = md.content
 	}
-
-	public static async fetchAll(): Promise<Post[]> {
-			const files: string[] = ((require as any).context('../posts', true, /\.md$/)).keys()
-			const posts: Post[] = []
-			for (const file of files) {
-				posts.push(
-					new Post(
-						file.replace("./", '')
-					)
-				)
-			}
-			return posts
-	}
 }

components/default.tsx

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

config.ts

@@ -1,15 +1,16 @@
 const config = {
-	domain: "https://www.avior.me",
-	og: {
-		title: "Avior.me",
-		description: "Avior.me, Site du portfolio de Avior :D"
-	},
 	colors: {
-		400: "#BB86FC",
-		500: "#6200EE",
-		rgb500: "98, 0, 238",
-		600: "#3700B3"
-	}
+		rgb500: '98, 0, 238',
+		400: '#BB86FC',
+		500: '#6200EE',
+		600: '#3700B3',
+	},
+	domain: 'https://www.avior.me',
+	// domain: 'http://localhost:3000',
+	og: {
+		description: 'Avior.me, Site du portfolio de Avior :D',
+		title: 'Avior.me',
+	},
 }
 
 export default config

pages/[category]/[slug].tsx

@@ -1,12 +1,13 @@
-import { NextPageContext } from "next"
-
-import{ Component } from 'react'
-import Post from "../../components/Post"
+import { NextPageContext } from 'next'
+import Head from 'next/head'
+import Link from 'next/link'
+import { Component } from 'react'
 import ReactMarkdown from 'react-markdown'
-import Error from "../_error"
-import Link from "next/link"
-import Head from "next/head"
-import config from "../../config"
+
+import Post from '../../components/Post'
+import config from '../../config'
+
+import Error from '../_error'
 
 interface Props {
 	post: Post
@@ -17,15 +18,34 @@ interface States {
 }
 
 export default class PostPage extends Component<Props, States> {
+
+	public static async getInitialProps(context: NextPageContext) {
+		const { slug } = context.query
+		if (typeof slug === 'object' || slug === '[slug]') {
+			return {post: undefined}
+		}
+		const post = new Post(slug)
+		await post.fetch()
+		return {post}
+	}
+
 	public render() {
 		return (
 			<main>
 				<Head>
 					<title key="title">{`${this.props.post.title} - ${config.og.title}`}</title>
-					<meta key="description" name="og:description" content={this.props.post.header.short || this.props.post.header.title}/>
+					<meta
+						key="description"
+						name="og:description"
+						content={this.props.post.header.short || this.props.post.header.title}
+					/>
 
 					<meta key="og:title" property="og:title" content={`${this.props.post.header.title} - ${config.og.title}`} />
-					<meta key="og:description" property="og:description" content={this.props.post.header.short || this.props.post.header.title}/>
+					<meta
+						key="og:description"
+						property="og:description"
+						content={this.props.post.header.short || this.props.post.header.title}
+					/>
 					{this.props.post.header.image ? (
 						<meta key="og:image" property="og:image" content={`${config.domain}${this.props.post.header.image}`}/>
 					) : undefined}
@@ -41,7 +61,7 @@ export default class PostPage extends Component<Props, States> {
 						<ul>
 							{this.props.post.header.tags.map((el) => (
 								<li key={el}>
-									<Link href="/tag/[tag]" as={'/tag/'+el.toLowerCase()}>
+									<Link href="/tag/[tag]" as={'/tag/' + el.toLowerCase()}>
 										<a className="button">{el}</a>
 									</Link>
 								</li>
@@ -129,12 +149,4 @@ export default class PostPage extends Component<Props, States> {
 			</main>
 		)
 	}
-
-	public static async getInitialProps(context: NextPageContext) {
-		const { slug } = context.query
-		if (typeof slug === "object" || slug === "[slug]") return {post: undefined}
-		const post = new Post(slug)
-		await post.fetch()
-		return {post}
-	}
 }

pages/_app.tsx

@@ -1,12 +1,13 @@
-import React from 'react'
 import App from 'next/app'
-import '../styl/styl.styl'
-import Layout from '../components/Layout'
 import Head from 'next/head'
+import React from 'react'
+
+import Layout from '../components/Layout'
 import config from '../config'
+import '../styl/styl.styl'
 
 class MyApp extends App {
-	render() {
+	public render() {
 		const { Component, pageProps } = this.props
 
 		return(

pages/_document.tsx

@@ -1,17 +1,12 @@
-// _document is only rendered on the server side and not on the client side
-// Event handlers like onClick can't be added to this file
-
-// ./pages/_document.js
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-import config from '../config'
+import Document, { Head, Html, Main, NextScript } from 'next/document'
 
 class MyDocument extends Document {
-	static async getInitialProps(ctx) {
+	public static async getInitialProps(ctx) {
 		const initialProps = await Document.getInitialProps(ctx)
 		return { ...initialProps }
 	}
 
-	render() {
+	public render() {
 		return (
 			<Html>
 				<Head>

pages/_error.tsx

@@ -1,15 +1,14 @@
-import React, { Component } from 'react'
 import { NextPageContext } from 'next'
 import Head from 'next/head'
-import Layout from '../components/Layout'
+import React, { Component } from 'react'
 
 interface Props {
 	statusCode: number
 }
 
 const codesTexts = {
-	404: "Page non trouvé !",
-	500: "Le serveur n'a pas pu répondre a ta demande :O"
+	404: 'Page non trouvé !',
+	500: "Le serveur n'a pas pu répondre a ta demande :O",
 }
 
 export default class Error extends Component<Props, {}> {
@@ -21,7 +20,7 @@ export default class Error extends Component<Props, {}> {
 					<title>Pouet :D</title>
 				</Head>
 				<div className="errorContainer">
-					<h1>{statusCode ? statusCode : "404"}</h1>
+					<h1>{statusCode ? statusCode : '404'}</h1>
 					<h2>{statusCode ? codesTexts[statusCode] : codesTexts[404]}</h2>
 				</div>
 				<style jsx>{`
@@ -51,8 +50,8 @@ export default class Error extends Component<Props, {}> {
 		)
 	}
 
-	getInitialProps = ({ res, err }: NextPageContext) => {
+	public getInitialProps({ res, err }: NextPageContext) {
 		const statusCode = res ? res.statusCode : err ? err.statusCode : 404
 		return { statusCode }
-	  }
+	}
 }

pages/index.tsx

@@ -1,57 +1,30 @@
+import { Component } from 'react'
 import Element from '../components/Element'
 import Filters from '../components/Filters'
-import { Component } from 'react'
 import Post, { PostHeader } from '../components/Post'
 
 interface Props {
-  userAgent?: string
+	userAgent?: string
 }
 
-interface el extends PostHeader {}
-
 interface States {
-	elements: el[]
+	elements: Array<PostHeader>
 	loaded: boolean
 	asideHeight: number
-	categories: string[]
+	categories: Array<string>
 }
 
 // export const config = {amp: 'hybrid'}
 
-let elements: PostHeader[] = []
+let elements: Array<PostHeader> = []
 
 export default class Page extends Component<Props, States> {
 
-	onQuery = async (query: string, recent: boolean = true) => {
-		// console.log(`query: ${query}`)
-		const t= elements.filter(el => {
-			return el.title.toLowerCase().includes(query.toLowerCase())
-		})
-		if (recent) {
-			t.sort((a, b) => {
-				return (a.date < b.date) ? 1 : -1
-			})
-		} else {
-			t.sort((a, b) => {
-				return (a.date > b.date) ? 1 : -1
-			})
-		}
-		this.setState({
-			elements: t
-		})
-	}
-
-	onHeight = async (height: number) => {
-		this.setState({
-			asideHeight: height
-		})
-	}
-
-	async componentDidMount() {
+	public async componentDidMount() {
 		const posts = await Post.fetchAll()
 		const header: Array<PostHeader> = []
-		let cats: Array<string> = []
-		posts.forEach(el => {
+		const cats: Array<string> = []
+		posts.forEach((el) => {
 			el.fetchSync()
 			header.push(el.header)
 			cats.push(...el.header.tags)
@@ -64,18 +37,25 @@ export default class Page extends Component<Props, States> {
 
 		elements = header
 		this.setState({
+			categories: cats.filter((item, pos) => cats.indexOf(item) === pos),
 			elements: header,
 			loaded: true,
-			categories: cats.filter((item, pos) => {return cats.indexOf(item) === pos})
 		})
 	}
 
-	render() {
+	public render() {
 		return (
 			<main>
 				<span>
 					{this.state && this.state.elements && this.state.elements.length !== 0 ? this.state.elements.map((el, index) => (
-						<Element key={index} link={"/"+el.category.toLowerCase() + "/" + el.id} title={el.title} image={el.image} alt={el.imageAlt} date={el.date || new Date} />
+						<Element
+							key={index}
+							link={`/${el.category.toLowerCase()}/${el.id}`}
+							title={el.title}
+							image={el.image}
+							alt={el.imageAlt}
+							date={el.date || new Date()}
+						/>
 					)) : this.state && this.state.loaded ? (
 						<div>La recherche n'a rien donnée <span className="emoji">😢</span></div>
 					) : (
@@ -105,7 +85,7 @@ export default class Page extends Component<Props, States> {
 						justify-content: center;
 					}
 
-					@media (min-width: 820px) and (min-height: ${this.state && this.state.asideHeight ? this.state.asideHeight+100 : 600}px) {
+					@media (min-width: 820px) and (min-height: ${this.state && this.state.asideHeight ? this.state.asideHeight + 100 : 600}px) {
 						span {
 							max-width: calc(100% - 400px);
 						}
@@ -116,7 +96,31 @@ export default class Page extends Component<Props, States> {
 					}
 				`}</style>
 			</main>
-
 		)
 	}
+
+	private async onQuery(query: string, recent: boolean = true) {
+		// console.log(`query: ${query}`)
+		const t = elements.filter( (el) => {
+			return el.title.toLowerCase().includes(query.toLowerCase())
+		})
+		if (recent) {
+			t.sort((a, b) => {
+				return (a.date < b.date) ? 1 : -1
+			})
+		} else {
+			t.sort((a, b) => {
+				return (a.date > b.date) ? 1 : -1
+			})
+		}
+		this.setState({
+			elements: t,
+		})
+	}
+
+	private async onHeight(height: number) {
+		this.setState({
+			asideHeight: height,
+		})
+	}
 }

pages/tag/[tag].tsx

@@ -1,20 +1,18 @@
-import { NextPage, NextPageContext } from "next"
-import Link from 'next/link'
-import Post from "../../components/Post"
+import { NextPage, NextPageContext } from 'next'
+
 import Element from '../../components/Element'
-import Error from "../_error"
-// import posts from '../../posts/pages.json'
-// import firstline from 'firstline'
-// import 'fs'
+import Post from '../../components/Post'
+
+import Error from '../_error'
 
 interface Props {
-	files: Post[],
+	files: Array<Post>,
 	tag: string
 }
 
 const PortfolioIndex: NextPage<Props> = (props: Props) => {
 
-	const el: JSX.Element[] = []
+	const el: Array<JSX.Element> = []
 	for (const post of props.files) {
 		el.push(
 		)
@@ -31,7 +29,13 @@ const PortfolioIndex: NextPage<Props> = (props: Props) => {
 			<h2>Tag: {props && props.tag}</h2>
 			<div>
 				{props.files.map((post, index) => (
-					<Element key={index} link={"/"+post.header.category.toLowerCase() + "/" + post.header.id} title={post.header.title} image={post.header.image} date={post.header.date || new Date} />
+					<Element
+						key={index}
+						link={`/${post.header.category.toLowerCase()}/${post.header.id}`}
+						title={post.header.title}
+						image={post.header.image}
+						date={post.header.date || new Date()}
+					/>
 				))}
 			</div>
 			<style jsx>{`
@@ -68,18 +72,24 @@ const PortfolioIndex: NextPage<Props> = (props: Props) => {
 
 PortfolioIndex.getInitialProps = async (context: NextPageContext) => {
 	const { tag } = context.query
-	if (typeof tag === "object" || tag === "[tag]") return {files: [], tag: ""}
-	const arr: Post[] = []
+	if (typeof tag === 'object' || tag === '[tag]') {
+		return {files: [], tag: ''}
+	}
+	const arr: Array<Post> = []
 	for (const post of await Post.fetchAll()) {
-		if (!post.isStarted) await post.fetch()
-		let tags = []
+		if (!post.isStarted) {
+			await post.fetch()
+		}
+		const tags = []
 		for (const tg of post.header.tags) {
 			tags.push(tg.toLowerCase())
 		}
-		if (!tags.includes(tag)) continue
+		if (!tags.includes(tag)) {
+			continue
+		}
 		arr.push(post)
 	}
-	return {files: arr, tag: tag} as Props
+	return {files: arr, tag} as Props
 }
 
 export default PortfolioIndex