Split categories and bookmarks forms into separate files. Added visibility functionality to categories and bookmarks

client/src/components/Bookmarks/Form/Form.tsx

@@ -0,0 +1,44 @@
+// Typescript
+import { Bookmark, Category } from '../../../interfaces';
+import { ContentType } from '../Bookmarks';
+
+// Utils
+import { CategoryForm } from './CategoryForm';
+import { BookmarksForm } from './BookmarksForm';
+import { Fragment } from 'react';
+
+interface Props {
+  modalHandler: () => void;
+  contentType: ContentType;
+  inUpdate?: boolean;
+  category?: Category;
+  bookmark?: Bookmark;
+}
+
+export const Form = (props: Props): JSX.Element => {
+  const { modalHandler, contentType, inUpdate, category, bookmark } = props;
+
+  return (
+    <Fragment>
+      {!inUpdate ? (
+        // form: add new
+        <Fragment>
+          {contentType === ContentType.category ? (
+            <CategoryForm modalHandler={modalHandler} />
+          ) : (
+            <BookmarksForm modalHandler={modalHandler} />
+          )}
+        </Fragment>
+      ) : (
+        // form: update
+        <Fragment>
+          {contentType === ContentType.category ? (
+            <CategoryForm modalHandler={modalHandler} category={category} />
+          ) : (
+            <BookmarksForm modalHandler={modalHandler} bookmark={bookmark} />
+          )}
+        </Fragment>
+      )}
+    </Fragment>
+  );
+};