Migration du client sur Typescript

client/src/components/BoardPage/EditBoardPage.tsx

@@ -1,13 +1,19 @@
 import React from 'react';
 import { Page } from '../Page';
-import { connect } from 'react-redux';
+import { connect, DispatchProp } from 'react-redux';
 import { selectFlagsIsLoading } from '../../store/selectors/flags';
 import { fetchBoards, saveBoard, deleteBoard } from '../../store/actions/boards';
 import { fetchProjects } from '../../store/actions/projects';
 import uuidv4 from 'uuid/v4';
 import { Loader } from '../Loader';
+import { RouteComponentProps } from 'react-router';
 
-export class EditBoardPage extends React.Component {
+export interface EditorBoardPageProps extends DispatchProp, RouteComponentProps {
+  isLoading: boolean
+  projects: any
+}
+
+export class EditBoardPage extends React.Component<EditorBoardPageProps> {
 
   state = {
     edited: false,
@@ -20,7 +26,12 @@ export class EditBoardPage extends React.Component {
     },
   }
 
-  static getDerivedStateFromProps(props, state) {
+  onBoardTitleChange: (evt: any) => void;
+  onBoardDescriptionChange: (evt: any) => void;
+  onBoardLaneTitleChange: (laneIndex: any, evt: any) => void;
+  onBoardLaneIssueLabelChange: (laneIndex: any, evt: any) => void;
+
+  static getDerivedStateFromProps(props: any, state: any) {
     const { board, isLoading } = props;
 
     if (isLoading || !board || state.edited) return state;
@@ -32,12 +43,12 @@ export class EditBoardPage extends React.Component {
         title: board.title,
         description: board.description,
         projects: [ ...board.projects ],
-        lanes: [ ...board.lanes.map(l => ({ ...l })) ]
+        lanes: [ ...board.lanes.map((l: any) => ({ ...l })) ]
       }
     };
   } 
 
-  constructor(props) {
+  constructor(props: any) {
     super(props);
     this.onBoardTitleChange = this.onBoardAttrChange.bind(this, 'title');
     this.onBoardDescriptionChange = this.onBoardAttrChange.bind(this, 'description');
@@ -129,15 +140,15 @@ export class EditBoardPage extends React.Component {
     const { projects } = this.props;
     const { board } = this.state;
 
-    const  projectSelectField = (projectIndex, value, withDeleteAddon) => {
+    const  projectSelectField = (projectIndex: number, value: any, withDeleteAddon: boolean) => {
       return (
         <div key={`project-${projectIndex}`} className="field has-addons">
           <div className="control is-expanded">
             <div className="select is-fullwidth">
               <select value={value} onChange={this.onBoardProjectChange.bind(this, projectIndex)}>
-                <option value></option>
+                <option value=""></option>
                 {
-                  projects.map(p => {
+                  projects.map((p: any) => {
                     return <option key={`project-${p}`} value={p}>{p}</option>;
                   })
                 }
@@ -179,7 +190,7 @@ export class EditBoardPage extends React.Component {
 
     const { board } = this.state;
  
-    const laneSection = (laneIndex, lane) => {
+    const laneSection = (laneIndex: number, lane: any) => {
       return (
         <React.Fragment key={`board-lane-${laneIndex}`}>
           <div className="columns">
@@ -266,7 +277,7 @@ export class EditBoardPage extends React.Component {
   }
 
   onBoardLaneAdd() {
-    this.setState(state => {
+    this.setState((state: any) => {
       const lanes = [ 
         ...state.board.lanes, 
         { id: uuidv4(), title: "", issueLabel: "" }
@@ -282,8 +293,8 @@ export class EditBoardPage extends React.Component {
     });
   }
 
-  onBoardProjectDelete(projectIndex) {
-    this.setState(state => {
+  onBoardProjectDelete(projectIndex: number) {
+    this.setState((state: any) => {
       const projects = [ ...state.board.projects ]
       projects.splice(projectIndex, 1); 
       return {
@@ -297,8 +308,8 @@ export class EditBoardPage extends React.Component {
     });
   }
 
-  onBoardLaneMove(laneIndex, direction) {
-    this.setState(state => {
+  onBoardLaneMove(laneIndex: number, direction: number) {
+    this.setState((state: any) => {
       const lanes = [ ...state.board.lanes ];
 
       const nextLaneIndex = laneIndex+direction;
@@ -321,8 +332,8 @@ export class EditBoardPage extends React.Component {
     });
   }
 
-  onBoardLaneDelete(laneIndex) {
-    this.setState(state => {
+  onBoardLaneDelete(laneIndex: number) {
+    this.setState((state: any) => {
       const lanes = [ ...state.board.lanes ]
       lanes.splice(laneIndex, 1); 
       return {
@@ -336,9 +347,9 @@ export class EditBoardPage extends React.Component {
     });
   }
 
-  onBoardProjectChange(projectIndex, evt) {
-    const value = evt.target.value;
-    this.setState(state => {
+  onBoardProjectChange(projectIndex: number, evt: React.ChangeEvent) {
+    const value = (evt.target as HTMLInputElement).value ;
+    this.setState((state: any) => {
       const projects = [ ...state.board.projects ]; 
       projects[projectIndex] = value;
       return {
@@ -352,9 +363,9 @@ export class EditBoardPage extends React.Component {
     });
   }
 
-  onBoardAttrChange(attrName, evt) {
-    const value = evt.target.value;
-    this.setState(state => {
+  onBoardAttrChange(attrName: string, evt: React.ChangeEvent) {
+    const value = (evt.target as HTMLInputElement).value;
+    this.setState((state: any) => {
       return {
         ...state,
         edited: true,
@@ -366,9 +377,9 @@ export class EditBoardPage extends React.Component {
     });
   }
 
-  onBoardLaneAttrChange(attrName, laneIndex, evt) {
-    const value = evt.target.value;
-    this.setState(state => {
+  onBoardLaneAttrChange(attrName: string, laneIndex: number, evt: React.ChangeEvent) {
+    const value = (evt.target as HTMLInputElement).value;
+    this.setState((state: any) => {
       const lanes = [ ...state.board.lanes ];
       lanes[laneIndex] = {
         ...state.board.lanes[laneIndex],
@@ -406,7 +417,7 @@ export class EditBoardPage extends React.Component {
 
 }
 
-export const ConnectedEditBoardPage = connect(function(state, props) {
+export const ConnectedEditBoardPage = connect(function(state: any, props: any) {
   const boardID = props.match.params.id;
   const board = boardID ? state.boards.byID[boardID] : null;
 

client/src/components/BoardPage/IssueCard.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-const issueURLPattern = /(^https?:\/\/([^\/]))$/i;
-
 export class IssueCard extends React.PureComponent {
   render() {
     const { card } = this.props;

client/src/components/HomePage/BoardCard.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 
-export class BoardCard extends React.PureComponent {
+export interface BoardProps {
+  board: any
+}
+
+export class BoardCard extends React.PureComponent<BoardProps> {
   render() {
     const { board } = this.props;
     return (

client/src/components/HomePage/HomePage.tsx

@@ -1,12 +1,17 @@
 import React from 'react';
 import { Page } from '../Page';
 import { BoardCard } from './BoardCard';
-import { connect } from 'react-redux';
+import { connect, DispatchProp } from 'react-redux';
 import { fetchBoards } from '../../store/actions/boards';
 import { fetchProjects } from '../../store/actions/projects';
 import { selectBoardByUserProjects } from '../../store/selectors/boards';
 
-export class HomePage extends React.Component {
+export interface HomePageProps extends DispatchProp {
+  boards: any[]
+}
+
+
+export class HomePage extends React.Component<HomePageProps> {
   render() {
     return (
       <Page title="GenGitKan - Accueil">
@@ -40,8 +45,8 @@ export class HomePage extends React.Component {
         boardRows[boardRows.length-1].push(board);
         return boardRows;
       }, [])
-      .map((row, rowIndex) => {
-        const tiles = row.map((board) => {
+      .map((row: any, rowIndex: number) => {
+        const tiles = row.map((board: any) => {
           return (
             <div key={`board-${board.id}`} className={`tile is-parent is-4`}>
               <div className="tile is-child">
@@ -72,7 +77,7 @@ export class HomePage extends React.Component {
 
 }
 
-export const ConnectedHomePage = connect(function(state) {
+export const ConnectedHomePage = connect(function(state: any) {
   return {
     boards: selectBoardByUserProjects(state.boards.byID, state.projects.byName)
   };

client/src/components/Modal.tsx

@@ -1,6 +1,12 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
-export class Modal extends React.PureComponent {
+export interface ModalProps {
+  active: boolean
+  showCloseButton: boolean
+  onClose: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+}
+
+export class Modal extends React.PureComponent<PropsWithChildren<ModalProps>> {
   render() {
     const { children, active, showCloseButton, onClose } = this.props;
     return (

client/src/components/Page.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import { Navbar } from './Navbar';
 
-export class Page extends React.PureComponent {
+export interface PageProps {
+  title?: string
+}
+
+export class Page extends React.PureComponent<PageProps> {
   render() {
     return (
       <React.Fragment>