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

Compare commits

base: SWA-Project:e17388869274e364c4f43285aabdc60b51f00c1e
Branches Tags
SWA-Project:main
..
compare: SWA-Project:main
Branches Tags
SWA-Project:main

17 Commits
e173888692 ... 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
Timo Schneider
6f9933f332 removed unnecessary entrypoint code 2024-06-13 22:48:55 +02:00
Timo Schneider
3936d1c651 removed unnecessary entrypoint code 2024-06-13 22:42:04 +02:00
9 changed files with 70 additions and 73 deletions
Expand all files Collapse all files

38
entrypoint.sh
View File

@@ -3,40 +3,8 @@
set -e set -e
if [ -z "${NGINX_ENTRYPOINT_QUIET_LOGS:-}" ]; then
exec 3>&1
else
exec 3>/dev/null
fi
if [ "$1" = "nginx" -o "$1" = "nginx-debug" ]; then
if /usr/bin/find "/docker-entrypoint.d/" -mindepth 1 -maxdepth 1 -type f -print -quit 2>/dev/null | read v; then
echo >&3 "$0: /docker-entrypoint.d/ is not empty, will attempt to perform configuration"
echo >&3 "$0: Looking for shell scripts in /docker-entrypoint.d/"
find "/docker-entrypoint.d/" -follow -type f -print | sort -n | while read -r f; do
case "$f" in
*.sh)
if [ -x "$f" ]; then
echo >&3 "$0: Launching $f";
"$f"
else
# warn on shell scripts without exec bit
echo >&3 "$0: Ignoring $f, not executable";
fi
;;
*) echo >&3 "$0: Ignoring $f";;
esac
done
echo >&3 "$0: Configuration complete; ready for start up"
else
echo >&3 "$0: No files found in /docker-entrypoint.d/, skipping configuration"
fi
fi
# Set up endpoint for env retrieval # 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 # Collect enviroment variables for react
eval enviroment_variables="$(env | grep REACT_APP.*=)" eval enviroment_variables="$(env | grep REACT_APP.*=)"
@@ -44,7 +12,7 @@ eval enviroment_variables="$(env | grep REACT_APP.*=)"
# Loop over variables # Loop over variables
env | grep REACT_APP.*= | while read -r line; env | grep REACT_APP.*= | while read -r line;
do 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 # Notify the user
printf "Env variable %s' was injected into React App. \n" $line | sed "0,/=/{s//:'/}" printf "Env variable %s' was injected into React App. \n" $line | sed "0,/=/{s//:'/}"
@@ -52,7 +20,7 @@ do
done done
# End the object creation # 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." 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" content="Web site created using create-react-app"
/> />
<title>SWA-Jodel</title> <title>SWA-Jodel</title>
<script src="%PUBLIC_URL%/env-config.js"></script>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <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) => { const recursiveSort = (posts) => {
posts.forEach((post, index) => {posts[index].comments = recursiveSort(post.comments)}); 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; return posts;
} }

23
src/App.scss
View File

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

2
src/Authentification/Keycloak.js
View File

@@ -4,7 +4,7 @@ import getConfig from "../config/config";
const config = getConfig(); const config = getConfig();
const keycloak = new Keycloak({ const keycloak = new Keycloak({
url: config.REACT_APP_KC_HOSTNAME || process.env.REACT_APP_KC_HOSTNAME, url: config.REACT_APP_KC || process.env.REACT_APP_KC,
realm: "Jodel", realm: "Jodel",
clientId: "jodel-frontend", clientId: "jodel-frontend",
}); });

2
src/api/posts.api.js
View File

@@ -4,7 +4,7 @@ import keycloak from "../Authentification/Keycloak";
import getConfig from "../config/config"; import getConfig from "../config/config";
const config = getConfig(); const config = getConfig();
const path = config.REACT_APP_API_HOSTNAME || process.env.REACT_APP_API_HOSTNAME; const path = config.REACT_APP_API || process.env.REACT_APP_API;
export const postApi = { export const postApi = {
async getPostsByCoords (lat, lon) { async getPostsByCoords (lat, lon) {

70
src/components/Post.js
View File

@@ -7,8 +7,8 @@ import {
faAngleUp, faAngleUp,
faAngleDown faAngleDown
} from '@fortawesome/free-solid-svg-icons'; } from '@fortawesome/free-solid-svg-icons';
import {faMessage} from "@fortawesome/free-solid-svg-icons/faMessage";
import {postApi} from "../api/posts.api"; import {postApi} from "../api/posts.api";
import keycloak from "../Authentification/Keycloak";
const Post = ({ post, recursionDepth, selectPost, reload }) => { const Post = ({ post, recursionDepth, selectPost, reload }) => {
@@ -40,54 +40,58 @@ const Post = ({ post, recursionDepth, selectPost, reload }) => {
return nrOfComments; 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 ( return (
<div> <div>
<div className="post" onClick={click => {if (!(click.target instanceof HTMLButtonElement)) setShowComments(!showComments)}}> <div className="post" onClick={click => {if (!(click.target instanceof HTMLButtonElement)) setShowComments(!showComments)}}>
<div className="post-container"> <div className="post-container">
{post.id === post.parent && <div className="post-title"> <div className="post-title">
<h3>{post.title}</h3> <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>
<div className="post-content"> <div className="post-content">
<p>{post.content}</p> <p>{post.content}</p>
</div> </div>
</div> </div>
{recursionDepth !== 0 && <div className="nrOfComments"> {recursionDepth !== 0 && <div className="nrOfComments">
<FontAwesomeIcon className="icon" icon={faComments}/> <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>}
<div className="post-right"> <div className="post-right">
<div className="post-date"> <div className="post-date">
{post.date.slice(8, 10) + "." + post.date.slice(5, 7) + "." + post.date.slice(0, 4)} {getDate(post.date)}
</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>}
</div> </div>
</div> <div className="row">
<div className="comment"> <div className="votes">
{recursionDepth !== 0 && showComments && post.comments.map(post => <Post key={post.id} post={post} <button onClick={(e) => {
recursionDepth={recursionDepth - 1} e.stopPropagation();
selectPost={selectPost} upvote();
reload={reload} />)} }}>
{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> </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; export default Post;

1
src/config/config.js
View File

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