Add view counting

Author: Ives van Hoorne

src/app/pages/Sandbox/Editor/Workspace/Project/index.js

@@ -11,12 +11,28 @@ const Item = styled.div`
   font-size: .875rem;
 `;
 
+const ViewCount = styled.span`
+  color: white;
+  font-weight: 500;
+`;
+
+const ViewCountDescription = styled.span`
+  color: rgba(255, 255, 255, 0.6);
+`;
+
+const ViewCountContainer = styled.div`
+  margin: .5rem 1rem;
+  font-size: .875rem;
+`;
+
 type Props = {
   id: string,
   title: string,
   description: string,
+  viewCount: number,
   forkedSandbox: ?{ title: string, id: string },
   updateSandboxInfo: (id: string, title: string, description: string) => void,
+  preventTransition: boolean,
 };
 
 export default class Project extends React.PureComponent {
@@ -61,7 +77,7 @@ export default class Project extends React.PureComponent {
   };
 
   render() {
-    const { forkedSandbox, preventTransition } = this.props;
+    const { forkedSandbox, viewCount, preventTransition } = this.props;
     const { title, description } = this.state;
     return (
       <div>
@@ -100,6 +116,14 @@ export default class Project extends React.PureComponent {
               </ConfirmLink>
             </Item>
           </div>}
+        <WorkspaceSubtitle>Statistics</WorkspaceSubtitle>
+        <ViewCountContainer>
+          <ViewCount>{viewCount}{' '}</ViewCount>
+          <ViewCountDescription>
+            unique
+            {viewCount === 1 ? ' view' : ' views'}
+          </ViewCountDescription>
+        </ViewCountContainer>
       </div>
     );
   }

src/app/pages/Sandbox/Editor/Workspace/index.js

@@ -43,6 +43,7 @@ const Workspace = ({ sandbox, sandboxActions }: Props) => (
         updateSandboxInfo={sandboxActions.updateSandboxInfo}
         id={sandbox.id}
         title={sandbox.title}
+        viewCount={sandbox.viewCount}
         description={sandbox.description}
         forkedSandbox={sandbox.forkedFromSandbox}
         preventTransition={sandbox.modules.some(m => m.isNotSynced)}

src/common/types.js

@@ -43,6 +43,7 @@ export type Sandbox = {
   id: string,
   title: ?string,
   description: string,
+  viewCount: number,
   modules: Array<Module>,
   currentModule: ?Module,
   directories: Array<Directory>,

src/sandbox/external-resources.js

@@ -32,11 +32,11 @@ function addJS(resource: string) {
 }
 
 function addResource(resource: string) {
-  const kind = resource.match(/\.([^.]*)$/)[1];
+  const match = resource.match(/\.([^.]*)$/);
 
-  if (kind === 'css') {
+  if (match && match[1] === 'css') {
     addCSS(resource);
-  } else if (kind === 'js') {
+  } else {
     addJS(resource);
   }
 }