popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

translations in location content, cleanup (commenting

Browse Source 
)
This commit is contained in:
Dobromir Popov
2024-11-05 00:29:17 +02:00
parent ecd7d73340
commit 08b1a78e32
4 changed files with 141 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
components/header.tsx
View File

@ -1,124 +1,121 @@
import Link from "next/link" // import Link from "next/link"
import { signIn, signOut, useSession } from "next-auth/react" // import { signIn, signOut, useSession } from "next-auth/react"
import styles from "../styles/header.module.css" // import styles from "../styles/header.module.css"
// The approach used in this component shows how to build a sign in and sign out // // The approach used in this component shows how to build a sign in and sign out
// component that works on pages which support both client and server side // // component that works on pages which support both client and server side
// rendering, and avoids any flash incorrect content on initial page load. // // rendering, and avoids any flash incorrect content on initial page load.
export default function Header() { // export default function Header() {
const { data: session, status } = useSession() // const { data: session, status } = useSession()
const loading = status === "loading" // const loading = status === "loading"
//generate top header with sign in/out button and dropdown menu and user name/surname using tailwindcss // //generate top header with sign in/out button and dropdown menu and user name/surname using tailwindcss
return ( // return (
<header className=""> // <header className="">
<noscript> // <noscript>
<style>{`.nojs-show { opacity: 1; top: 0; }`}</style> // <style>{`.nojs-show { opacity: 1; top: 0; }`}</style>
</noscript> // </noscript>
{/* <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script> */} // {/* <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script> */}
<div className={styles.signedInStatus}> // <div className={styles.signedInStatus}>
<p // <p className={`nojs-show ${!session && loading ? styles.loading : styles.loaded}`}>
className={`nojs-show ${ // {!session && (
!session && loading ? styles.loading : styles.loaded // <>
}`} // <span className={styles.notSignedInText}>
> // You are not signed in
{!session && ( // </span>
<> // <a
<span className={styles.notSignedInText}> // href={`/api/auth/signin`}
You are not signed in // className={styles.buttonPrimary}
</span> // onClick={(e) => {
<a // e.preventDefault()
href={`/api/auth/signin`} // signIn()
className={styles.buttonPrimary} // }}
onClick={(e) => { // >
e.preventDefault() // Sign in
signIn() // </a>
}} // </>
> // )}
Sign in // {session?.user && (
</a> // <>
</> // {session.user.image && (
)} // <span
{session?.user && ( // style={{ backgroundImage: `url('${session.user.image}')` }}
<> // className={styles.avatar}
{session.user.image && ( // />
<span // )}
style={{ backgroundImage: `url('${session.user.image}')` }} // <span className={styles.signedInText}>
className={styles.avatar} // <small>Signed in as</small>
/> // <br />
)} // <strong>{session.user.email ?? session.user.name}</strong>
<span className={styles.signedInText}> // </span>
<small>Signed in as</small> // <a
<br /> // href={`/api/auth/signout`}
<strong>{session.user.email ?? session.user.name}</strong> // className={styles.button}
</span> // onClick={(e) => {
<a // e.preventDefault()
href={`/api/auth/signout`} // signOut()
className={styles.button} // }}
onClick={(e) => { // >
e.preventDefault() // Sign out
signOut() // </a>
}} // </>
> // )}
Sign out // </p>
</a> // </div>
</> // {/* <nav className="max-w-7xl mx-auto ">
)} // <ul className={styles.navItems}>
</p> // <li className={styles.navItem}>
</div> // <Link href="/">Home</Link>
<nav className="max-w-7xl mx-auto "> // </li>
<ul className={styles.navItems}> // <li className={styles.navItem}>
<li className={styles.navItem}> // <Link href="/client">Client</Link>
<Link href="/">Home</Link> // </li>
</li> // <li className={styles.navItem}>
<li className={styles.navItem}> // <Link href="/server">Server</Link>
<Link href="/client">Client</Link> // </li>
</li> // <li className={styles.navItem}>
<li className={styles.navItem}> // <Link href="/protected">Protected</Link>
<Link href="/server">Server</Link> // </li>
</li> // <li className={styles.navItem}>
<li className={styles.navItem}> // <Link href="/api-example">API</Link>
<Link href="/protected">Protected</Link> // </li>
</li> // <li className={styles.navItem}>
<li className={styles.navItem}> // <Link href="/admin">Admin</Link>
<Link href="/api-example">API</Link> // </li>
</li> // <li className={styles.navItem}>
<li className={styles.navItem}> // <Link href="/me">Me</Link>
<Link href="/admin">Admin</Link> // </li>
</li> // <li className={styles.navItem}>
<li className={styles.navItem}> // CART
<Link href="/me">Me</Link> // {/* cart submenus * / }
</li> // <ul className={styles.submenu}>
<li className={styles.navItem}> // <li className={styles.submenuItem}>
CART // <Link href="/cart/locations">Locations</Link>
{/* cart submenus */} // </li>
<ul className={styles.submenu}> // <li className={styles.submenuItem}>
<li className={styles.submenuItem}> // <Link href="/cart/publishers">Publishers</Link>
<Link href="/cart/locations">Locations</Link> // </li>
</li> // <li className={styles.submenuItem}>
<li className={styles.submenuItem}> // <Link href="/cart/availabilities">Availabilities</Link>
<Link href="/cart/publishers">Publishers</Link> // </li>
</li> // <li className={styles.submenuItem}>
<li className={styles.submenuItem}> // <Link href="/cart/cartevents">Cart Event</Link>
<Link href="/cart/availabilities">Availabilities</Link> // </li>
</li> // </ul>
<li className={styles.submenuItem}>
<Link href="/cart/cartevents">Cart Event</Link>
</li>
</ul>
</li> // </li>
{/* end cart submenus */} // {/* end cart submenus * / }
<li className={styles.navItem}> // <li className={styles.navItem}>
<Link href="/cart/calendar">Calendar</Link> // <Link href="/cart/calendar">Calendar</Link>
</li> // </li>
</ul> // </ul >
</nav> // </nav > */ }
</header>
) // </header >
} // )
// }

2
components/layout.tsx
View File

@ -1,4 +1,4 @@
import Header from "./header"
import Link from 'next/link' import Link from 'next/link'
import Footer from "./footer" import Footer from "./footer"
import Sidebar from "./sidebar" import Sidebar from "./sidebar"

1
components/sidebar.tsx
View File

@ -16,6 +16,7 @@ import { UserRole } from "@prisma/client";
const packageVersion = require('../package.json').version; const packageVersion = require('../package.json').version;
function SidebarMenuItem({ item, session, isSubmenu }) { function SidebarMenuItem({ item, session, isSubmenu }) {
// const tMenu = useTranslations('menu'); // const tMenu = useTranslations('menu');
// const [t, locale] = useState(useTranslations('menu')); // const [t, locale] = useState(useTranslations('menu'));
// useEffect(() => { // useEffect(() => {

27
pages/cart/locations/[id].tsx
View File

@ -5,6 +5,8 @@ import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a lo
import { GetServerSideProps } from 'next'; import { GetServerSideProps } from 'next';
import { Location, UserRole } from "@prisma/client"; import { Location, UserRole } from "@prisma/client";
import axiosServer from '../../../src/axiosServer'; import axiosServer from '../../../src/axiosServer';
import { useTranslations, createTranslator } from 'next-intl';
// import { getTranslations } from 'next-intl/server';
const ViewLocationPage: React.FC<ViewLocationPageProps> = ({ location }) => { const ViewLocationPage: React.FC<ViewLocationPageProps> = ({ location }) => {
const [activeTab, setActiveTab] = useState('mainLocation'); const [activeTab, setActiveTab] = useState('mainLocation');
@ -12,6 +14,7 @@ const ViewLocationPage: React.FC<ViewLocationPageProps> = ({ location }) => {
const [images, setImages] = useState([]); const [images, setImages] = useState([]);
const [mainLocationImageCount, setMainLocationImageCount] = useState(0); const [mainLocationImageCount, setMainLocationImageCount] = useState(0);
const t = useTranslations('content');
useEffect(() => { useEffect(() => {
const mainLocationImages = [location.picture1, location.picture2, location.picture3].filter(Boolean); const mainLocationImages = [location.picture1, location.picture2, location.picture3].filter(Boolean);
@ -98,15 +101,37 @@ const ViewLocationPage: React.FC<ViewLocationPageProps> = ({ location }) => {
export const getServerSideProps: GetServerSideProps = async (context) => { export const getServerSideProps: GetServerSideProps = async (context) => {
const axios = await axiosServer(context); const axios = await axiosServer(context);
// Get the locale from context or use default
const locale = context.locale || 'en';
const messages = (await import(`../../../content/i18n/${locale}.json`)).default;
const t = createTranslator({ locale, messages });
// Function to replace placeholders in HTML content
const replacePlaceholders = (content: string) => {
if (!content) return '';
const placeholderPattern = /{([^}]+)}/g;
return content.replace(placeholderPattern, (match, key) => {
try {
return t(key);
} catch (error) {
return match;
}
});
};
const { data: location } = await axios.get( const { data: location } = await axios.get(
`${process.env.NEXT_PUBLIC_PUBLIC_URL}/api/data/locations/${context.params.id}` `${process.env.NEXT_PUBLIC_PUBLIC_URL}/api/data/locations/${context.params.id}`
); );
location.content = replacePlaceholders(location.content);
if (location.backupLocationId !== null) { if (location.backupLocationId !== null) {
const { data: backupLocation } = await axios.get( const { data: backupLocation } = await axios.get(
process.env.NEXT_PUBLIC_PUBLIC_URL + "/api/data/locations/" + location.backupLocationId process.env.NEXT_PUBLIC_PUBLIC_URL + "/api/data/locations/" + location.backupLocationId
); );
location.backupLocationName = backupLocation.name; location.backupLocationName = backupLocation.name;
location.backupLocationContent = backupLocation ? backupLocation.content : ""; location.backupLocationContent = backupLocation ? replacePlaceholders(backupLocation.content) : "";
location.backupLocationImages = backupLocation ? [backupLocation.picture1, backupLocation.picture2, backupLocation.picture3].filter(Boolean) : []; location.backupLocationImages = backupLocation ? [backupLocation.picture1, backupLocation.picture2, backupLocation.picture3].filter(Boolean) : [];
} }