typescriptify Popupbase

focus textfield on filterclick

src/pages/HomePage/HomePage.tsx

@@ -7,9 +7,9 @@ import style from './HomePage.module.css';
 import PageTitle, {Line} from '../../elements/PageTitle/PageTitle';
 import {callAPI} from '../../utils/Api';
 import {Route, Switch, withRouter} from 'react-router-dom';
-import {VideoUnloadedType} from '../../api/VideoTypes';
 import {RouteComponentProps} from 'react-router';
 import SearchHandling from './SearchHandling';
+import {VideoTypes} from '../../types/ApiTypes';
 
 interface props extends RouteComponentProps {}
 
@@ -22,18 +22,10 @@ interface state {
         tagnr: number
     },
     subtitle: string,
-    data: VideoUnloadedType[],
+    data: VideoTypes.VideoUnloadedType[],
     selectionnr: number
 }
 
-interface startDataData {
-    total: number;
-    fullhd: number;
-    hd: number;
-    sd: number;
-    tags: number;
-}
-
 /**
  * The home page component showing on the initial pageload
  */
@@ -71,7 +63,7 @@ export class HomePage extends React.Component<props, state> {
      * @param tag tag to fetch videos
      */
     fetchVideoData(tag: string): void {
-        callAPI('video.php', {action: 'getMovies', tag: tag}, (result: VideoUnloadedType[]) => {
+        callAPI('video.php', {action: 'getMovies', tag: tag}, (result: VideoTypes.VideoUnloadedType[]) => {
             this.setState({
                 data: []
             });
@@ -87,7 +79,7 @@ export class HomePage extends React.Component<props, state> {
      * fetch the necessary data for left info box
      */
     fetchStartData(): void {
-        callAPI('video.php', {action: 'getStartData'}, (result: startDataData) => {
+        callAPI('video.php', {action: 'getStartData'}, (result: VideoTypes.startDataType) => {
             this.setState({
                 sideinfo: {
                     videonr: result['total'],

src/pages/HomePage/SearchHandling.tsx

@@ -2,10 +2,10 @@ import {RouteComponentProps} from 'react-router';
 import React from 'react';
 import {withRouter} from 'react-router-dom';
 import {callAPI} from '../../utils/Api';
-import {VideoUnloadedType} from '../../api/VideoTypes';
 import VideoContainer from '../../elements/VideoContainer/VideoContainer';
 import PageTitle from '../../elements/PageTitle/PageTitle';
 import SideBar from '../../elements/SideBar/SideBar';
+import {VideoTypes} from '../../types/ApiTypes';
 
 interface params {
     name: string;
@@ -14,7 +14,7 @@ interface params {
 interface props extends RouteComponentProps<params> {}
 
 interface state {
-    data: VideoUnloadedType[];
+    data: VideoTypes.VideoUnloadedType[];
 }
 
 export class SearchHandling extends React.Component<props, state> {
@@ -59,7 +59,7 @@ export class SearchHandling extends React.Component<props, state> {
      * @param keyword The keyword to search for
      */
     searchVideos(keyword: string): void {
-        callAPI('video.php', {action: 'getSearchKeyWord', keyword: keyword}, (result: VideoUnloadedType[]) => {
+        callAPI('video.php', {action: 'getSearchKeyWord', keyword: keyword}, (result: VideoTypes.VideoUnloadedType[]) => {
             this.setState({
                 data: result
             });