From fee40613f12ee773e0b634326499cefee826017b Mon Sep 17 00:00:00 2001 From: Avior Date: Thu, 6 Feb 2020 21:18:11 +0100 Subject: [PATCH] Fixed linting :smiley: Signed-off-by: Avior --- .eslintrc.js | 4 +-- components/Element.tsx | 8 ++++- components/Filters.tsx | 36 +++++++++++-------- components/Footer.tsx | 30 +++++++++++++--- components/Header.tsx | 9 ++--- components/Menu.tsx | 60 +++++++++++++++---------------- components/Navbar.tsx | 16 ++++----- components/Picture.tsx | 18 ++++++---- components/Post.ts | 21 +++++------ components/default.tsx | 8 ++--- pages/[category]/[slug].tsx | 54 ++++++++++++++++++++++------ pages/_app.tsx | 2 +- pages/_document.tsx | 12 +++---- pages/_error.tsx | 19 +++++----- pages/index.tsx | 72 +++++++++++++++++++++++++------------ pages/tag/[tag].tsx | 37 ++++++++++--------- 16 files changed, 249 insertions(+), 157 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 92f6cbe..600024d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -87,7 +87,6 @@ module.exports = { "@typescript-eslint/no-namespace": "error", "@typescript-eslint/no-parameter-properties": "off", "@typescript-eslint/no-use-before-define": "off", - "@typescript-eslint/no-var-requires": "error", "@typescript-eslint/prefer-for-of": "error", "@typescript-eslint/prefer-function-type": "error", "@typescript-eslint/prefer-namespace-keyword": "error", @@ -134,8 +133,7 @@ module.exports = { "string", "Boolean", "boolean", - "Undefined", - "undefined" + "Undefined" ], "id-match": "error", "max-classes-per-file": [ diff --git a/components/Element.tsx b/components/Element.tsx index 7fed078..5a9342c 100644 --- a/components/Element.tsx +++ b/components/Element.tsx @@ -38,7 +38,13 @@ export default class Element extends React.Component {
{this.props.image ? ( - //{this.props.alt}/ + + + ) : (
)} diff --git a/components/Filters.tsx b/components/Filters.tsx index d4aa393..4a1059d 100644 --- a/components/Filters.tsx +++ b/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 { - private input = undefined + private input: RefObject + + public constructor(props: Props) { + super(props) + + this.input = React.createRef() + } public render() { return ( @@ -35,14 +41,20 @@ export default class Filters extends React.Component {
- +

Languages :

- {this.props.categories.map((cat) => ( + {this.props.categories?.map(cat => ( {cat} @@ -93,10 +105,6 @@ export default class Filters extends React.Component { ) } - private setInput = (element) => { - this.input = element - } - private onKeyDown = (ev: React.KeyboardEvent) => { setTimeout(() => { this.submit() @@ -104,20 +112,20 @@ export default class Filters extends React.Component { } 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|FormEvent) => { + 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) } } } diff --git a/components/Footer.tsx b/components/Footer.tsx index a6be9c4..4c2b3b4 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -10,19 +10,39 @@ export default class Footer extends React.Component<{}, {}> {
- + - + - + - + - + diff --git a/components/Header.tsx b/components/Header.tsx index ead98fa..61a5d2b 100644 --- a/components/Header.tsx +++ b/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 (
{/*

Bienvenue sur le Portfolio de Florian BOUILLON !

*/}
) diff --git a/components/Menu.tsx b/components/Menu.tsx index aa8dcdf..c4ff278 100644 --- a/components/Menu.tsx +++ b/components/Menu.tsx @@ -6,37 +6,37 @@ import config from '../config' export default class Menu extends React.Component<{}, {}> { public render() { return ( -
    -
  • - - Home - -
    • - -
+ a:hover { + background: ${config.colors[500]}20 + } + `} + ) } } diff --git a/components/Navbar.tsx b/components/Navbar.tsx index c4bcec7..8b14c1e 100644 --- a/components/Navbar.tsx +++ b/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 { private height = 80 - private menuRef = undefined + private menuRef: RefObject 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 { logo - +
-
+
{this.props.children}
@@ -129,10 +131,6 @@ export default class Navbar extends React.Component { ) } - 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 { } private onClick = () => { - this.menuRef.classList.toggle('shown') + this.menuRef.current.classList.toggle('shown') } } diff --git a/components/Picture.tsx b/components/Picture.tsx index 49ed9c2..68ad9be 100644 --- a/components/Picture.tsx +++ b/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 { +export default class Picture extends Component { public render() { const sets = require(`../images${this.props.src}?resize&sizes[]=300&sizes[]=600&sizes[]=1000`) return ( - {this.props.alt} + {this.props.alt} ) } diff --git a/components/Post.ts b/components/Post.ts index efe3adb..7664859 100644 --- a/components/Post.ts +++ b/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> { const files: Array = ((require as any).context('../posts', true, /\.md$/)).keys() const posts: Array = [] @@ -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')) { diff --git a/components/default.tsx b/components/default.tsx index 049aedd..415b535 100644 --- a/components/default.tsx +++ b/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 { - constructor(props: Props) { - super(props) - } + public render() { return ( diff --git a/pages/[category]/[slug].tsx b/pages/[category]/[slug].tsx index 7e8737e..a02e379 100644 --- a/pages/[category]/[slug].tsx +++ b/pages/[category]/[slug].tsx @@ -1,3 +1,5 @@ +import React from 'react' + import { NextPageContext } from 'next' import Head from 'next/head' import Link from 'next/link' @@ -32,6 +34,11 @@ export default class PostPage extends Component { } public render() { + if (!this.props.post.header) { + return ( + + ) + } return (
@@ -42,7 +49,11 @@ export default class PostPage extends Component { content={this.props.post.header.short || this.props.post.header.title} /> - + {`${this.props.post.header.title} - ${config.og.title}`} { content={this.props.post.header.short || this.props.post.header.title} /> {this.props.post.header.image ? ( - + ) : undefined} - + {this.props.post === undefined ? ( ) : (
- - `${code}`)}/> + + `${code}`, + )} + />

Détails

Tags:

    - {this.props.post.header.tags.map((el) => ( + {this.props.post.header.tags?.map(el => (
  • {el} diff --git a/pages/_app.tsx b/pages/_app.tsx index e72a108..98f9692 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -9,7 +9,7 @@ import '../styl/styl.styl' class MyApp extends App { public componentDidMount() { - if (window.location.origin !== config.domain && window.location.hostname !== "localhost") { + if (window.location.origin !== config.domain && window.location.hostname !== 'localhost') { window.location.replace(`${config.domain}${window.location.pathname}`) } } diff --git a/pages/_document.tsx b/pages/_document.tsx index c35efd8..f2c5089 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,18 +1,14 @@ -import Document, { Head, Html, Main, NextScript } from 'next/document' +import React from 'react' + +import Document, { Head, Html, Main, NextScript, DocumentContext } from 'next/document' import config from '../config' class MyDocument extends Document { - public static async getInitialProps(ctx) { + public static async getInitialProps(ctx: DocumentContext) { const initialProps = await Document.getInitialProps(ctx) return { ...initialProps } } - public componentDidMount() { - if (window.location.origin !== config.domain && window.location.hostname !== "localhost") { - window.location.replace(`${config.domain}${window.location.pathname}`) - } - } - public render() { return ( diff --git a/pages/_error.tsx b/pages/_error.tsx index c0d272b..dcbeb37 100644 --- a/pages/_error.tsx +++ b/pages/_error.tsx @@ -5,13 +5,21 @@ import React, { Component } from 'react' interface Props { statusCode: number } - -const codesTexts = { +interface Arr { + [key: string]: string +} +const codesTexts: Arr = { 404: 'Page non trouvé !', - 500: "Le serveur n'a pas pu répondre a ta demande :O", + 500: 'Le serveur n\'a pas pu répondre a ta demande :O', } export default class Error extends Component { + + public static getInitialProps({ res, err }: NextPageContext) { + const statusCode = res ? res.statusCode : err ? err.statusCode : 404 + return { statusCode } + } + public render = () => { const statusCode = this.props.statusCode return ( @@ -45,9 +53,4 @@ export default class Error extends Component {
) } - - public static getInitialProps({ res, err }: NextPageContext) { - const statusCode = res ? res.statusCode : err ? err.statusCode : 404 - return { statusCode } - } } diff --git a/pages/index.tsx b/pages/index.tsx index 00a8d28..ff07f09 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,3 +1,5 @@ +import React from 'react' + import { Component } from 'react' import Element from '../components/Element' import Filters from '../components/Filters' @@ -24,14 +26,15 @@ export default class Page extends Component { const posts = await Post.fetchAll() const header: Array = [] const cats: Array = [] - posts.forEach((el) => { + posts.forEach(el => { el.fetchSync() + if (!el.header) { + return + } header.push(el.header) - cats.push(...el.header.tags) - }) - header.sort((a, b) => { - return (a.date < b.date) ? 1 : -1 + cats.push(...el.header.tags || []) }) + header.sort((a, b) => (a.date < b.date) ? 1 : -1) cats.sort((a, b) => (a < b) ? -1 : 1) @@ -44,10 +47,17 @@ export default class Page extends Component { } public render() { + const asideHeight = this.state?.asideHeight ? this.state.asideHeight + 100 : 600 return (
- {this.state && this.state.elements && this.state.elements.length !== 0 ? this.state.elements.map((el, index) => ( + {!this.state || !this.state.elements && ( +
Chargement en cours... 😃
+ )} + {this.state && this.state.loaded && this.state.elements.length === 0 && ( +
La recherche n'a rien donnée 😢
+ )} + {this.state && this.state.elements && this.state.elements.map((el, index) => ( { alt={el.imageAlt} date={el.date || new Date()} /> - )) : this.state && this.state.loaded ? ( -
La recherche n'a rien donnée 😢
- ) : ( -
Chargement en cours... 😃
- )} + ))} - +