Skip to content

Commit

Permalink
added dynamic navigator generating
Browse files Browse the repository at this point in the history
  • Loading branch information
@Andcool-Systems
Andcool-Systems committed Nov 25, 2024
1 parent 4076e39 commit d0ea660
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 16 deletions.
38 changes: 31 additions & 7 deletions src/app/modules/components/card.module.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import Style from "@/app/styles/workshop/page.module.css";
import style_card from "@/app/styles/workshop/card.module.css";
import NextImage from 'next/image';
import { getCookie } from "cookies-next";
import Link from "next/link";
import { CSSProperties, useEffect, useState } from "react";
import Link, { LinkProps } from "next/link";
import { CSSProperties, ReactNode, useEffect, useState } from "react";

import { IconCircleHalf2, IconStar, IconStarFilled, IconUser } from '@tabler/icons-react';
import { getIcon } from "../utils/categories.module";
import { useRouter } from "next/navigation";
import { Tooltip, UseGlobalTooltip } from "./tooltip";
import { usePathname, useRouter } from "next/navigation";
import { UseGlobalTooltip } from "./tooltip";
import useCookie from "../utils/useCookie.module";
import ApiManager from "../utils/apiManager";

Expand Down Expand Up @@ -84,6 +84,30 @@ const backgrounds: { [key: string]: string } = {
default: 'default'
}

interface AnimatedLinkProps
extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">,
LinkProps {
children: ReactNode;
href: string;
}

export const ReferrerLink: React.FC<AnimatedLinkProps> = ({ children, href, ...props }) => {
const pathname = usePathname();
const router = useRouter();
const handleTransition = async (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
e.preventDefault();
if (pathname.endsWith(href)) return;
window.sessionStorage.setItem('referrer', pathname);
router.push(href);
};

return (
<Link {...props} href={href} onClick={handleTransition}>
{children}
</Link>
);
};

export const Card = ({ el, base64, className }: { el: Bandage, base64: string, className?: { readonly [key: string]: string; } }) => {
const [starred, setStarred] = useState<boolean>(el.starred);
const [last, setLast] = useState<boolean>(el.starred);
Expand Down Expand Up @@ -137,7 +161,7 @@ export const Card = ({ el, base64, className }: { el: Bandage, base64: string, c
}
</div>
<div style={{ position: 'relative' }}>
<Link href={`/workshop/${el.external_id}`}>
<ReferrerLink href={`/workshop/${el.external_id}`}>
<NextImage
src={base64}
className={style_card.skin}
Expand All @@ -147,12 +171,12 @@ export const Card = ({ el, base64, className }: { el: Bandage, base64: string, c
draggable='false'
style={{ '--shadow-color': el.accent_color } as React.CSSProperties}
/>
</Link>
</ReferrerLink>
<div className={style_card.categories}>{categories}</div>
</div>
<div className={style_card.about}>
<div>
<Link className={style_card.title} href={`/workshop/${el.external_id}`}>{el.title}</Link>
<ReferrerLink className={style_card.title} href={`/workshop/${el.external_id}`}>{el.title}</ReferrerLink>
<p className={style_card.description}>{constrainedText(el.description ?? '', 50)}</p>
</div>

Expand Down
22 changes: 22 additions & 0 deletions src/app/styles/navigator.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@
max-width: 1280px;
margin-left: auto;
margin-right: auto;
transform-origin: left;
}

.link {
color: rgb(175, 175, 175);
text-decoration: none;
font-weight: 500;
font-size: 1.01rem;
white-space: nowrap;
}

.link:hover {
Expand All @@ -28,4 +30,24 @@
.arrow {
width: 1.25rem;
height: auto;
flex-shrink: 0;
flex-grow: 0;
}

@media(max-width: 670px) {
.container {
transform: scale(.9);
}
}

@media(max-width: 530px) {
.container {
transform: scale(.8);
}
}

@media(max-width: 360px) {
.container {
transform: scale(.75);
}
}
34 changes: 29 additions & 5 deletions src/app/workshop/[id]/client_code.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,34 @@ export const rgbToHex = (r: number, g: number, b: number) => {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

export default function Home({ data }: { data: Interfaces.Bandage }) {
const generatePath = (external_id: string, referrer_str: string | null) => {
const names: { [key: string]: { name: string, url: string } } = {
workshop: { name: 'Мастерская', url: '/workshop' },
me: { name: 'Личный кабинет', url: '/me' },
stars: { name: 'Избранное', url: '/me/stars' },
notifications: { name: 'Уведомления', url: '/me/notifications' }
};

const default_path = [
{ name: 'Мастерская', url: '/workshop' },
{ name: external_id, url: `/workshop/${external_id}` }
];

const referrer = referrer_str ?? window.sessionStorage.getItem('referrer');
window.sessionStorage.removeItem('referrer');

if (!referrer || referrer === window.location.pathname) {
return default_path;
}
const result = referrer.split('/').slice(1).map(page => names[page]);
if (result.some(page => !page)) return default_path;

return [...result, { name: external_id, url: `/workshop/${external_id}` }];
}

export default function Home({ data, referrer }: { data: Interfaces.Bandage, referrer: string | null }) {
const [loaded, setLoaded] = useState<boolean>(false);
const [navPath, setNavPath] = useState<{ name: string, url: string }[]>([]);

const [pose, setPose] = useState<number>(1);
const [skin, setSkin] = useState<string>("");
Expand Down Expand Up @@ -94,6 +120,7 @@ export default function Home({ data }: { data: Interfaces.Bandage }) {
}

useEffect(() => {
setNavPath(generatePath(data.external_id, referrer));
client.current = new Client();
client.current.addEventListener('skin_changed', (event: { skin: string, cape: string }) => {
setSkin(event.skin);
Expand Down Expand Up @@ -163,10 +190,7 @@ export default function Home({ data }: { data: Interfaces.Bandage }) {
className={style.main}
style={loaded ? { opacity: '1', transform: 'translateY(0)' } : { opacity: '0', transform: 'translateY(50px)' }}
>
<NavigatorEl path={[
{ name: 'Мастерская', url: '/workshop' },
{ name: data.external_id, url: `/workshop/${data.external_id}` }
]}
<NavigatorEl path={navPath}
style={{ marginBottom: "1rem" }} />
{
data.check_state ?
Expand Down
9 changes: 5 additions & 4 deletions src/app/workshop/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@ import axios from "axios";
import Home from "./client_code";
import * as Interfaces from "@/app/interfaces";
import { headers } from 'next/headers';
import { notFound } from "next/navigation";
import { notFound, redirect } from "next/navigation";
import { Metadata } from "next";
import { numbersTxt } from "@/app/modules/utils/time.module";


export const generateMetadata = async ({ params }: { params: { id: string } }): Promise<Metadata> => {
const meta = await axios.get(`${process.env.NEXT_PUBLIC_GLOBAL_API_URL}workshop/${params.id}/info`, {
validateStatus: () => true,
Expand Down Expand Up @@ -37,10 +36,11 @@ export const generateMetadata = async ({ params }: { params: { id: string } }):
}
}

const Main = async ({ params }: { params: { id: string } }) => {
const Main = async ({ params, searchParams }: { params: { id: string }, searchParams: Record<string, string | string[]> }) => {
const headersList = headers();
const cookie = headersList.get('Cookie');
const userAgent = headersList.get('User-Agent');
const referrer = searchParams['ref'];

const initial_response = await axios.get(`${process.env.NEXT_PUBLIC_GLOBAL_API_URL}workshop/${params.id}`, {
validateStatus: () => true,
Expand All @@ -59,7 +59,8 @@ const Main = async ({ params }: { params: { id: string } }) => {
if (initial_response.status !== 200 || !data) {
notFound();
}
return <Home data={data} />;

return <Home data={data} referrer={referrer as string} />;
}

export default Main;

0 comments on commit d0ea660

Please sign in to comment.