From be4a7db4a03cdd63f34ed01d7c154592760ce75a Mon Sep 17 00:00:00 2001
From: lukas <lukas.heiligenbrunner@gmail.com>
Date: Sun, 26 Sep 2021 22:41:48 +0200
Subject: [PATCH] correct redirect to search page, avoid duplicate keys on
 moviesettingspage

---
 src/pages/HomePage/HomePage.tsx          | 205 ++++++++++++-----------
 src/pages/SettingsPage/MovieSettings.tsx |   4 +-
 2 files changed, 108 insertions(+), 101 deletions(-)

diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx
index 4a8be75..bb568f4 100644
--- a/src/pages/HomePage/HomePage.tsx
+++ b/src/pages/HomePage/HomePage.tsx
@@ -67,6 +67,17 @@ export class HomePage extends React.Component<Props, state> {
         this.fetchStartData();
     }
 
+    render(): JSX.Element {
+        return (
+            <Switch>
+                <Route path='/media/search/:name'>
+                    <SearchHandling />
+                </Route>
+                <Route path='/media/'>{this.homepageContent()}</Route>
+            </Switch>
+        );
+    }
+
     /**
      * fetch available videos for specified tag
      * this function clears all preview elements an reloads gravity with tag
@@ -95,109 +106,105 @@ export class HomePage extends React.Component<Props, state> {
         });
     }
 
-    render(): JSX.Element {
+    /**
+     * main content of homepage
+     */
+    homepageContent(): JSX.Element {
         return (
             <>
-                <Switch>
-                    <Route path='/search/:name'>
-                        <SearchHandling />
-                    </Route>
-                    <Route path='/'>
-                        <PageTitle title='Home Page' subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}>
-                            <form
-                                className={'form-inline ' + style.searchform}
-                                onSubmit={(e): void => {
-                                    e.preventDefault();
-                                    this.props.history.push('/search/' + this.keyword);
-                                }}>
-                                <input
-                                    data-testid='searchtextfield'
-                                    className='form-control mr-sm-2'
-                                    type='text'
-                                    placeholder='Search'
-                                    onChange={(e): void => {
-                                        this.keyword = e.target.value;
-                                    }}
-                                />
-                                <button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>
-                                    Search
-                                </button>
-                            </form>
-                        </PageTitle>
-                        <SideBar>
-                            <SideBarTitle>Infos:</SideBarTitle>
-                            <Line />
-                            <SideBarItem>
-                                <b>{this.state.sideinfo.VideoNr}</b> Videos Total!
-                            </SideBarItem>
-                            <SideBarItem>
-                                <b>{this.state.sideinfo.FullHdNr}</b> FULL-HD Videos!
-                            </SideBarItem>
-                            <SideBarItem>
-                                <b>{this.state.sideinfo.HDNr}</b> HD Videos!
-                            </SideBarItem>
-                            <SideBarItem>
-                                <b>{this.state.sideinfo.SDNr}</b> SD Videos!
-                            </SideBarItem>
-                            <SideBarItem>
-                                <b>{this.state.sideinfo.DifferentTags}</b> different Tags!
-                            </SideBarItem>
-                            <Line />
-                            <SideBarTitle>Default Tags:</SideBarTitle>
-                            <Tag
-                                tagInfo={{TagName: 'All', TagId: DefaultTags.all.TagId}}
-                                onclick={(): void => {
-                                    this.tagState = DefaultTags.all;
-                                    this.fetchVideoData();
-                                    this.setState({subtitle: 'All Videos'});
-                                }}
-                            />
-                            <Tag
-                                tagInfo={{TagName: 'Full Hd', TagId: DefaultTags.fullhd.TagId}}
-                                onclick={(): void => {
-                                    this.tagState = DefaultTags.fullhd;
-                                    this.fetchVideoData();
-                                    this.setState({subtitle: 'Full Hd Videos'});
-                                }}
-                            />
-                            <Tag
-                                tagInfo={{TagName: 'Low Quality', TagId: DefaultTags.lowq.TagId}}
-                                onclick={(): void => {
-                                    this.tagState = DefaultTags.lowq;
-                                    this.fetchVideoData();
-                                    this.setState({subtitle: 'Low Quality Videos'});
-                                }}
-                            />
-                            <Tag
-                                tagInfo={{TagName: 'HD', TagId: DefaultTags.hd.TagId}}
-                                onclick={(): void => {
-                                    this.tagState = DefaultTags.hd;
-                                    this.fetchVideoData();
-                                    this.setState({subtitle: 'HD Videos'});
-                                }}
-                            />
-                        </SideBar>
-                        <div>
-                            <span className={style.sortbyLabel}>Sort By: </span>
-                            <div className={style.dropdown}>
-                                <span className={style.dropbtn}>
-                                    <span>{this.state.sortby}</span>
-                                    <FontAwesomeIcon style={{marginLeft: 3, paddingBottom: 3}} icon={faSortDown} size='1x' />
-                                </span>
-                                <div className={style.dropdownContent}>
-                                    <span onClick={(): void => this.onDropDownItemClick(SortBy.date, 'Date Added')}>Date Added</span>
-                                    <span onClick={(): void => this.onDropDownItemClick(SortBy.likes, 'Most likes')}>Most likes</span>
-                                    <span onClick={(): void => this.onDropDownItemClick(SortBy.random, 'Random')}>Random</span>
-                                    <span onClick={(): void => this.onDropDownItemClick(SortBy.name, 'Name')}>Name</span>
-                                    <span onClick={(): void => this.onDropDownItemClick(SortBy.length, 'Length')}>Length</span>
-                                </div>
-                            </div>
+                <PageTitle title='Home Page' subtitle={this.state.subtitle + ' - ' + this.state.selectionnr}>
+                    <form
+                        className={'form-inline ' + style.searchform}
+                        onSubmit={(e): void => {
+                            e.preventDefault();
+                            this.props.history.push('/media/search/' + this.keyword);
+                        }}>
+                        <input
+                            data-testid='searchtextfield'
+                            className='form-control mr-sm-2'
+                            type='text'
+                            placeholder='Search'
+                            onChange={(e): void => {
+                                this.keyword = e.target.value;
+                            }}
+                        />
+                        <button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>
+                            Search
+                        </button>
+                    </form>
+                </PageTitle>
+                <SideBar>
+                    <SideBarTitle>Infos:</SideBarTitle>
+                    <Line />
+                    <SideBarItem>
+                        <b>{this.state.sideinfo.VideoNr}</b> Videos Total!
+                    </SideBarItem>
+                    <SideBarItem>
+                        <b>{this.state.sideinfo.FullHdNr}</b> FULL-HD Videos!
+                    </SideBarItem>
+                    <SideBarItem>
+                        <b>{this.state.sideinfo.HDNr}</b> HD Videos!
+                    </SideBarItem>
+                    <SideBarItem>
+                        <b>{this.state.sideinfo.SDNr}</b> SD Videos!
+                    </SideBarItem>
+                    <SideBarItem>
+                        <b>{this.state.sideinfo.DifferentTags}</b> different Tags!
+                    </SideBarItem>
+                    <Line />
+                    <SideBarTitle>Default Tags:</SideBarTitle>
+                    <Tag
+                        tagInfo={{TagName: 'All', TagId: DefaultTags.all.TagId}}
+                        onclick={(): void => {
+                            this.tagState = DefaultTags.all;
+                            this.fetchVideoData();
+                            this.setState({subtitle: 'All Videos'});
+                        }}
+                    />
+                    <Tag
+                        tagInfo={{TagName: 'Full Hd', TagId: DefaultTags.fullhd.TagId}}
+                        onclick={(): void => {
+                            this.tagState = DefaultTags.fullhd;
+                            this.fetchVideoData();
+                            this.setState({subtitle: 'Full Hd Videos'});
+                        }}
+                    />
+                    <Tag
+                        tagInfo={{TagName: 'Low Quality', TagId: DefaultTags.lowq.TagId}}
+                        onclick={(): void => {
+                            this.tagState = DefaultTags.lowq;
+                            this.fetchVideoData();
+                            this.setState({subtitle: 'Low Quality Videos'});
+                        }}
+                    />
+                    <Tag
+                        tagInfo={{TagName: 'HD', TagId: DefaultTags.hd.TagId}}
+                        onclick={(): void => {
+                            this.tagState = DefaultTags.hd;
+                            this.fetchVideoData();
+                            this.setState({subtitle: 'HD Videos'});
+                        }}
+                    />
+                </SideBar>
+                <div>
+                    <span className={style.sortbyLabel}>Sort By: </span>
+                    <div className={style.dropdown}>
+                        <span className={style.dropbtn}>
+                            <span>{this.state.sortby}</span>
+                            <FontAwesomeIcon style={{marginLeft: 3, paddingBottom: 3}} icon={faSortDown} size='1x' />
+                        </span>
+                        <div className={style.dropdownContent}>
+                            <span onClick={(): void => this.onDropDownItemClick(SortBy.date, 'Date Added')}>Date Added</span>
+                            <span onClick={(): void => this.onDropDownItemClick(SortBy.likes, 'Most likes')}>Most likes</span>
+                            <span onClick={(): void => this.onDropDownItemClick(SortBy.random, 'Random')}>Random</span>
+                            <span onClick={(): void => this.onDropDownItemClick(SortBy.name, 'Name')}>Name</span>
+                            <span onClick={(): void => this.onDropDownItemClick(SortBy.length, 'Length')}>Length</span>
                         </div>
+                    </div>
+                </div>
 
-                        <VideoContainer data={this.state.data} />
-                        <div className={style.rightinfo} />
-                    </Route>
-                </Switch>
+                <VideoContainer data={this.state.data} />
+                <div className={style.rightinfo} />
             </>
         );
     }
diff --git a/src/pages/SettingsPage/MovieSettings.tsx b/src/pages/SettingsPage/MovieSettings.tsx
index 451a2d1..52262e6 100644
--- a/src/pages/SettingsPage/MovieSettings.tsx
+++ b/src/pages/SettingsPage/MovieSettings.tsx
@@ -117,8 +117,8 @@ class MovieSettings extends React.Component<Props, state> {
                     TVShow Reindex
                 </button>
                 <div className={style.indextextarea}>
-                    {this.state.text.map((m) => (
-                        <div key={m} className='textarea-element'>
+                    {this.state.text.map((m, i) => (
+                        <div key={i} className='textarea-element'>
                             {m}
                         </div>
                     ))}