From 5b706ebc377a4e5cb20adf0354d073110078fa4b Mon Sep 17 00:00:00 2001
From: Mosh Feu <moshfeu@gmail.com>
Date: Sun, 6 Jan 2019 15:57:55 +0200
Subject: [PATCH] resolve #13 Display not supported URL invalid or unsupported
 links

---
 package.json                                       |  1 +
 .../electron-events-listener.tsx                   |  2 +-
 src/components/main.tsx                            |  7 ++++++-
 src/mobx/store.ts                                  |  6 ++++++
 src/services/api.ts                                |  3 +++
 src/services/{modals.ts => modalsAndAlerts.ts}     |  7 +++++++
 src/styles/components/main.scss                    | 14 ++++++++++++++
 7 files changed, 38 insertions(+), 2 deletions(-)
 rename src/services/{modals.ts => modalsAndAlerts.ts} (77%)

diff --git a/package.json b/package.json
index 5be0a21..8ce8e5e 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "coveralls": "jest --coverage && cat ./coverage/lcov.info | coveralls"
   },
   "dependencies": {
+    "classnames": "^2.2.6",
     "downloads-folder": "^1.0.1",
     "electron-is-dev": "^1.0.1",
     "enzyme": "^3.7.0",
diff --git a/src/components/electron-events-listener/electron-events-listener.tsx b/src/components/electron-events-listener/electron-events-listener.tsx
index 6e0289a..8f618eb 100644
--- a/src/components/electron-events-listener/electron-events-listener.tsx
+++ b/src/components/electron-events-listener/electron-events-listener.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import { ipcRenderer } from '../../services/electron-adapter';
-import { openAbout, openPreferences } from '../../services/modals';
+import { openAbout, openPreferences } from '../../services/modalsAndAlerts';
 
 @observer
 export class ElectronEventsListener extends React.Component {
diff --git a/src/components/main.tsx b/src/components/main.tsx
index 98f5d4e..1edbf01 100644
--- a/src/components/main.tsx
+++ b/src/components/main.tsx
@@ -13,7 +13,9 @@ import { InstallFFMpeg } from './install-ffmpeg';
 import { AboutModal } from './about-modal';
 import { PreferencesModal } from './preferences-modal/preferences-modal';
 import { ElectronEventsListener } from './electron-events-listener';
-import { closeModal} from '../services/modals';
+import { closeModal} from '../services/modalsAndAlerts';
+import { Message } from 'semantic-ui-react';
+import * as classNames from 'classNames';
 
 @observer
 class Main extends React.Component<{}, {}> {
@@ -63,6 +65,9 @@ class Main extends React.Component<{}, {}> {
         }
         <AboutModal open={store.isAboutOpen} onClose={closeModal} />
         <PreferencesModal open={store.isPreferencesOpen} onClose={closeModal} />
+        <div className={classNames('errors', {'-has-errors': store.termsIsInvalid})}>
+          <Message color="red" compact>Can't find media (url is not supported or invalid)</Message>
+        </div>
       </div>
     );
   }
diff --git a/src/mobx/store.ts b/src/mobx/store.ts
index ca8ef3d..9d0dbf7 100644
--- a/src/mobx/store.ts
+++ b/src/mobx/store.ts
@@ -3,6 +3,7 @@ import { IVideoEntity, EVideoStatus } from '../types';
 import { fetchVideos } from '../services/api';
 import { IVideoTask } from 'youtube-mp3-downloader';
 import { isFFMpegInstalled } from '../services/ffmpeg-installer';
+import { showTermsIsInvalid } from '../services/modalsAndAlerts';
 
 class Store {
   @observable searchTerm: string;
@@ -11,6 +12,7 @@ class Store {
   @observable isFFMpegInstalled: boolean;
   @observable isAboutOpen: boolean;
   @observable isPreferencesOpen: boolean;
+  @observable termsIsInvalid: boolean;
 
   constructor() {
     this.isFFMpegInstalled = isFFMpegInstalled();
@@ -19,7 +21,11 @@ class Store {
   @action search = async (term: string): Promise<void> => {
     this.searchTerm = term;
     this.searchInProgress = true;
+    this.termsIsInvalid = false;
     this.videos = await fetchVideos(this.searchTerm);
+    if (!this.videos.length) {
+      showTermsIsInvalid();
+    }
     this.searchInProgress = false;
   }
 
diff --git a/src/services/api.ts b/src/services/api.ts
index 1c10e8b..66bfc39 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -34,6 +34,9 @@ export function setFfmpegPath() {
 export function fetchVideos(term: string): Promise<IVideoEntity[]> {
   try {
     const parsedTerm = urlParser.parse(term);
+    if (!parsedTerm) {
+      return Promise.resolve([]);
+    }
     if (parsedTerm.list) {
       return fetchVideosFromList(term);
     }
diff --git a/src/services/modals.ts b/src/services/modalsAndAlerts.ts
similarity index 77%
rename from src/services/modals.ts
rename to src/services/modalsAndAlerts.ts
index edf611f..e91df60 100644
--- a/src/services/modals.ts
+++ b/src/services/modalsAndAlerts.ts
@@ -21,4 +21,11 @@ export function closeModal() {
       store.isPreferencesOpen = false;
     break;``
   }
+}
+
+export function showTermsIsInvalid() {
+  store.termsIsInvalid = true;
+  setTimeout(() => {
+    store.termsIsInvalid = false;
+  }, 3000);
 }
\ No newline at end of file
diff --git a/src/styles/components/main.scss b/src/styles/components/main.scss
index 9585f2c..c907947 100644
--- a/src/styles/components/main.scss
+++ b/src/styles/components/main.scss
@@ -2,4 +2,18 @@
   .videos {
     margin-top: 10px;
   }
+
+  .errors {
+    position: fixed;
+    opacity: 0;
+    width: 100%;
+    text-align: center;
+    transition: opacity .3s ease;
+    bottom: 10px;
+
+    &.-has-errors {
+      pointer-events: none;
+      opacity: 1;
+    }
+  }
 }
\ No newline at end of file