Revamped Media App w/ Sidebar

packages/@beaverbuilder/app-core/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@beaverbuilder/app-core",
-    "version": "0.2.2",
+    "version": "0.2.3",
     "description": "Utilities for managing an app registry.",
     "author": "The Beaver Builder Team",
     "license": "GPL-2.0+",

packages/@beaverbuilder/app-core/src/app/content.js

@@ -51,7 +51,7 @@ const Content = ( {
 }
 
 const CurrentApp = ( {
-	loading: LoadingScreen,
+	loading: defaultLoadingScreen,
 	error: ErrorScreen = DefaultErrorScreen,
 	apps,
 } ) => {
@@ -72,7 +72,7 @@ const CurrentApp = ( {
 		return null
 	}
 
-	const { label = '', root } = apps[ handle ]
+	const { label = '', root, loading: appLoadingScreen } = apps[ handle ]
 	const isAppRoot = 2 >= location.pathname.split( '/' ).length
 
 	const context = {
@@ -83,6 +83,8 @@ const CurrentApp = ( {
 		isAppRoot,
 	}
 
+	const LoadingScreen = appLoadingScreen ? appLoadingScreen : defaultLoadingScreen
+
 	return (
 		<AppContext.Provider value={ context }>
 			<Error.Boundary alternate={ ErrorScreen }>

src/apps/fl-home/ui/shell/style.scss

@@ -80,6 +80,18 @@
 		.fluid-page.fl-asst-home-shell {
 			.fl-asst-home-shell-sidebar {
 				background: hsl( var(--fluid-hue), 10%, 12% );
+
+				.fl-asst-home-shell-sidebar-section {
+					ul {
+						li {
+							a, button {
+								&.is-selected {
+									background: var(--fluid-opaque-3);
+								}
+							}
+						}
+					}
+				}
 			}
 		}
 	}

src/apps/fl-media/app.js

@@ -1,22 +1,34 @@
 import React from 'react'
-import { __ } from '@wordpress/i18n'
-import { App, Page, List, Filter, Button, Icon, Media } from 'assistant/ui'
-import { useAppState, getAppActions } from 'assistant/data'
-import { defaultState } from './data'
-import { UploadCard, FileList } from './ui'
-import AppIcon from './icon'
-import './style.scss'
+import { AnimateSharedLayout } from 'framer-motion'
+import { App, Page } from 'assistant/ui'
+import { Shell, MediaList } from './ui'
+import { MediaAppProvider } from './data'
 
-export default props => (
-	<App.Config
-		pages={ {
-			default: Main,
-			'attachment/:id': Page.Attachment
-		} }
-		{ ...props }
-	/>
-)
+export default props => {
+	return (
+		<MediaAppProvider { ...props }>
+			<AnimateSharedLayout>
+				<App.Config
+					pages={ {
+						default: Main,
+						'attachment/:id': Page.Attachment
+					} }
+					{ ...props }
+				/>
+			</AnimateSharedLayout>
+		</MediaAppProvider>
+	)
+}
+
+const Main = () => {
+	return (
+		<Shell>
+			<MediaList />
+		</Shell>
+	)
+}
 
+/*
 const Main = ( { baseURL } ) => {
 	const { listStyle, query, showUploader } = useAppState( 'fl-media' )
 	const { setListStyle, setQuery, setShowUploader } = getAppActions( 'fl-media' )
@@ -153,3 +165,4 @@ const Main = ( { baseURL } ) => {
 		</Page>
 	)
 }
+*/

src/apps/fl-media/config/index.js

@@ -0,0 +1,13 @@
+export const defaultState = {
+	listStyle: 'grid',
+	query: {
+		post_mime_type: 'all',
+		order: 'DESC',
+		orderby: 'date',
+		label: '0',
+	},
+	showUploader: true,
+	lastViewed: null,
+}
+
+export const cache = [ 'listStyle', 'query', 'showUploader' ]

src/apps/fl-media/data/index.js

@@ -1,12 +1,74 @@
-export const defaultState = {
-	listStyle: 'grid',
-	query: {
-		post_mime_type: 'all',
-		order: 'DESC',
-		orderby: 'date',
-		label: '0',
-	},
-	showUploader: true,
+import React, { useContext, createContext } from 'react'
+import { __ } from '@wordpress/i18n'
+import { Icon, Media } from 'assistant/ui'
+import { useAppState, getAppActions } from 'assistant/data'
+import { useAttachments } from 'assistant/utils/wordpress'
+
+export const MediaAppContext = createContext( {} )
+
+export const useMediaApp = () => useContext( MediaAppContext )
+
+export const MediaAppProvider = ( { children } ) => {
+	const { query, lastViewed, showUploader } = useAppState( 'fl-media' )
+	const { setQuery, setLastViewed, setShowUploader } = getAppActions( 'fl-media' )
+	const attachments = useAttachments( query )
+	const { files, uploadFiles: _uploadFiles, current } = Media.useMediaUploads()
+
+	const uploadFiles = files => {
+		setQuery( { ...query } )
+		_uploadFiles( files, () => {
+			console.log( 'upload complete' )
+			attachments.reloadItems()
+		} )
+	}
+
+	const context = {
+
+		// All the attachment REST info
+		...attachments,
+
+		// Current query
+		query,
+		setQuery,
+
+		// Info about file uploads and the uploader UI
+		uploads: files,
+		uploadFiles,
+		currentUpload: current,
+		showUploader,
+		setShowUploader,
+
+		// ID of the last viewed attachment detail page
+		lastViewed,
+		setLastViewed,
+	}
+
+	return (
+		<MediaAppContext.Provider value={ context }>
+			{children}
+		</MediaAppContext.Provider>
+	)
 }
 
-export const cache = [ 'listStyle', 'query', 'showUploader' ]
+export const attachmentTypes = {
+	all: {
+		label: __( 'Everything' ),
+		icon: Icon.Placeholder
+	},
+	image: {
+		label: __( 'Photos' ),
+		icon: Icon.Placeholder
+	},
+	video: {
+		label: __( 'Videos' ),
+		icon: Icon.Video
+	},
+	audio: {
+		label: __( 'Audio' ),
+		icon: Icon.Audio
+	},
+	document: {
+		label: __( 'Documents' ),
+		icon: Icon.Document
+	},
+}

src/apps/fl-media/index.js

@@ -4,7 +4,8 @@ import { __ } from '@wordpress/i18n'
 import { addQueryArgs } from 'assistant/utils/url'
 import { Page } from 'assistant/ui'
 import Icon from './icon'
-import { defaultState, cache } from './data'
+import LoadingScreen from './loading-screen'
+import { defaultState, cache } from './config'
 
 const App = lazy( () => import(
 	/* webpackChunkName: "app-media" */ './app'
@@ -14,6 +15,7 @@ registerApp( 'fl-media', {
 	label: __( 'Media' ),
 	root: App,
 	icon: Icon,
+	loading: LoadingScreen,
 	state: { ...defaultState },
 	search: {
 		label: __( 'Media' ),

src/apps/fl-media/loading-screen/index.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Layout } from 'assistant/ui'
+import './style.scss'
+
+const LoadingScreen = () => {
+	return (
+		<div className="fl-asst-media-loading-screen">
+			<Layout.SidebarBackdrop />
+		</div>
+	)
+}
+
+export default LoadingScreen

src/apps/fl-media/loading-screen/style.scss

@@ -0,0 +1,5 @@
+.fl-asst-media-loading-screen {
+	flex: 1 1 auto;
+	display: grid;
+	grid-template-columns: 220px 1fr;
+}

src/apps/fl-media/ui/index.js

@@ -1,4 +1,6 @@
 import UploadCard from './upload-card'
-import FileList from './file-list'
+import MediaList from './list'
+import Shell from './shell'
+import './style.scss'
 
-export { UploadCard, FileList }
+export { UploadCard, Shell, MediaList }

src/apps/fl-media/ui/list/file-list/index.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { UploadingItem } from '../items'
+
+const FileList = ( { files = [], current } ) => {
+	if ( current > files.length ) {
+		return null
+	}
+	return files.map( ( file, i ) => {
+
+		// Remove items that have already been uploaded
+		if ( i + 1 < current ) {
+			return null
+		}
+
+		const src = URL.createObjectURL( file )
+
+		return (
+			<li key={ file.name }>
+				<UploadingItem src={ src } />
+			</li>
+		)
+	} )
+}
+
+export default FileList