diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 09233f2..5129713 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8476,6 +8476,11 @@ "supports-color": "^7.0.0" } }, + "jquery": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz", + "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==" + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -9994,6 +9999,11 @@ "ts-pnp": "^1.1.6" } }, + "popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==" + }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", diff --git a/frontend/package.json b/frontend/package.json index 1ad020b..97413c4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -7,6 +7,8 @@ "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "bootstrap": "^4.6.0", + "jquery": "^3.6.0", + "popper.js": "^1.16.1", "react": "^17.0.2", "react-bootstrap": "^1.5.2", "react-dom": "^17.0.2", diff --git a/frontend/public/index.html b/frontend/public/index.html index aa069f2..57de899 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -2,7 +2,6 @@ - - React App + Openly diff --git a/frontend/src/App.js b/frontend/src/App.js index d9dc85e..287c2b5 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -8,8 +8,13 @@ import Post from "./components/Post"; import Event from "./components/Event"; import Events from "./components/Events"; import Profile from "./components/Profile"; +import CreateEvent from "./components/CreateEvent"; +import CreatePost from "./components/CreatePost"; import "bootstrap/dist/css/bootstrap.min.css"; +import $ from "jquery"; +import Popper from "popper.js"; +import "bootstrap/dist/js/bootstrap.bundle.min"; import "./App.css"; import ProtectedRoute from "./components/ProtectedRoute.js"; function App() { @@ -20,6 +25,8 @@ function App() { + + diff --git a/frontend/src/components/CreateEvent.js b/frontend/src/components/CreateEvent.js new file mode 100644 index 0000000..5fab25f --- /dev/null +++ b/frontend/src/components/CreateEvent.js @@ -0,0 +1,72 @@ +import React, { useState, useEffect } from "react"; + +const CreateEvent = (props) => { + const onSubmit = (e) => { + e.preventDefault(); + const requestOptions = { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${localStorage.getItem("token")}`, + }, + body: JSON.stringify({ postid: props.id }), + }; + fetch(`${process.env.REACT_APP_API_ENDPOINT}/createevent`, requestOptions) + .then((response) => response.json()) + .then((data) => { + console.log(data); + }); + }; + return ( +
+
+

Create Event

+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ ); +}; + +export default CreateEvent; diff --git a/frontend/src/components/CreatePost.js b/frontend/src/components/CreatePost.js new file mode 100644 index 0000000..5a05215 --- /dev/null +++ b/frontend/src/components/CreatePost.js @@ -0,0 +1,60 @@ +import React, { useState, useEffect } from "react"; + +const CreatePost = (props) => { + const onSubmit = (e) => { + e.preventDefault(); + const requestOptions = { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${localStorage.getItem("token")}`, + }, + body: JSON.stringify({ postid: props.id }), + }; + fetch(`${process.env.REACT_APP_API_ENDPOINT}/createpost`, requestOptions) + .then((response) => response.json()) + .then((data) => { + console.log(data); + }); + }; + return ( +
+
+
+

Create Post

+ + +
+
+ + +
+ +
+
+
+ ); +}; + +export default CreatePost; diff --git a/frontend/src/components/Event.js b/frontend/src/components/Event.js index d36b777..06c6936 100644 --- a/frontend/src/components/Event.js +++ b/frontend/src/components/Event.js @@ -4,9 +4,11 @@ const Event = (props) => { const [state, setState] = useState({ user: { username: "HyperionLegion" }, event_title: "Green Earth", + upvotes: 0, event_text: "Plant trees with us at 2859258 drive 9 pm EST 3/26/2021", topics: ["climate change", "global warming"], website: "https://joshuahsueh.ml/", + comments: ["WOW! What a cool event!"], }); const [stocks, setStocks] = useState([]); @@ -30,21 +32,98 @@ const Event = (props) => { useEffect(() => { callAPI(); }, []); + const onSubmit = (e) => { + e.preventDefault(); + const requestOptions = { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${localStorage.getItem("token")}`, + }, + body: JSON.stringify({ postid: props.id }), + }; + fetch(`${process.env.REACT_APP_API_ENDPOINT}/event/upvote`, requestOptions) + .then((response) => response.json()) + .then((data) => { + console.log(data); + }); + }; + const onComment = (e) => { + e.preventDefault(); + const requestOptions = { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${localStorage.getItem("token")}`, + }, + body: JSON.stringify({ postid: props.id }), + }; + fetch(`${process.env.REACT_APP_API_ENDPOINT}/eventcomment`, requestOptions) + .then((response) => response.json()) + .then((data) => { + console.log(data); + }); + }; return ( -
+
+

Hello {state.user.username}!

Event {props.match.params.id}

-
-

Hello {state.user.username}!

-

Event {state.event_title}

-

{state.event_text}

- Website -

Tags:

- {state.topics.map((topic) => { + +
+

Event: {state.event_title}

+ + Website + +

{state.event_text}

+ +

Topics:

+
+ {state.topics.map((topic) => { + return ( +
+

{topic}

+
+ ); + })} +
+
+
+ +
+
+
+
+

+ {state.upvotes} Likes +

+
+
+
+
+