mirror of
https://github.com/Rushilwiz/openly.git
synced 2025-04-06 05:10:18 -04:00
frontend functionality completed
This commit is contained in:
Joshua Hsueh
parent
270c853975
commit
21d1539747
10
frontend/package-lock.json
generated
10
frontend/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
|
|
@ -24,7 +23,7 @@
|
|||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>Openly</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
|
|||
|
|
@ -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() {
|
|||
<Switch>
|
||||
<Route component={Signup} path="/register" />
|
||||
<Route component={Signin} path="/login" />
|
||||
<ProtectedRoute component={CreateEvent} path="/createevent" />
|
||||
<ProtectedRoute component={CreatePost} path="/createpost" />
|
||||
<ProtectedRoute component={Posts} path="/posts" />
|
||||
<ProtectedRoute component={Post} path="/post/:id" />
|
||||
<ProtectedRoute component={Event} path="/event/:id" />
|
||||
|
|
|
|||
72
frontend/src/components/CreateEvent.js
Normal file
72
frontend/src/components/CreateEvent.js
Normal file
|
|
@ -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 (
|
||||
<div className="container card card-body text-left">
|
||||
<form onSubmit={onSubmit}>
|
||||
<h1>Create Event</h1>
|
||||
<div className="form-group">
|
||||
<label className="" for="title">
|
||||
Event Title:{" "}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
className="form-control d-flex"
|
||||
placeholder="Enter title here..."
|
||||
></input>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="" for="title">
|
||||
Event Website:
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="link"
|
||||
name="link"
|
||||
className="form-control d-flex"
|
||||
placeholder="Enter link here..."
|
||||
></input>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label className="" for="title">
|
||||
Event Description:
|
||||
</label>
|
||||
<textarea
|
||||
type="text"
|
||||
id="post-text"
|
||||
name="post-text"
|
||||
style={{ height: "400px" }}
|
||||
className="form-control"
|
||||
placeholder="Enter text here..."
|
||||
></textarea>
|
||||
</div>
|
||||
<input
|
||||
className="btn btn-success text-left"
|
||||
type="submit"
|
||||
value="Submit"
|
||||
/>
|
||||
<br />
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateEvent;
|
||||
60
frontend/src/components/CreatePost.js
Normal file
60
frontend/src/components/CreatePost.js
Normal file
|
|
@ -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 (
|
||||
<div className="container card card-body text-left">
|
||||
<form onSubmit={onSubmit}>
|
||||
<div className="form-group">
|
||||
<h1>Create Post</h1>
|
||||
<label className="" for="title">
|
||||
Post Title:{" "}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
className="form-control d-flex"
|
||||
placeholder="Enter title here..."
|
||||
></input>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label className="" for="title">
|
||||
Post:
|
||||
</label>
|
||||
<textarea
|
||||
type="text"
|
||||
id="post-text"
|
||||
name="post-text"
|
||||
style={{ height: "400px" }}
|
||||
className="form-control"
|
||||
placeholder="Enter text here..."
|
||||
></textarea>
|
||||
</div>
|
||||
<input
|
||||
className="btn btn-success text-left"
|
||||
type="submit"
|
||||
value="Submit"
|
||||
/>
|
||||
<br />
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreatePost;
|
||||
|
|
@ -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 (
|
||||
<div>
|
||||
<div className="container">
|
||||
<h1>Hello {state.user.username}!</h1>
|
||||
<h1 className="d-flex justify-content-center m-2 p-4">
|
||||
Event {props.match.params.id}
|
||||
</h1>
|
||||
<div className="container">
|
||||
<h1>Hello {state.user.username}!</h1>
|
||||
<h1>Event {state.event_title}</h1>
|
||||
<p>{state.event_text}</p>
|
||||
<a href={state.website}>Website</a>
|
||||
<h2>Tags:</h2>
|
||||
{state.topics.map((topic) => {
|
||||
|
||||
<div className="card card-body">
|
||||
<h1 className="card-title">Event: {state.event_title}</h1>
|
||||
<a className="" href={state.website}>
|
||||
Website
|
||||
</a>
|
||||
<p className="card-text text-left">{state.event_text}</p>
|
||||
|
||||
<h4 className="text-left">Topics:</h4>
|
||||
<div className="d-flex">
|
||||
{state.topics.map((topic) => {
|
||||
return (
|
||||
<div
|
||||
className="text-left m-2 p-1 d-inline-block"
|
||||
style={{ backgroundColor: "#D6D1D0" }}
|
||||
>
|
||||
<p>{topic}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<form onSubmit={onSubmit} className="text-left">
|
||||
<div id="form-group">
|
||||
<input className="btn btn-success" type="submit" value="+1" />
|
||||
</div>
|
||||
<br />
|
||||
</form>
|
||||
<div className="d-flex">
|
||||
<p className="bg-info rounded p-2 text-white">
|
||||
{state.upvotes} Likes
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={onComment}>
|
||||
<div id="form-group">
|
||||
<textarea
|
||||
className="form-control"
|
||||
id="comment"
|
||||
type="text"
|
||||
placeholder="Enter comment here..."
|
||||
/>
|
||||
<input className="btn btn-primary" type="submit" value="Submit" />
|
||||
</div>
|
||||
<br />
|
||||
</form>
|
||||
<div className="text-left">
|
||||
<h4>Comments:</h4>
|
||||
{state.comments.map((comment) => {
|
||||
return (
|
||||
<div>
|
||||
<p>{topic}</p>
|
||||
<div
|
||||
className="card card-body"
|
||||
style={{ backgroundColor: "#D6D1D0" }}
|
||||
>
|
||||
<p className="card-text">{comment}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import React, { useState, useEffect } from "react";
|
|||
const Events = (props) => {
|
||||
const [state, setState] = useState({
|
||||
user: { username: "" },
|
||||
events: [{ id: 1, text: "Green Earth" }],
|
||||
events: [{ id: 1, upvotes: 0, text: "Green Earth" }],
|
||||
});
|
||||
const [stocks, setStocks] = useState([]);
|
||||
|
||||
|
|
@ -30,14 +30,18 @@ const Events = (props) => {
|
|||
return (
|
||||
<div>
|
||||
<h1 className="d-flex justify-content-center m-2 p-4">Events</h1>
|
||||
<a className="btn btn-large btn-success" href="/createevent">
|
||||
Create Event
|
||||
</a>
|
||||
<div className="container">
|
||||
<h1>Hello {state.user.username}!</h1>
|
||||
{state.events.map((event) => {
|
||||
return (
|
||||
<div>
|
||||
<a href={"/event/" + event.id} class="">
|
||||
<div className="card card-body">
|
||||
<a className="card-title" href={"/event/" + event.id}>
|
||||
{event.text}
|
||||
</a>
|
||||
<p className="text-success">+{event.upvotes}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,14 @@ const Post = (props) => {
|
|||
post_text: "We are gonna die if we don't do anything about climate change!",
|
||||
upvotes: 0,
|
||||
topics: ["climate change", "death"],
|
||||
comments: ["this guy is weird", "no he is right"],
|
||||
comments: [
|
||||
"this guy is weird",
|
||||
"no he is right. Climate change is a serious issue today oawtoa jto jwao jwo jwoap rjpwoarj woarj pwoajpfjpoajrpowaj pwoaj pwoa tjpwoa jpoawj posaj poasj pojawp ojwapo jposaj ",
|
||||
"factual",
|
||||
"Great speech!",
|
||||
"really?",
|
||||
"wow i didn't know that",
|
||||
],
|
||||
});
|
||||
const [stocks, setStocks] = useState([]);
|
||||
|
||||
|
|
@ -43,36 +50,84 @@ const Post = (props) => {
|
|||
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}/postcomment`, requestOptions)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
callAPI();
|
||||
}, []);
|
||||
return (
|
||||
<div>
|
||||
<h1 className="d-flex justify-content-center m-2 p-4">Post</h1>
|
||||
<div className="container">
|
||||
<h1>Hello {state.user.username}!</h1>
|
||||
<h2>Post {props.match.params.id}</h2>
|
||||
<h2>{state.post_title}</h2>
|
||||
<p>{state.post_text}</p>
|
||||
<form onSubmit={onSubmit}>
|
||||
<div className="container">
|
||||
<h1>Hello {state.user.username}!</h1>
|
||||
<h1 className="d-flex justify-content-center m-2 p-4">
|
||||
Post {props.match.params.id}
|
||||
</h1>
|
||||
<div className="card card-body">
|
||||
<h2 className="card-title">{state.post_title}</h2>
|
||||
<p className="text-left">{state.post_text}</p>
|
||||
<h4 className="text-left">Topics:</h4>
|
||||
<div className="d-flex">
|
||||
{state.topics.map((topic) => {
|
||||
return (
|
||||
<div
|
||||
className="text-left m-2 p-1 d-inline-block"
|
||||
style={{ backgroundColor: "#D6D1D0" }}
|
||||
>
|
||||
<p>{topic}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<form onSubmit={onSubmit} className="text-left">
|
||||
<div id="form-group">
|
||||
<input className="btn btn-primary" type="submit" value="+1" />
|
||||
<input
|
||||
className="btn btn-success text-left"
|
||||
type="submit"
|
||||
value="+1"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
</form>
|
||||
<h4>Topics:</h4>
|
||||
{state.topics.map((topic) => {
|
||||
return (
|
||||
<div class="inline">
|
||||
<p>{topic}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className="d-flex">
|
||||
<p className="bg-info rounded p-2 text-white">
|
||||
{state.upvotes} Likes
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={onComment}>
|
||||
<div id="form-group">
|
||||
<textarea
|
||||
className="form-control"
|
||||
id="comment"
|
||||
type="text"
|
||||
placeholder="Enter comment here..."
|
||||
/>
|
||||
<input className="btn btn-primary" type="submit" value="Submit" />
|
||||
</div>
|
||||
<br />
|
||||
</form>
|
||||
<div className="text-left">
|
||||
<h4>Comments:</h4>
|
||||
{state.comments.map((comment) => {
|
||||
return (
|
||||
<div>
|
||||
<p>{comment}</p>
|
||||
<div
|
||||
className="card card-body"
|
||||
style={{ backgroundColor: "#D6D1D0" }}
|
||||
>
|
||||
<p className="card-text">{comment}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import React, { useState, useEffect } from "react";
|
|||
const Posts = (props) => {
|
||||
const [state, setState] = useState({
|
||||
user: { username: "" },
|
||||
posts: [{ id: 1, text: "monkeys" }],
|
||||
posts: [{ id: 1, upvotes: 0, text: "monkeys" }],
|
||||
});
|
||||
|
||||
const requestOptions = {
|
||||
|
|
@ -29,14 +29,18 @@ const Posts = (props) => {
|
|||
return (
|
||||
<div>
|
||||
<h1 className="d-flex justify-content-center m-2 p-4">Posts</h1>
|
||||
<a className="btn btn-large btn-success" href="/createpost">
|
||||
Create Post
|
||||
</a>{" "}
|
||||
<div className="container">
|
||||
<h1>Hello {state.user.username}!</h1>
|
||||
{state.posts.map((post) => {
|
||||
return (
|
||||
<div>
|
||||
<a href={"/post/" + post.id} class="">
|
||||
<div className="card card-body">
|
||||
<a href={"/post/" + post.id} className="card-title">
|
||||
{post.text}
|
||||
</a>
|
||||
<p className="text-success">+{post.upvotes}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -33,13 +33,18 @@ const Profile = (props) => {
|
|||
<div className="container">
|
||||
<h1>Hello {state.user.username}!</h1>
|
||||
<h2>Topics you are interested in:</h2>
|
||||
{state.topics.map((topic) => {
|
||||
return (
|
||||
<div>
|
||||
<p>{topic}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div className="d-flex">
|
||||
{state.topics.map((topic) => {
|
||||
return (
|
||||
<div
|
||||
className="text-left m-2 p-1 d-inline-block"
|
||||
style={{ backgroundColor: "#D6D1D0" }}
|
||||
>
|
||||
<p>{topic}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
/>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-light">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
|
||||
<a href="#reinvest"
|
||||
><h1 class="navbar-brand" width="100px" href="#reinvest">
|
||||
PoliTalk
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
<br />
|
||||
<br />
|
||||
<h3 class="text-white bg-primary rounded-lg shadow-lg p-3 mb-5">
|
||||
Digitally empowering minorities in politics
|
||||
Digitally empowering underrepresented minorities in politics
|
||||
</h3>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user