SWA-Project/SWA-frontend
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: SWA-Project:6f9933f33217f56db9c5ec2ffd2c3f508767f97a
Branches Tags
SWA-Project:main
...
compare: SWA-Project:main
Branches Tags
SWA-Project:main

15 Commits
6f9933f332 ... main

Author SHA1 Message Date
Timo Schneider
8968e990ec fixed comment button moving during further comments 2024-06-19 13:35:54 +02:00
Timo Schneider
94996fb45c pinned answer Buttons to bottom of post 2024-06-19 13:01:11 +02:00
Timo Schneider
29af08f79d moved reaction buttons a little up 2024-06-19 12:03:35 +02:00
Timo Schneider
a6ef1c71e2 added time to post 2024-06-19 11:57:46 +02:00
Timo Schneider
2f4eb05233 fixed post sorting for chrome and opera 2024-06-19 09:49:50 +02:00
timoschneider
34e44d2310 fix to not being able to reply to comments 2024-06-18 12:27:34 +02:00
timoschneider
f2f096ef67 changed displayed username 2024-06-15 13:09:22 +02:00
Pete-Gerlach
3f13bbdd19 show anonymousID in Posts and Comments 2024-06-14 16:27:02 +02:00
Timo Schneider
1ca4235283 added linebreak in posts 2024-06-14 09:44:24 +02:00
Timo Schneider
96753a774c added dev env 2024-06-13 23:40:09 +02:00
Timo Schneider
625485d318 removed logging 2024-06-13 23:13:20 +02:00
Timo Schneider
eeae861353 typo 2024-06-13 23:09:54 +02:00
Timo Schneider
d524a831cd test 2024-06-13 23:07:58 +02:00
Timo Schneider
1f947e3200 removed unnecessary entrypoint code 2024-06-13 22:50:43 +02:00
Timo Schneider
f92b7345ae removed unnecessary entrypoint code 2024-06-13 22:49:06 +02:00
9 changed files with 70 additions and 41 deletions
Expand all files Collapse all files

2
Dockerfile
View File

@@ -23,4 +23,4 @@ RUN chmod +x entrypoint.sh
COPY --from=builder /source/build /usr/share/nginx/html
ENTRYPOINT ["./entrypoint.s"]
ENTRYPOINT ["./entrypoint.sh"]

6
entrypoint.sh
View File

@@ -4,7 +4,7 @@
set -e
# Set up endpoint for env retrieval
echo "window._env_ = {" > /usr/share/nginx/html/env_config.js
echo "window._env_ = {" > /usr/share/nginx/html/env-config.js
# Collect enviroment variables for react
eval enviroment_variables="$(env | grep REACT_APP.*=)"
@@ -12,7 +12,7 @@ eval enviroment_variables="$(env | grep REACT_APP.*=)"
# Loop over variables
env | grep REACT_APP.*= | while read -r line;
do
printf "%s',\n" $line | sed "s/=/:'/" >> /usr/share/nginx/html/env_config.js
printf "%s',\n" $line | sed "s/=/:'/" >> /usr/share/nginx/html/env-config.js
# Notify the user
printf "Env variable %s' was injected into React App. \n" $line | sed "0,/=/{s//:'/}"
@@ -20,7 +20,7 @@ do
done
# End the object creation
echo "}" >> /usr/share/nginx/html/env_config.js
echo "}" >> /usr/share/nginx/html/env-config.js
echo "Enviroment Variable Injection Complete."

4
public/env-config.js Normal file
View File

@@ -0,0 +1,4 @@
window._env_ = {
REACT_APP_API: "https://api.jodel.anxietyprime.de",
REACT_APP_KC: "https://keycloak.anxietyprime.de",
}

1
public/index.html
View File

@@ -10,6 +10,7 @@
content="Web site created using create-react-app"
/>
<title>SWA-Jodel</title>
<script src="%PUBLIC_URL%/env-config.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

2
src/App.js
View File

@@ -35,7 +35,7 @@ const App = () => {
const recursiveSort = (posts) => {
posts.forEach((post, index) => {posts[index].comments = recursiveSort(post.comments)});
posts.sort((a, b) => a.date < b.date);
posts.sort((a, b) => a.date < b.date ? 1 : -1);
return posts;
}

23
src/App.scss
View File

@@ -63,12 +63,18 @@ h3 {
.post-content {
flex: 1;
margin-right: 20px;
white-space: pre-wrap;
}
.post-container {
margin-right: -5em;
}
.post-right {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 5em;
.post-date {
position: relative;
@@ -85,6 +91,7 @@ h3 {
display: flex;
flex-direction: column;
align-items: center;
margin-top: -1em;
button {
padding: 10px;
@@ -251,6 +258,8 @@ button {
}
.nrOfComments {
position: relative;
right: -3em;
height: 100%;
display: flex;
align-self: flex-end;
@@ -259,7 +268,15 @@ button {
font-size: 1.5em;
padding: 0.35em;
* {
padding-right: 0.25em;
padding-right: 0.3em;
}
span {
padding-right: 0.6em;
}
button {
padding: 0.3em 0.8em;
line-height: 2em;
font-size: 0.8em;
}
}
@@ -290,3 +307,7 @@ textarea {
margin-left: 0.5em;
width: 25%
}
.spacer {
height: 4em;
}

2
src/Authentification/Keycloak.js
View File

@@ -9,6 +9,6 @@ const keycloak = new Keycloak({
clientId: "jodel-frontend",
});
//keycloak.init({ onLoad: 'login-required' }).then((authenticated) => {});
keycloak.init({ onLoad: 'login-required' }).then((authenticated) => {});
export default keycloak;

70
src/components/Post.js
View File

@@ -7,8 +7,8 @@ import {
faAngleUp,
faAngleDown
} from '@fortawesome/free-solid-svg-icons';
import {faMessage} from "@fortawesome/free-solid-svg-icons/faMessage";
import {postApi} from "../api/posts.api";
import keycloak from "../Authentification/Keycloak";
const Post = ({ post, recursionDepth, selectPost, reload }) => {
@@ -40,54 +40,58 @@ const Post = ({ post, recursionDepth, selectPost, reload }) => {
return nrOfComments;
}
const getDate = (dateStr) => {
let date = new Date(dateStr);
return date.toLocaleDateString('de-DE') + "\n" + ("00" + date.getHours()).slice(-2) + ":" + ("00" + date.getMinutes()).slice(-2);
}
return (
<div>
<div className="post" onClick={click => {if (!(click.target instanceof HTMLButtonElement)) setShowComments(!showComments)}}>
<div className="post-container">
{post.id === post.parent && <div className="post-title">
<h3>{post.title}</h3>
</div>}
<div className="post-title">
<h3>{post.id === post.parent ? post.title : "Kommentar"}<span style={{color: 'gray'}}> von {post.anonymousID === 0 ? keycloak.idTokenParsed.preferred_username : "Anonymous " + post.anonymousID}</span></h3>
</div>
<div className="post-content">
<p>{post.content}</p>
</div>
</div>
{recursionDepth !== 0 && <div className="nrOfComments">
<FontAwesomeIcon className="icon" icon={faComments}/>
<span className="">{getComments(post, recursionDepth-1)}</span>
<span className="">{getComments(post, recursionDepth - 1)}</span>
<button onClick={() => selectPost(post)}>Antworten</button>
</div>}
<div className="post-right">
<div className="post-date">
{post.date.slice(8, 10) + "." + post.date.slice(5, 7) + "." + post.date.slice(0, 4)}
</div>
<div className="row">
<div className="votes">
<button onClick={(e) => {
e.stopPropagation();
upvote();
}}>
{post.reaction === true ? <FontAwesomeIcon icon={faCaretUp}/> : <FontAwesomeIcon icon={faAngleUp} />}
</button>
<span>{post.reactions.positive - post.reactions.negative}</span>
<button onClick={(e) => {
e.stopPropagation();
downVote();
}}>
{post.reaction === false ? <FontAwesomeIcon icon={faCaretDown}/> : <FontAwesomeIcon icon={faAngleDown} />}
</button>
</div>
</div>
{recursionDepth !== 0 && <button onClick={() => selectPost(post)}>Antworten</button>}
{getDate(post.date)}
</div>
</div>
<div className="comment">
{recursionDepth !== 0 && showComments && post.comments.map(post => <Post key={post.id} post={post}
recursionDepth={recursionDepth - 1}
selectPost={selectPost}
reload={reload} />)}
<div className="row">
<div className="votes">
<button onClick={(e) => {
e.stopPropagation();
upvote();
}}>
{post.reaction === true ? <FontAwesomeIcon icon={faCaretUp}/> : <FontAwesomeIcon icon={faAngleUp} />}
</button>
<span>{post.reactions.positive - post.reactions.negative}</span>
<button onClick={(e) => {
e.stopPropagation();
downVote();
}}>
{post.reaction === false ? <FontAwesomeIcon icon={faCaretDown}/> : <FontAwesomeIcon icon={faAngleDown} />}
</button>
</div>
</div>
{recursionDepth !== 0 && <div className="spacer"></div>}
</div>
</div>
)
;
<div className="comment">
{recursionDepth !== 0 && showComments && post.comments.map(post =>
<Post key={post.id} post={post} recursionDepth={recursionDepth - 1} selectPost={selectPost} reload={reload} />
)}
</div>
</div>
);
};
export default Post;

1
src/config/config.js
View File

@@ -1,5 +1,4 @@
const getConfig = () => {
console.log(window._env_);
return window._env_ || {};
}