Media (#24)

* checkout

* started media explorer?

* icons in directory

* icons appear on hover

* added grid to media object list

* edit handling

* changed mediaobjectmenu to functional component

* added folder select

* set up refs for outside click cancelling rename

* added enter shortcut for renaming

* removed checkmarks

* added delete confirm

* fixed bug

* fixed child folder select

* blocked select on rename

* display

* styling

* styling

* started breadcrumb (error)

* breadcrumb

* fixed breadcrumb

* started connecting redux

* started media object redux

* redux

* redux

* added console logging

Author: jackrhumphrey

src/components/content-documents/ContentDocumentEdit.tsx

@@ -2,18 +2,13 @@ import * as React from "react";
 
 import { useParams, useHistory } from "react-router-dom";
 
-
 import { IContentDocument, IObjectModel } from 'models';
 
-
-
 import HtmlSettingsTab from './ContentDocumentTabs/HtmlSettingsTab';
 import MetaSettingsTab from './ContentDocumentTabs/MetaSettingsTab';
 
 import { Tab } from 'semantic-ui-react';
 
-
-
 interface IRouteParams {
   id: string;
 }
@@ -45,7 +40,6 @@ const ContentDocumentEdit: React.FC<IContentDocumentEditProps> = ({ contentDocum
       {
         menuItem: 'Meta Properties',
         render: () => <MetaSettingsTab onPropertyUpdate={onValueChange} objectModels={[...objectModels.values()]} contentDocument={contentDocument} />
-
       }
     ]
   } />);

src/components/media-objects/MediaObjectMenu.tsx

@@ -14,13 +14,16 @@ interface IMediaObjectMenuProps extends RouteComponentProps {
     mediaObjects: IMediaObject[];
     selectedMediaObjectId: string;
     setSelectedMediaObject(id: string): void;
+    editMediaObject(mediaObjects: Map<string, IMediaObject>): void
+    deleteMediaObject(mediaObjects: Map<string, IMediaObject>): void;
 }
 
 const MediaObjectMenu: React.FC<IMediaObjectMenuProps> = ({ mediaObjects, selectedMediaObjectId, setSelectedMediaObject }) => {
 
     const [editField, setEditField] = React.useState("");
     const [editFieldValue, setEditFieldValue] = React.useState("");
     const [dialog, confirm] = React.useState<IConfirmDialogProps>();
+    const [mediaObject, updateMediaObject] = React.useState<IMediaObject>();
 
     React.useEffect(() => {
         document.addEventListener("mousedown", handleClick);
@@ -38,6 +41,7 @@ const MediaObjectMenu: React.FC<IMediaObjectMenuProps> = ({ mediaObjects, select
             }
         }
         setEditField("");
+        // editMediaObject(new Map([...mediaObjects]);
     };
 
     const editButtonHandler = React.useCallback(
@@ -47,15 +51,14 @@ const MediaObjectMenu: React.FC<IMediaObjectMenuProps> = ({ mediaObjects, select
         }, [])
 
     const deleteButtonHandler = React.useCallback((mediaObject) => {
-        console.log("delete");
         confirm({
             message: "Are you sure you want to delete " + mediaObject.name + "?",
             confirmAction: () => {
-                setEditField("");
+                console.log("delete " + mediaObject.name);
+                // deleteMediaObject(new Map([...mediaObjects]);
                 confirm(undefined);
             },
             cancelAction: () => {
-                setEditField("");
                 confirm(undefined);
             },
         });

src/components/media-objects/media-object-list.tsx

@@ -17,13 +17,16 @@ interface IMediaObjectListProps {
     mediaObjects: IMediaObject[];
     selectedMediaObjectId: string;
     setSelectedMediaObject(id: string): void;
+    editMediaObject(mediaObjects: Map<string, IMediaObject>): void
+    deleteMediaObject(mediaObjects: Map<string, IMediaObject>): void;
 }
 
-const MediaObjectList: React.FC<IMediaObjectListProps> = ({ mediaObjects, selectedMediaObjectId, setSelectedMediaObject }) => {
+const MediaObjectList: React.FC<IMediaObjectListProps> = ({ mediaObjects, selectedMediaObjectId, setSelectedMediaObject, editMediaObject, deleteMediaObject }) => {
 
     const [editField, setEditField] = React.useState(-1);
     const [editFieldValue, setEditFieldValue] = React.useState("");
     const [dialog, confirm] = React.useState<IConfirmDialogProps>();
+    const [mediaObject, updateMediaObject] = React.useState<IMediaObject>();
 
     React.useEffect(() => {
         document.addEventListener("mousedown", handleClick);
@@ -40,7 +43,8 @@ const MediaObjectList: React.FC<IMediaObjectListProps> = ({ mediaObjects, select
                 return;
             }
         }
-        setEditField(-1)
+            setEditField(-1);
+        // editMediaObject(new Map([...mediaObjects]);
     };
 
     const editButtonHandler = React.useCallback(
@@ -50,15 +54,14 @@ const MediaObjectList: React.FC<IMediaObjectListProps> = ({ mediaObjects, select
         }, [])
 
     const deleteButtonHandler = React.useCallback((index, object) => {
-        console.log("delete");
         confirm({
             message: "Are you sure you want to delete " + object.name + "?",
             confirmAction: () => {
-                setEditField(-1);
+                console.log("delete " + object.name);
+                // deleteMediaObject(new Map([...mediaObjects]);
                 confirm(undefined);
             },
             cancelAction: () => {
-                setEditField(-1);
                 confirm(undefined);
             },
         });
@@ -69,7 +72,7 @@ const MediaObjectList: React.FC<IMediaObjectListProps> = ({ mediaObjects, select
             {dialog && <ConfirmDialog {...dialog} />}
             <MediaObjectToolbar mediaObjects={mediaObjects} selectedMediaObjectId={selectedMediaObjectId} />
             <Sidebar.Pushable as={Segment} className="workspace" attached={true}>
-                <MediaObjectMenu mediaObjects={mediaObjects} selectedMediaObjectId={selectedMediaObjectId} setSelectedMediaObject={setSelectedMediaObject} />
+                <MediaObjectMenu mediaObjects={mediaObjects} selectedMediaObjectId={selectedMediaObjectId} setSelectedMediaObject={setSelectedMediaObject} editMediaObject={editMediaObject} deleteMediaObject={deleteMediaObject} />
                 <Sidebar.Pusher>
                     <AppContent>
                         {mediaObjects.length === 0 ? (

src/models/index.ts

@@ -28,7 +28,6 @@ export interface IContentDocument {
   htmlProperties: IDocumentProperty[];
   metaProperties: IDocumentProperty[];
 }
-
 export interface IMediaObject {
   id: string;
   objectType: IMediaObjectType;

src/pages/media-objects.tsx

@@ -1,23 +1,34 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+import { IMediaObject } from 'models';
 
 import { IAppState } from 'store/State';
-import { SELECT_MEDIA_OBJECT } from 'store/actions/MediaObject';
+import { SELECT_MEDIA_OBJECT, EDIT_MEDIA_OBJECT, DELETE_MEDIA_OBJECT } from 'store/actions/MediaObject';
 
 import Layout from 'components/layout';
 import MediaObjectList from 'components/media-objects/media-object-list';
 
-
-
 const MediaObjectsPage: React.FC = () => {
+
     const { mediaObjects, selectedMediaObjectId } = useSelector((appState: IAppState) => appState.mediaObject);
 
+    const [mediaObject, updateMediaObject] = React.useState<IMediaObject>();
+
     const dispatch = useDispatch();
 
     const selectMediaObject = React.useCallback((mediaObjectId: string) => dispatch({ type: SELECT_MEDIA_OBJECT, selectedMediaObjectId: mediaObjectId }), [dispatch]);
 
+    const editMediaObject = React.useCallback((mediaObjects: Map<string, IMediaObject>) => dispatch({ type: EDIT_MEDIA_OBJECT, mediaObjects: mediaObjects }), [dispatch]);
+
+    const deleteMediaObject = React.useCallback((mediaObjects: Map<string, IMediaObject>) => {
+        if (mediaObject) {
+            mediaObjects.delete(mediaObject.id);
+            dispatch({ type: DELETE_MEDIA_OBJECT, mediaObjects: mediaObjects });
+        }
+    }, [dispatch]);
+
     return (<Layout>
-        <MediaObjectList mediaObjects={[...mediaObjects.values()]} selectedMediaObjectId={selectedMediaObjectId} setSelectedMediaObject={selectMediaObject} />
+        <MediaObjectList mediaObjects={[...mediaObjects.values()]} selectedMediaObjectId={selectedMediaObjectId} editMediaObject={editMediaObject} deleteMediaObject={deleteMediaObject} setSelectedMediaObject={selectMediaObject} />
     </Layout>)
 }