add Name of file to preview Link (#187)

* add Name of file to preview Link

* add story for new fodler

* update snapshots

* undo package-lock change

* rename story

* try to fix storybook: storybookjs/storybook#15067

Author: qvalentin

.storybook/main.js

@@ -1,11 +1,14 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app"
-  ]
-}
+    stories: [
+        "../src/**/*.stories.mdx",
+        "../src/**/*.stories.@(js|jsx|ts|tsx)"
+    ],
+    addons: [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@storybook/preset-create-react-app"
+    ],
+    typescript: {
+        reactDocgen: "none"
+    }
+};

src/__tests__/__snapshots__/storybook.test.ts.snap

@@ -52,6 +52,86 @@ exports[`Storyshots Filesystem FilesystemContextMenu 1`] = `
 </div>
 `;
 
+exports[`Storyshots Filesystem NewFolderModal 1`] = `
+<form
+  className=""
+  onSubmit={[Function]}
+>
+  <div
+    className="modal-header"
+  >
+    <div
+      className="modal-title h4"
+    >
+      Create new Directory
+    </div>
+    <button
+      className="close"
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        aria-hidden="true"
+      >
+        ×
+      </span>
+      <span
+        className="sr-only"
+      >
+        Close
+      </span>
+    </button>
+  </div>
+  <div
+    className="modal-body"
+  >
+    <div
+      className="form-group"
+    >
+      <label
+        className="form-label"
+        htmlFor="formFolderName"
+      >
+        Folder name
+      </label>
+      <input
+        className="form-control"
+        id="formFolderName"
+        onChange={[Function]}
+        placeholder="e.g. My Cat Pictures"
+        type="text"
+        value=""
+      />
+    </div>
+    
+  </div>
+  <div
+    className="modal-footer"
+  >
+    <div
+      className="w-100 justify-content-between row"
+    >
+      <button
+        className="btn btn-secondary"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+      >
+        Abort
+      </button>
+      <button
+        className="btn btn-primary"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
+      >
+        Create Folder
+      </button>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`Storyshots Filesystem SearchModal 1`] = `
 Array [
   <div

src/components/pages/filesytem/FileListItem.tsx

@@ -91,7 +91,10 @@ function FileListItem(props: Props): ReactElement {
                     to={
                         isFolder
                             ? `/file${props.fileListItem.path ?? ""}`
-                            : "/data/preview/" + props.fileListItem.fileSystemId
+                            : "/data/preview/" +
+                              props.fileListItem.fileSystemId +
+                              "/" +
+                              props.fileListItem.name
                     }
                 >
                     {props.fileListItem.name}

src/components/pages/filesytem/upload/NewFolderModalContent.stories.tsx

@@ -0,0 +1,28 @@
+import { storiesOf } from "@storybook/react";
+import { Provider } from "react-redux";
+import store from "../../../../background/redux/store";
+import { BrowserRouter } from "react-router-dom";
+import React from "react";
+import { NewFolderModalContent } from "./NewFolderModalContent";
+import { filesystemPath, hostname } from "../../../../background/api/api";
+import MockAdapter from "axios-mock-adapter";
+import axios from "axios";
+import folderContentMock from "../__tests__/folderContentMock.json";
+
+storiesOf("Filesystem", module).add("NewFolderModal", () => {
+    const API_REQUEST = hostname + filesystemPath + "2/folder/create";
+
+    const mock = new MockAdapter(axios);
+    mock.onPost(API_REQUEST).reply(200, folderContentMock[0]);
+
+    return (
+        <Provider store={store}>
+            <BrowserRouter>
+                <NewFolderModalContent
+                    handleClose={() => {}}
+                    currentFsItemId={"2"}
+                />
+            </BrowserRouter>
+        </Provider>
+    );
+});

src/components/pages/filesytem/upload/NewFolderModalContent.tsx

@@ -34,11 +34,11 @@ function NewFolderModalContent({ handleClose, currentFsItemId }: Props) {
                 setError("");
                 handleClose();
             })
-            .catch((error) =>
+            .catch((error) => {
                 setError(
-                    error.response?.data.message ?? "Something went wrong :("
-                )
-            );
+                    error.response?.data?.message ?? "Something went wrong :("
+                );
+            });
     }
 
     return (