From 1db1a2efce5ec959d4db323e9339e7a111bcb1e4 Mon Sep 17 00:00:00 2001 From: primakov Date: Sat, 4 May 2024 14:58:19 +0300 Subject: [PATCH] react-router-dom --- ijl.config.js | 20 ++++++------ package-lock.json | 43 ++++++++++++++++++++++++-- package.json | 1 + src/__data__/urls.ts | 17 ++++++++++ src/app.tsx | 11 +++---- src/components/link/link.styled.ts | 4 ++- src/components/link/link.tsx | 2 +- src/components/nav-panel/nav-panel.tsx | 31 ++++++++++++++----- src/pages/landing.tsx | 1 + src/pages/search-character.tsx | 12 ++++--- src/routes.tsx | 16 ++++++++++ 11 files changed, 127 insertions(+), 31 deletions(-) create mode 100644 src/__data__/urls.ts create mode 100644 src/routes.tsx diff --git a/ijl.config.js b/ijl.config.js index 497c2fd..aab2a2a 100644 --- a/ijl.config.js +++ b/ijl.config.js @@ -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", + }, +}; diff --git a/package-lock.json b/package-lock.json index ae1bb19..bc5dd3b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 6a513e6..82f70bd 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/src/__data__/urls.ts b/src/__data__/urls.ts new file mode 100644 index 0000000..fd1292c --- /dev/null +++ b/src/__data__/urls.ts @@ -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: {}, +} diff --git a/src/app.tsx b/src/app.tsx index 4c1ce22..7181060 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -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 ( - <> + - {location.pathname === "/r-and-m" && } - {location.pathname === "/r-and-m/search" && } - + + ); }; diff --git a/src/components/link/link.styled.ts b/src/components/link/link.styled.ts index 15ee24b..d8c877c 100644 --- a/src/components/link/link.styled.ts +++ b/src/components/link/link.styled.ts @@ -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; }>` diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx index d011df6..44b118e 100644 --- a/src/components/link/link.tsx +++ b/src/components/link/link.tsx @@ -22,7 +22,7 @@ export const Link = (props: LinkProps) => { } return ( - + {props.children} {isExternal && external link icon} diff --git a/src/components/nav-panel/nav-panel.tsx b/src/components/nav-panel/nav-panel.tsx index 4a0e11e..fd11bd6 100644 --- a/src/components/nav-panel/nav-panel.tsx +++ b/src/components/nav-panel/nav-panel.tsx @@ -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 ( ); diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx index 68ff966..545b39f 100644 --- a/src/pages/landing.tsx +++ b/src/pages/landing.tsx @@ -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, diff --git a/src/pages/search-character.tsx b/src/pages/search-character.tsx index c14f5ee..e7a1755 100644 --- a/src/pages/search-character.tsx +++ b/src/pages/search-character.tsx @@ -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 = () => { {data?.map((char) => ( - - - {char.name} - + + + + {char.name} + + ))} diff --git a/src/routes.tsx b/src/routes.tsx new file mode 100644 index 0000000..3344c5c --- /dev/null +++ b/src/routes.tsx @@ -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 = () => ( + + } /> + } /> + {URLs.ui.search && } />} + + Page not found} /> + +)