{this.renderPanelImage()}
@@ -317,7 +351,7 @@ class ProfilePanel extends React.Component {
return (
{this.renderCollapseButton()}
- {this.renderContent()}
+ {this.props.uid ? this.renderContent() : this.renderLoggedOutContent()}
);
diff --git a/src/components/common/ProfilePanel.test.js b/src/components/common/ProfilePanel.test.js
index 19bf4150..cde93417 100644
--- a/src/components/common/ProfilePanel.test.js
+++ b/src/components/common/ProfilePanel.test.js
@@ -11,28 +11,28 @@ describe("ProfilePanel", () => {
});
it("handles displayName prop properly", () => {
- const component = shallow(
);
+ const component = shallow(
);
expect(component.find(".panel-name-text").text()).toEqual("Mark");
- const component2 = shallow(
);
+ const component2 = shallow(
);
expect(component2.find(".panel-name-text").text()).toEqual("Joe Bruin");
});
it("handles photoName prop properly", () => {
- const component = shallow(
);
+ const component = shallow(
);
expect(component.find(".panel-image").get(0).props.src).toBe(PHOTO_NAMES[DEFAULT_PHOTO_NAME]);
const name = Object.keys(PHOTO_NAMES)[1];
- const component2 = shallow(
);
+ const component2 = shallow(
);
expect(component2.find(".panel-image").get(0).props.src).toBe(PHOTO_NAMES[name]);
});
it("Buttons change based on content type", () => {
- const component = shallow(
);
+ const component = shallow(
);
expect(component.find("#editor-button"));
expect(component.find("#sign-out-button"));
- const component2 = shallow(
);
+ const component2 = shallow(
);
expect(component2.find("#sketches-button"));
expect(component2.find("#sign-out-button"));
});
@@ -55,19 +55,19 @@ describe("ProfilePanel", () => {
});
it("handles displayName prop properly", () => {
- const component = shallow(
);
+ const component = shallow(
);
expect(component.find(".panel-image").get(0).props.src).toBe(PHOTO_NAMES[DEFAULT_PHOTO_NAME]);
const name = Object.keys(PHOTO_NAMES)[1];
- const component2 = shallow(
);
+ const component2 = shallow(
);
expect(component2.find(".panel-image").get(0).props.src).toBe(PHOTO_NAMES[name]);
});
it("changing the panel image works", () => {
const clickFn = jest.fn(photo => photo);
- const component = shallow(
);
+ const component = shallow(
);
expect(component.find(".panel-image").get(0).props.src).toBe(PHOTO_NAMES[DEFAULT_PHOTO_NAME]);
@@ -104,7 +104,9 @@ describe("ProfilePanel", () => {
it("changing the display name works", () => {
const clickFn = jest.fn(name => name);
- const component = shallow(
);
+ const component = shallow(
+
,
+ );
expect(component.find(".panel-name-text").text()).toBe("Mark");
@@ -146,6 +148,8 @@ describe("ProfilePanel", () => {
// TODO:
+ // test the non-logged in profile panel!
+
//test that onBlur causes a submit for the display name input
//test the options list buttons onclick functionality
diff --git a/src/components/containers/MainContainer.js b/src/components/containers/MainContainer.js
index 1ad79f51..49c49da1 100644
--- a/src/components/containers/MainContainer.js
+++ b/src/components/containers/MainContainer.js
@@ -47,9 +47,6 @@ const mapDispatchToProps = dispatch => {
};
};
-const MainContainer = connect(
- mapStateToProps,
- mapDispatchToProps,
-)(Main);
+const MainContainer = connect(mapStateToProps, mapDispatchToProps)(Main);
export default MainContainer;
diff --git a/src/components/containers/ViewOnlyContainer.js b/src/components/containers/ViewOnlyContainer.js
new file mode 100644
index 00000000..97b2bbd4
--- /dev/null
+++ b/src/components/containers/ViewOnlyContainer.js
@@ -0,0 +1,35 @@
+import ViewOnly from "../ViewOnly.js";
+import { connect } from "react-redux";
+import { setOutput } from "../../actions/outputActions.js";
+import { setProgramCode } from "../../actions/programsActions.js";
+import { togglePanel } from "../../actions/uiActions.js";
+import { setTheme } from "../../actions/uiActions.js";
+import { CLOSED_PANEL_LEFT, OPEN_PANEL_LEFT, PANEL_SIZE } from "../../constants";
+
+const mapStateToProps = state => {
+ const { mostRecentProgram } = state.userData;
+ return {
+ uid: state.userData.uid,
+ screenWidth: state.ui.screenWidth,
+ screenHeight: state.ui.screenHeight,
+ panelOpen: state.ui.panelOpen,
+ left: (state.ui.panelOpen ? OPEN_PANEL_LEFT : CLOSED_PANEL_LEFT) + PANEL_SIZE,
+ theme: state.ui.theme,
+ mostRecentProgram,
+ };
+};
+
+const mapDispatchToProps = dispatch => {
+ return {
+ runCode: (code, language) => dispatch(setOutput(code, language)),
+ togglePanel: () => dispatch(togglePanel()),
+ setProgramCode: (program, code) => {
+ dispatch(setProgramCode(program, code));
+ },
+ setTheme: theme => dispatch(setTheme(theme)),
+ };
+};
+
+const ViewOnlyContainer = connect(mapStateToProps, mapDispatchToProps)(ViewOnly);
+
+export default ViewOnlyContainer;
diff --git a/src/lib/fetch.js b/src/lib/fetch.js
index f3280da6..3d9b3e62 100644
--- a/src/lib/fetch.js
+++ b/src/lib/fetch.js
@@ -41,26 +41,27 @@ export const getUserData = async (uid = "", includePrograms = false) => {
*/
const makeServerRequest = (data, endpoint, method = "post") => {
- let body = "";
-
- // if the passed-in data object has at least 1 key, set the body to the stringified data object
- try {
- if (Object.keys(data).length) {
- body = JSON.stringify(data);
- }
- } catch (err) {
- console.log(err);
- return;
- }
-
- const options = {
+ let options = {
method: method,
headers: {
"Content-Type": "application/json; charset=utf-8",
},
- body,
};
+ if (method === "post" || method === "put") {
+ let body = "";
+ // if the passed-in data object has at least 1 key, set the body to the stringified data object
+ try {
+ if (Object.keys(data).length) {
+ body = JSON.stringify(data);
+ }
+ } catch (err) {
+ console.log(err);
+ return;
+ }
+ options.body = body;
+ }
+
return fetch(`${constants.SERVER_URL}/${endpoint}`, options);
};
@@ -103,3 +104,15 @@ export const createSketch = data => {
export const deleteSketch = data => {
return makeServerRequest(data, "deleteProgram");
};
+
+/**
+ * gets a sketch's information by the docID
+ * @param {string} docID the key for the requested program in the top-level programs object
+ */
+
+export const getSketch = async docID => {
+ const endpoint = `getProgram/${docID}`;
+ let result = await makeServerRequest({}, endpoint, "get");
+ let { ok, sketch } = await result.json();
+ return { ok, sketch };
+};
diff --git a/src/styles/Editor.scss b/src/styles/Editor.scss
index 4482ec35..462674d2 100644
--- a/src/styles/Editor.scss
+++ b/src/styles/Editor.scss
@@ -37,6 +37,17 @@
}
+.program-sketch-name {
+ flex: 0 1 auto;
+ @include themify($themes) {
+ color: themed("color");
+ }
+ max-width: 200px;
+ font-size: 24px;
+ margin-left: 1em;
+}
+
+
.code-section-banner {
display: flex;
flex-direction: row;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 7097f698..bf2df0a9 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -46,7 +46,8 @@ $themes: (
outputBackground: #e6e6fa,
accentColor: $white,
accentBackground: $light-lavender,
- /* Card variables */ cardColor: $theme-dark,
+ /* Card variables */
+ cardColor: $theme-dark,
cardBackground: $white,
cardBorder: 1px solid $light-lavender,
cardDivider: $light-lavender,
@@ -68,7 +69,8 @@ $themes: (
outputBackground: $theme-tertiary,
accentColor: white,
accentBackground: $theme-light,
- /* Card variables */ cardColor: $theme-dark,
+ /* Card variables */
+ cardColor: $theme-dark,
cardBackground: $off-white,
cardBorder: none,
cardDivider: $theme-dark,