Merge branch 'develop' into feat/new-library + Hosting create

byte-foundry · Aug 7, 2018 · 7b9aa84 · 7b9aa84
2 parents c377d14 + ad572bf
commit 7b9aa84
Show file tree

Hide file tree

Showing 21 changed files with 1,033 additions and 222 deletions.
diff --git a/app/scripts/actions/font.actions.jsx b/app/scripts/actions/font.actions.jsx
@@ -253,6 +253,7 @@ export default {
 					) {
 						id
 						name
+						updatedAt
 					}
 				}
 			`,

diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -17,6 +17,7 @@ import LibraryList from './components/library/library-list.components';
 import LibraryCreate from './components/library/library-create.components';
 import LibraryReview from './components/library/library-review.components';
 import LibraryHosting from './components/library/library-hosting.components';
+import LibraryHostingCreate from './components/library/library-hosting-create.components';
 import LibraryDetails from './components/library/library-details.components';
 import LibrarySee from './components/library/library-see.components';
 import LibraryFontsInUse from './components/library/library-fontinuse.components';
@@ -274,6 +275,7 @@ class AppRoutes extends React.PureComponent {
 								onEnter={redirectToLogin}
 							>
 								<IndexRoute component={LibraryHosting} />
+								<Route path="create" component={LibraryHostingCreate} />
 							</Route>
 							<Route
 								path="create"

diff --git a/app/scripts/components/account/account-dashboard.components.jsx b/app/scripts/components/account/account-dashboard.components.jsx
@@ -14,7 +14,7 @@ export class AccountDashboard extends React.Component {
 	}
 
 	returnToDashboard() {
-		this.props.router.push('/dashboard');
+		this.props.router.push('/library/home');
 	}
 
 	render() {
@@ -55,7 +55,7 @@ export class AccountDashboard extends React.Component {
 
 		return (
 			<div className="account-dashboard">
-				<Link to="/dashboard">
+				<Link to="/library/home">
 					<div className="account-dashboard-icon" />
 				</Link>
 				<div className="account-header">

diff --git a/app/scripts/components/collection/collection.components.jsx b/app/scripts/components/collection/collection.components.jsx
@@ -192,6 +192,7 @@ export const libraryQuery = gql`
 				foundryUrl
 				variants {
 					id
+					updatedAt
 					name
 					values
 					width

diff --git a/app/scripts/components/familyVariant/add-family-variant.components.jsx b/app/scripts/components/familyVariant/add-family-variant.components.jsx
@@ -577,6 +577,7 @@ const createVariantMutation = gql`
 			values
 			width
 			italic
+			updatedAt
 		}
 	}
 `;

diff --git a/app/scripts/components/library/library-create.components.jsx b/app/scripts/components/library/library-create.components.jsx
@@ -274,7 +274,9 @@ class LibraryCreate extends React.Component {
 		return (
 			<div className="library-content-wrapper">
 				<div className="library-list library-list--create">
-					<h1 className="library-list-title">Choose a template to start</h1>
+					<h1 className="library-list-title">
+						START OUT BY CHOOSING A TEMPLATE
+					</h1>
 					<FamilyList fontsToDisplay={this.state.fontsToDisplay} />
 				</div>
 				<LibrarySidebarRight>

diff --git a/app/scripts/components/library/library-fontinuse-create.components.jsx b/app/scripts/components/library/library-fontinuse-create.components.jsx
@@ -231,6 +231,7 @@ class LibraryFontInUseCreate extends React.Component {
 							this.setState({
 								fontInUseMetadata: {
 									...this.state.fontInUseMetadata,
+									isModified: true,
 									images: newImages,
 								},
 							});
@@ -243,6 +244,7 @@ class LibraryFontInUseCreate extends React.Component {
 		this.setState({
 			fontInUseMetadata: {
 				...this.state.fontInUseMetadata,
+				isModified: true,
 				images,
 			},
 		});
@@ -255,6 +257,7 @@ class LibraryFontInUseCreate extends React.Component {
 		this.setState({
 			fontInUseMetadata: {
 				...this.state.fontInUseMetadata,
+				isModified: true,
 				images,
 			},
 		});
@@ -307,6 +310,7 @@ class LibraryFontInUseCreate extends React.Component {
 									type="text"
 									id="name"
 									name="user_name"
+									placeholder="Designer name"
 									value={this.state.fontInUseMetadata.designer}
 									onChange={(e) => {
 										this.updateFontInUseData(e, 'designer');
@@ -319,6 +323,7 @@ class LibraryFontInUseCreate extends React.Component {
 									type="text"
 									id="name"
 									name="user_name"
+									placeholder="Designer website"
 									value={this.state.fontInUseMetadata.designerUrl}
 									onChange={(e) => {
 										this.updateFontInUseData(e, 'designerUrl');
@@ -331,6 +336,7 @@ class LibraryFontInUseCreate extends React.Component {
 									type="text"
 									id="name"
 									name="user_name"
+									placeholder="Client name"
 									value={this.state.fontInUseMetadata.client}
 									onChange={(e) => {
 										this.updateFontInUseData(e, 'client');
@@ -343,6 +349,7 @@ class LibraryFontInUseCreate extends React.Component {
 									type="text"
 									id="name"
 									name="user_name"
+									placeholder="Client url"
 									value={this.state.fontInUseMetadata.clientUrl}
 									onChange={(e) => {
 										this.updateFontInUseData(e, 'clientUrl');
@@ -368,6 +375,7 @@ class LibraryFontInUseCreate extends React.Component {
 									id="name"
 									name="user_name"
 									autoComplete="off"
+									placeholder="Type your font name..."
 									className={`${
 										this.state.autocompleteSuggestions.length > 0
 											? 'opened'
@@ -434,7 +442,7 @@ class LibraryFontInUseCreate extends React.Component {
 											: this.createFontInUse();
 									}}
 								>
-									{this.state.isEdit ? 'Edit' : 'Create'} font in use
+									{this.state.isEdit ? 'Save' : 'Create'} font in use
 								</div>
 							)}
 						</form>
@@ -474,12 +482,17 @@ const libraryUserQuery = gql`
 			}
 			favourites {
 				id
+				name
+				updatedAt
 				type
 				preset {
 					id
 				}
 				family {
 					id
+					variants {
+						id
+					}
 				}
 				template
 			}
@@ -764,17 +777,19 @@ export default compose(
 				);
 			},
 		}),
-		update: (store, {data: {deleteFontInUse}}) => {
-			const data = store.readQuery({query: libraryUserQuery});
+		options: {
+			update: (store, {data: {deleteFontInUse}}) => {
+				const data = store.readQuery({query: libraryUserQuery});
 
-			data.user.fontInUses.splice(
-				data.user.fontInUses.findIndex(f => f.id === deleteFontInUse.id),
-				1,
-			);
-			store.writeQuery({
-				query: libraryUserQuery,
-				data,
-			});
+				data.user.fontInUses.splice(
+					data.user.fontInUses.findIndex(f => f.id === deleteFontInUse.id),
+					1,
+				);
+				store.writeQuery({
+					query: libraryUserQuery,
+					data,
+				});
+			},
 		},
 	}),
 )(LibraryFontInUseCreate);
diff --git a/app/scripts/components/library/library-fontinuse-list.components.jsx b/app/scripts/components/library/library-fontinuse-list.components.jsx
@@ -2,6 +2,17 @@ import React from 'react';
 import {Link} from 'react-router';
 import {LibrarySidebarRight} from './library-sidebars.components';
 
+const isUrl = new RegExp(
+	'^(https?:\\/\\/)?'
+		+ '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'
+		+ '((\\d{1,3}\\.){3}\\d{1,3}))'
+		+ '(\\:\\d+)?'
+		+ '(\\/[-a-z\\d%@_.~+&:]*)*'
+		+ '(\\?[;&a-z\\d%@_.,~+&:=-]*)?'
+		+ '(\\#[-a-z\\d_]*)?$',
+	'i',
+);
+
 export default class LibraryFontsInUseList extends React.Component {
 	constructor(props) {
 		super(props);
@@ -14,12 +25,14 @@ export default class LibraryFontsInUseList extends React.Component {
 		case 'Preset':
 			return <span className="library-fontinuse-font">{fontUsed.name}</span>;
 		case 'Family':
-			return (
+			return fontUsed.family ? (
 				<span className="library-fontinuse-font">
 					<Link to={`/library/project/${fontUsed.family.id}`}>
 						{fontUsed.name}
 					</Link>
 				</span>
+			) : (
+				<span className="library-fontinuse-font">{fontUsed.name}</span>
 			);
 		default:
 			return false;
@@ -29,7 +42,25 @@ export default class LibraryFontsInUseList extends React.Component {
 		return (
 			<div className="library-content-wrapper">
 				<div className="library-see">
-					<div className="library-see-title">Fonts in use</div>
+					{this.props.fontInUses.length === 0 ? (
+						<div>
+							<div className="library-see-title">No fonts in use yet.</div>
+							<div className="library-see-description">
+								<p>
+									Create a font in use to keep track of your work and get easy
+									access to the fonts you used.
+								</p>
+								<p>
+									<Link to="/library/fontinuse/create">
+										Create a font in use
+									</Link>
+								</p>
+							</div>
+						</div>
+					) : (
+						<div className="library-see-title">Fonts in use</div>
+					)}
+
 					<div className="library-fontinuse-list">
 						{this.props.fontInUses
 							&& this.props.fontInUses.map(fontInUse => (
@@ -42,9 +73,13 @@ export default class LibraryFontsInUseList extends React.Component {
 									<div className="library-fontinuse-right">
 										<p>
 											<label>Client</label>
-											<a href={fontInUse.clientUrl} target="_blank">
-												{fontInUse.client}
-											</a>
+											{isUrl.test(fontInUse.clientUrl) ? (
+												<a href={fontInUse.clientUrl} target="_blank">
+													{fontInUse.client}
+												</a>
+											) : (
+												<span>{fontInUse.client}</span>
+											)}
 										</p>
 										<p>
 											<label>Related fonts</label>
@@ -54,9 +89,13 @@ export default class LibraryFontsInUseList extends React.Component {
 										</p>
 										<p>
 											<label>Designer</label>
-											<a href={fontInUse.designerUrl} target="_blank">
-												{fontInUse.designer}
-											</a>
+											{isUrl.test(fontInUse.designerUrl) ? (
+												<a href={fontInUse.designerUrl} target="_blank">
+													{fontInUse.designer}
+												</a>
+											) : (
+												<span>{fontInUse.designer}</span>
+											)}
 										</p>
 										<p className="library-fontinuse-button">
 											<Link to={`/library/fontinuse/${fontInUse.id}/edit`}>

diff --git a/app/scripts/components/library/library-hosting-create.component.jsx b/app/scripts/components/library/library-hosting-create.component.jsx