Create collab session

.gitignore

@@ -15,6 +15,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.eslintcache
 
 npm-debug.log*
 yarn-debug.log*

src/components/TextEditor/components/ShareSketchModal.js

@@ -3,10 +3,11 @@ import ReactModal from "react-modal";
 
 import { Button, Input, InputGroup, InputGroupAddon } from "reactstrap";
 
-import { faCopy } from "@fortawesome/free-solid-svg-icons";
+import { faCopy, faUser, faUserFriends } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import "styles/Modals.scss";
+import { text } from "@fortawesome/fontawesome-svg-core";
 
 /**
  * ShareSketchModal is a full-screen modal that displays
@@ -21,8 +22,8 @@ class ShareSketchModal extends React.Component {
     copyStatus: 'Hit "Copy to Clipboard"!',
   };
 
-  initiateCopy = () => {
-    navigator.clipboard.writeText(this.props.shareUrl).then(
+  initiateCopy = (textToBeCopied) => {
+    navigator.clipboard.writeText(textToBeCopied).then(
       () => {
         // success
         this.setState({ copyStatus: "Successfully copied!" });
@@ -47,7 +48,22 @@ class ShareSketchModal extends React.Component {
         <InputGroup>
           <Input value={this.props.shareUrl} disabled />
           <InputGroupAddon addonType="append">
-            <Button color="primary" onClick={this.initiateCopy}>
+            <Button color="primary" onClick={() => this.initiateCopy(this.props.shareUrl)}>
+              <FontAwesomeIcon icon={faCopy} /> Copy to Clipboard
+            </Button>
+          </InputGroupAddon>
+        </InputGroup>
+        <hr />
+        <h2 className="text-center">Collab Session</h2>
+        <div style={{ textAlign: "center", marginBottom: "2%", marginTop: "1%" }}>
+          <Button color="primary" onClick={() => this.props.createCollabSession()}>
+            <FontAwesomeIcon icon={faUserFriends} /> Create a Collab session
+          </Button>
+        </div>
+        <InputGroup>
+          <Input value={this.props.collabId === null ? "" : this.props.collabId} disabled />
+          <InputGroupAddon addonType="append">
+            <Button color="primary" onClick={() => this.initiateCopy(this.props.collabId)}>
               <FontAwesomeIcon icon={faCopy} /> Copy to Clipboard
             </Button>
           </InputGroupAddon>

src/components/TextEditor/components/TextEditor.js

@@ -43,15 +43,16 @@ class TextEditor extends React.Component {
       forked: false,
       redirectToSketch: false,
       showShareModal: false,
+      collabId: null,
     };
   }
 
   //==============React Lifecycle Functions===================//
 
-  componentDidMount() {
+  componentDidMount = () => {
     window.addEventListener("beforeunload", this.onLeave);
     window.addEventListener("close", this.onLeave);
-  }
+  };
 
   componentWillUnmount = () => {
     window.removeEventListener("beforeunload", this.onLeave);
@@ -115,6 +116,15 @@ class TextEditor extends React.Component {
     this.setState({ currentLine: line });
   };
 
+  createCollabSession = async () => {
+    try {
+      let collabId = await sketch.constructCollabId(this.props.uid);
+      this.setState({ collabId: collabId });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   renderForkModal = () => {
     return (
       <ReactModal
@@ -296,8 +306,10 @@ class TextEditor extends React.Component {
           {this.renderForkModal()}
           <ShareSketchModal
             shareUrl={sketch.constructShareableSketchURL(this.props.mostRecentProgram)}
+            collabId={this.state.collabId}
             showModal={this.state.showShareModal}
             toggleModal={this.toggleShareModal}
+            createCollabSession={this.createCollabSession}
           />
           <div
             className="text-editor-container"

src/lib/fetch.js

@@ -85,7 +85,8 @@ export const updatePrograms = (uid = "", programs) => {
 
 export const createUser = (uid) => {
   console.log("creating user");
-  return makeServerRequest({ uid }, "user/create", "post");
+  const endpoint = `user/create`;
+  return makeServerRequest({ uid }, endpoint, "post");
 };
 
 /**
@@ -106,7 +107,8 @@ export const updateUserData = (uid = "", userData) => {
 
 export const createSketch = (data) => {
   const { uid, ...rest } = data;
-  return makeServerRequest({ uid, program: rest }, "program/create");
+  const endpoint = `program/create`;
+  return makeServerRequest({ uid, program: rest }, endpoint);
 };
 
 /**
@@ -116,7 +118,8 @@ export const createSketch = (data) => {
 
 export const deleteSketch = (data) => {
   const { uid, name } = data;
-  return makeServerRequest({ uid, pid: name }, "program/delete", "delete");
+  const endpoint = `program/delete`;
+  return makeServerRequest({ uid, pid: name }, endpoint, "delete");
 };
 
 /**
@@ -131,3 +134,14 @@ export const getSketch = async (docID) => {
   let sketch = await result.json();
   return { ok, sketch };
 };
+
+/**
+ * creates a CollabSession with passed-in data
+ * @param {string} data //required data to create program
+ */
+
+export const createCollab = async (data) => {
+  const { uid } = data;
+  const endpoint = `collab/create`;
+  return makeServerRequest({ uid }, endpoint);
+};

src/lib/sketch.js

@@ -1,4 +1,5 @@
 import constants from "../constants";
+import * as fetch from "../lib/fetch.js";
 
 /**
  * constructShareableSketchURL: given a program ID, generate
@@ -18,3 +19,25 @@ export const constructShareableSketchURL = (programId, domainRoot = window.locat
 
   return `${root}${constants.ROUTER_BASE_NAME}p/${programId}`;
 };
+
+/**
+ * constructCollabId: given a program ID,
+ * generate a collabId that students can join
+ * @param {String} uid the uid of the user who wants to create a collab session
+ */
+
+export const constructCollabId = async (uid) => {
+  let data = {
+    uid: uid,
+  };
+
+  let collabId = await fetch
+    .createCollab(data)
+    .then((res) => res.text())
+    .then((result) => {
+      return result;
+    })
+    .catch((err) => console.log(err));
+
+  return collabId;
+};