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
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
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.*=)"
@@ -44,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//:'/}"
@@ -52,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

@@ -4,7 +4,7 @@ import getConfig from "../config/config";
const config = getConfig();
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",
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";
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 = {
async getPostsByCoords (lat, lon) {

28
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,13 +40,18 @@ 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>
@@ -54,10 +59,11 @@ const Post = ({ post, recursionDepth, selectPost, reload }) => {
{recursionDepth !== 0 && <div className="nrOfComments">
<FontAwesomeIcon className="icon" icon={faComments}/>
<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)}
{getDate(post.date)}
</div>
<div className="row">
<div className="votes">
@@ -76,18 +82,16 @@ const Post = ({ post, recursionDepth, selectPost, reload }) => {
</button>
</div>
</div>
{recursionDepth !== 0 && <button onClick={() => selectPost(post)}>Antworten</button>}
{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} />)}
{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_ || {};
}