n.kolosnaj/SimfonyBasics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Last commit july 5th

Browse Source
This commit is contained in:
nkolosnjaj
2024-07-05 13:46:23 +02:00
parent dad0d86e8c
commit b0e4dfbb76
24982 changed files with 2621219 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
spa/src/api/api.js Normal file
View File

@@ -0,0 +1,11 @@
function fetchCollection(path) {
return fetch(ENV_API_ENDPOINT + path).then(resp => resp.json()).then(json => json['hydra:member']);
}
export function findConferences() {
return fetchCollection('api/conferences');
}
export function findComments(conference) {
return fetchCollection('api/comments?conference='+conference.id);
}

48
spa/src/app.js Normal file
View File

@@ -0,0 +1,48 @@
import {h, render} from 'preact';
import {Router, Link} from 'preact-router';
import {useState, useEffect} from 'preact/hooks';
import {findConferences} from './api/api';
import Home from './pages/home';
import Conference from './pages/conference';
import '../assets/styles/app.scss';
function App() {
const [conferences, setConferences] = useState(null);
useEffect(() => {
findConferences().then((conferences) => setConferences(conferences));
}, []);
if (conferences === null) {
return <div className="text-center pt-5">Loading...</div>;
}
return (
<div>
<header className="header">
<nav className="navbar navbar-light bg-light">
<div className="container">
<Link className="navbar-brand mr-4 pr-2" href="/">
&#128217; Guestbook
</Link>
</div>
</nav>
<nav className="bg-light border-bottom text-center">
{conferences.map((conference) => (
<Link className="nav-conference" href={'/conference/' + conference.slug}>
{conference.city} {conference.year}
</Link>
))}
</nav>
</header>
<Router>
<Home path="/" conferences={conferences}/>
<Conference path="/conference/:slug" conferences={conferences}/>
</Router>
</div>
)
}
render(<App/>, document.getElementById('app'));

14
spa/src/index.ejs Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<title>Conference Guestbook application</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

49
spa/src/pages/conference.js Normal file
View File

@@ -0,0 +1,49 @@
import {h} from 'preact';
import {findComments} from '../api/api';
import {useState, useEffect} from 'preact/hooks';
function Comment({comments}) {
if (comments !== null && comments.length === 0) {
return <div className="text-center pt-4">No comments yet</div>;
}
if (!comments) {
return <div className="text-center pt-4">Loading...</div>;
}
return (
<div className="pt-4">
{comments.map(comment => (
<div className="shadow border rounded-3 p-3 mb-4">
<div className="comment-img mr-3">
{!comment.photoFilename ? '' : (
<a href={ENV_API_ENDPOINT + 'uploads/photos/' + comment.photoFilename} target="_blank">
<img src={ENV_API_ENDPOINT + 'uploads/photos/' + comment.photoFilename}/>
</a>
)}
</div>
<h5 className="font-weight-light mt-3 mb-0">{comment.author}</h5>
<div className="comment-text">{comment.text}</div>
</div>
))}
</div>
);
}
export default function Conference({conferences, slug}) {
const conference = conferences.find(conference => conference.slug === slug);
const [comments, setComments] = useState(null);
useEffect(() => {
findComments(conference).then(comments => setComments(comments));
}, [slug]);
return (
<div className="p-3">
<h4>{conference.city} {conference.year}</h4>
<Comment comments={comments}/>
</div>
);
}

29
spa/src/pages/home.js Normal file
View File

@@ -0,0 +1,29 @@
import {h} from 'preact';
import {Link} from 'preact-router';
export default function Home({conferences}) {
if (!conferences) {
return <div className="p-3 text-center">No conferences yet</div>;
}
return (
<div className="p-3">
{conferences.map((conference) => (
<div className="card border shadow-sm lift mb-3">
<div className="card-body">
<div className="card-title">
<h4 className="font-weight-light">
{conference.city} {conference.year}
</h4>
</div>
<Link className="btn btn-sm btn-primary stretched-link" href={'/conference/' + conference.slug}>
View
</Link>
</div>
</div>
))}
</div>
);
}