react-router-dom

This commit is contained in:
Primakov Alexandr Alexandrovich 2024-05-04 14:58:19 +03:00
parent bb49021fb8
commit 1db1a2efce
11 changed files with 127 additions and 31 deletions

View File

@ -1,22 +1,24 @@
const pkg = require('./package')
const pkg = require("./package");
module.exports = {
apiPath: 'stubs/api',
apiPath: "stubs/api",
webpackConfig: {
output: {
publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`
}
publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
},
},
/* use https://kc.admin.inno-js.ru/ to create config, navigations and features */
navigations: {
'r-and-m.main': '/r-and-m'
"r-and-m.main": "/r-and-m",
"r-and-m.search": "/search",
"r-and-m.character.detail": "/char/:charId"
},
features: {
'r-and-m': {
"r-and-m": {
// add your features here in the format [featureName]: { value: string }
},
},
config: {
key: 'value'
}
}
key: "value",
},
};

43
package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "r-and-m",
"version": "1.0.0",
"version": "0.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "r-and-m",
"version": "1.0.0",
"version": "0.0.0",
"license": "ISC",
"dependencies": {
"@emotion/react": "^11.11.4",
@ -17,6 +17,7 @@
"express": "^4.19.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.23.0",
"typescript": "^5.4.4"
}
},
@ -2222,6 +2223,14 @@
"node": ">= 8"
}
},
"node_modules/@remix-run/router": {
"version": "1.16.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
"integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/@socket.io/component-emitter": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
@ -6549,6 +6558,36 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"node_modules/react-router": {
"version": "6.23.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
"integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
"dependencies": {
"@remix-run/router": "1.16.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.23.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
"integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
"dependencies": {
"@remix-run/router": "1.16.0",
"react-router": "6.23.0"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/rechoir": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",

View File

@ -25,6 +25,7 @@
"express": "^4.19.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.23.0",
"typescript": "^5.4.4"
}
}

17
src/__data__/urls.ts Normal file
View File

@ -0,0 +1,17 @@
import { getNavigationsValue } from '@ijl/cli';
import { generatePath } from 'react-router-dom';
const baseUrl = getNavigationsValue('r-and-m.main');
export const URLs = {
baseUrl,
ui: {
search: getNavigationsValue('r-and-m.search') && `${baseUrl}${getNavigationsValue('r-and-m.search')}`,
charDetail: {
url: `${baseUrl}${getNavigationsValue('r-and-m.character.detail')}`,
on: Boolean(getNavigationsValue('r-and-m.character.detail')),
getUrl: (charId: number) => generatePath(`${baseUrl}${getNavigationsValue('r-and-m.character.detail')}`, { charId })
}
},
api: {},
}

View File

@ -1,17 +1,16 @@
import React from "react";
import { Global } from "@emotion/react";
import { BrowserRouter } from "react-router-dom";
import { LandingPage } from "./pages/landing";
import { SearchCharacterPage } from "./pages/search-character";
import { globalStyles } from "./global-styles";
import { PageRoutes } from "./routes";
const App = () => {
return (
<>
<BrowserRouter>
<Global styles={globalStyles} />
{location.pathname === "/r-and-m" && <LandingPage />}
{location.pathname === "/r-and-m/search" && <SearchCharacterPage />}
</>
<PageRoutes />
</BrowserRouter>
);
};

View File

@ -1,7 +1,9 @@
import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { Link as ConnectedLink } from 'react-router-dom';
export const StyledLink = styled.a<{
export const StyledLink = styled(ConnectedLink)<{
contrast?: boolean;
inheritColor?: boolean;
}>`

View File

@ -22,7 +22,7 @@ export const Link = (props: LinkProps) => {
}
return (
<StyledLink inheritColor={props.inheritColor} contrast={props.contrast} href={props.href} {...linkProps}>
<StyledLink reloadDocument={isExternal} inheritColor={props.inheritColor} contrast={props.contrast} to={props.href} {...linkProps}>
{props.children}
{isExternal && <img src={externalIcon} alt="external link icon" />}
</StyledLink>

View File

@ -1,30 +1,45 @@
import React from "react";
// import { Link as ConnectedLink } from 'react-router-dom'
import { Link } from "../link";
import { Nav, NavList } from "./nav-panel.style";
import { URLs } from "../../__data__/urls";
const navList = [
{ title: "Home", href: "#01" },
{ title: "Персонажи", href: "#02" },
{ title: "Home", href: "/r-and-m" },
{ title: "Персонажи", href: "/r-and-m/search" },
{ title: "Локации", href: "#03" },
{ title: "Эризоды", href: "#04" },
];
const nav = {
home: { title: "Home", href: URLs.baseUrl },
search: { title: "Персонажи", href: URLs.ui.search },
};
export function NavPanel({ currentNavElement }) {
return (
<Nav>
<NavList>
{navList.map((element) => (
<li key={element.href}>
<li>
<Link
contrast={currentNavElement === element.title}
href={element.href}
contrast={currentNavElement === nav.home.title}
href={nav.home.href}
>
{element.title}
{nav.home.title}
</Link>
</li>
))}
{URLs.ui.search && (
<li>
<Link
contrast={currentNavElement === nav.search.title}
href={nav.search.href}
>
{nav.search.title}
</Link>
</li>
)}
</NavList>
</Nav>
);

View File

@ -9,6 +9,7 @@ import logo4x from "../assets/logo_4x.png";
import { Link } from "../components/link";
import { Card } from "../components/card";
import { Header1 } from "../components/common";
import {
BrandText,
Logo,

View File

@ -1,4 +1,5 @@
import React from "react";
import { Link as Connectedlink } from "react-router-dom";
import data from "../__stubs__/characters.json";
import logo from "../assets/logo_1x.png";
@ -20,6 +21,7 @@ import {
} from "./style";
import { Header1 } from "../components/common";
import { InputField } from "../components/field/field";
import { URLs } from "../__data__/urls";
export const SearchCharacterPage = () => {
return (
@ -55,10 +57,12 @@ export const SearchCharacterPage = () => {
</MainCardWrapper>
<CharacterList>
{data?.map((char) => (
<Connectedlink to={URLs.ui.charDetail.getUrl(char.id)}>
<CharacterItem key={char.id}>
<img src={char.image} />
<CharName>{char.name}</CharName>
</CharacterItem>
</Connectedlink>
))}
</CharacterList>
</Main>

16
src/routes.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import { Routes, Route } from'react-router-dom';
import { URLs } from './__data__/urls';
import { LandingPage } from './pages/landing';
import { SearchCharacterPage } from './pages/search-character';
export const PageRoutes = () => (
<Routes>
<Route path={URLs.ui.charDetail.url} element={<LandingPage />} />
<Route path={URLs.baseUrl} element={<LandingPage />} />
{URLs.ui.search && <Route path={URLs.ui.search} element={<SearchCharacterPage />} />}
<Route path="*" element={<h1>Page not found</h1>} />
</Routes>
)