#18

website/package.json

@@ -23,6 +23,7 @@
     "@types/node": "^10.1.2",
     "@types/prop-types": "^15.5.6",
     "axios": "^0.18.0",
+    "body-parser": "^1.18.3",
     "dotenv": "^6.1.0",
     "express": "^4.16.3",
     "jsonwebtoken": "^8.3.0",

website/react-app/src/app.tsx

@@ -2,6 +2,7 @@ import { PageHeader, Spinner } from '@salesforce/design-system-react';
 import { RepositoryList } from '@src/components';
 import * as React from 'react';
 import { hot } from 'react-hot-loader';
+import { Submit } from './components/submit/submit';
 
 export interface AppState {
   repositories: Repository[];
@@ -28,23 +29,25 @@ class App extends React.Component<{}, AppState> {
         <PageHeader
           title='open-force.org'
         />
-          <div className="slds-m-around_large slds-text-heading_small">
-              <p className="slds-m-vertical_medium">Welcome to open-force.org! This is a maker space for developers and others in the Salesforce.com ecosystem to share code with each other. Think of open-force as a workshop where people like you are hanging out, tinkering with things they are passionate about. Maybe you'd like to chip in on a project you find interesting, or maybe you'd like to bring your own project into the workshop?</p>
+        <div className='slds-m-around_large slds-text-heading_small'>
+          <p className='slds-m-vertical_medium'>Welcome to open-force.org! This is a maker space for developers and others in the Salesforce.com ecosystem to share code with each other. Think of open-force as a workshop where people like you are hanging out, tinkering with things they are passionate about. Maybe you'd like to chip in on a project you find interesting, or maybe you'd like to bring your own project into the workshop?</p>
 
-              <p className="slds-m-vertical_medium">This website includes a searchable index of open source projects that exist in Salesforce-land. You can browse these projects with the tool below. We're happy to list any Salesforce-related open source project; send an email to [email protected] to have your project added to the index.</p>
+          <p className='slds-m-vertical_medium'>This website includes a searchable index of open source projects that exist in Salesforce-land. You can browse these projects with the tool below. We're happy to list any Salesforce-related open source project; send an email to [email protected] to have your project added to the index.</p>
 
-              <p className="slds-m-vertical_medium">There are some companion resources to this website:</p>
+          <p className='slds-m-vertical_medium'>There are some companion resources to this website:</p>
 
-              <ol style={{listStyleType: "circle"}} className="slds-m-horizontal_large">
-                  <li>if you'd like a place to host your project, we give out repositories in our public GitHub at <a href="https://github.com/open-force">https://github.com/open-force</a>. To have a repository created, send an email to [email protected].</li>
-                  <li>We have a community of collaborators that hang out in a slack channel over on the GoodDaySir podcast slack. Sign up for the slack group at <a href="https://www.gooddaysirpodcast.com/community">https://www.gooddaysirpodcast.com/community</a>, and find us in the #open-force channel.</li>
-              </ol>
+          <ol style={{ listStyleType: 'circle' }} className='slds-m-horizontal_large'>
+            <li>if you'd like a place to host your project, we give out repositories in our public GitHub at <a href='https://github.com/open-force'>https://github.com/open-force</a>. To have a repository created, send an email to [email protected].</li>
+            <li>We have a community of collaborators that hang out in a slack channel over on the GoodDaySir podcast slack. Sign up for the slack group at <a href='https://www.gooddaysirpodcast.com/community'>https://www.gooddaysirpodcast.com/community</a>, and find us in the #open-force channel.</li>
+          </ol>
 
-              <p className="slds-m-vertical_medium">We're glad you're here. We love sharing knowledge and code, and we hope you will participate in our open source movement on the Salesforce platform!</p>
-              <hr />
-              <p className="slds-m-vertical_medium">Want to make this website even better? It's open-source (you're shocked, I'm sure), so go ahead and submit a pull request: <a href="https://github.com/open-force/website">https://github.com/open-force/website</a>.</p>
-          </div>
+          <p className='slds-m-vertical_medium'>We're glad you're here. We love sharing knowledge and code, and we hope you will participate in our open source movement on the Salesforce platform!</p>
+          <hr />
+          <p className='slds-m-vertical_medium'>Want to make this website even better? It's open-source (you're shocked, I'm sure), so go ahead and submit a pull request: <a href='https://github.com/open-force/website'>https://github.com/open-force/website</a>.</p>
+        </div>
+        <Submit />
         {this.renderRepositories()}
+
       </div>
     );
   }
@@ -58,7 +61,7 @@ class App extends React.Component<{}, AppState> {
         size='small'
         variant='base'
         assistiveText={{ label: 'Small spinner' }}
-			/>
+      />
     );
   }
 }

website/react-app/src/components/submit/submit.tsx

@@ -0,0 +1,130 @@
+import { Alert, Button, Modal } from '@salesforce/design-system-react';
+import * as React from 'react';
+
+export interface SubmitState {
+  // form state
+  url: string;
+
+  // UI control
+  showSuccess: boolean;
+  loading: boolean;
+  showForm: boolean;
+  errMsg: string;
+}
+
+export class Submit extends React.Component<any, SubmitState> {
+
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      url: '',
+      loading: false,
+      showForm: false,
+      showSuccess: false,
+      errMsg: null,
+    };
+  }
+
+  public render() {
+    const footerBtns = [
+      <Button key='cancel' label='Close' onClick={this.closeForm} />,
+    ];
+    if (!this.state.showSuccess) {
+      footerBtns.push(<Button key='save' label='Submit' variant='brand' onClick={this.submit} />);
+    }
+
+    return (
+      <div>
+        <Button
+          onClick={(e: React.MouseEvent<HTMLElement>) => { this.setState({ showForm: true }); }}
+        >
+          Submit Repository
+        </Button>
+        <Modal
+          isOpen={this.state.showForm}
+          footer={footerBtns}
+          onRequestClose={this.closeForm}
+          title='New Submission'
+        >
+          {this.renderModalBody()}
+        </Modal>
+      </div>
+    );
+  }
+
+  // === render methods... Good candiates for new components...
+  private renderModalBody() {
+    if (this.state.showSuccess) {
+      return <p>Thank you for your submission.  The team will review and confirm it shortly</p>;
+    }
+
+    if (this.state.loading) {
+      return <div>processing...</div>;
+    }
+    return (
+      <div>
+        {this.renderError()}
+        <section className='slds-p-around--large'>
+          <div className='slds-form-element slds-m-bottom--large'>
+            <label className='slds-form-element__label' htmlFor='url'>Repository Url</label>
+            <div className='slds-form-element__control'>
+              <input
+                id='url'
+                value={this.state.url}
+                onChange={(e) => { this.setState({ url: e.target.value }); }}
+                className='-input'
+                type='text'
+                placeholder='Enter Url'
+              />
+            </div>
+          </div>
+        </section>
+      </div>
+    );
+  }
+
+  private renderError() {
+    if (!this.state.errMsg) {
+      return null;
+    }
+
+    return (
+      <Alert
+        // icon={<Icon category='utility' name='error' />}
+        labels={{
+          heading: this.state.errMsg,
+        }}
+        variant='error'
+      />
+    );
+
+  }
+
+  private submit = async () => {
+    this.setState({ errMsg: null, loading: true });
+    // do callout
+    const payload: ResourceSubmission = {
+      url: this.state.url,
+    };
+    try {
+      const resp = await fetch('/api/submit', {
+        method: 'post',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+
+      if (resp.status !== 200) {
+        throw new Error(resp.statusText);
+      }
+      this.setState({ url: '', showSuccess: true, loading: false });
+    } catch (e) {
+      this.setState({ errMsg: e.toString(), loading: false });
+    }
+
+  }
+
+  private closeForm = () => {
+    this.setState({ showForm: false, showSuccess: false, url: '', errMsg: null });
+  }
+
+}

website/server/index.ts

@@ -1,7 +1,9 @@
 import * as express from 'express';
+import * as bodyParser from 'body-parser';
 import * as path from 'path';
 import sfdcAuth from './lib/sfdcAuthService'
 import { ResourceService } from './lib/resourceService';
+import { submitResource } from './lib/submitService';
 
 require('dotenv').config({ encoding: 'utf8' });
 process.env.NODE_ENV = process.env.NODE_ENV || 'development';
@@ -13,6 +15,8 @@ sfdcAuth().then(()=>{
 async function start() {
 
   const app = express();
+  app.use(bodyParser.json())
+
   const PORT = process.env.PORT || 5000;
 
   let resourceService = new ResourceService();
@@ -24,6 +28,19 @@ async function start() {
     response.send(await resourceService.getRepoData());
   });
 
+  app.post('/api/submit', async function (request, response) {
+    try{
+      let resource = await submitResource(request.body);
+      console.log(resource.id);
+      response.statusCode = 200;
+    }catch(e){
+      //[TODO: check for e.response and do better error handling]
+      response.statusCode = 500;
+      response.statusMessage = e.toString();
+    }
+    response.send();
+  });
+
   // All remaining requests return the React app, so it can handle routing.
   app.get('*', function (request, response) {
     response.sendFile(path.resolve(__dirname, '../react-app/dist', 'index.html'));