Skip to content

Commit bdc2388

Browse files
folland87folland87
committed
Merge remote-tracking branch 'origin/staging'
2 parents 1e81a97 + 82d4b7f commit bdc2388

File tree

1 file changed

+144
-124
lines changed

1 file changed

+144
-124
lines changed

‎client/src/layout/components/header/index.tsx‎

Lines changed: 144 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,159 @@
11
// TODO: SearchBar is volontarly commented out, as it is not yet implemented but should be back in the future
2-
import { useLocation } from 'react-router-dom';
2+
33
import {
4-
Header as HeaderWrapper,
5-
Logo,
6-
Service,
7-
NavItem,
8-
Link,
9-
Nav,
10-
FastAccess,
11-
Button,
12-
useDSFRConfig,
13-
// Autocomplete,
14-
// AutocompleteItem,
15-
// useAutocompleteList,
16-
// useDSFRConfig,
17-
} from '@dataesr/dsfr-plus';
4+
Button,
5+
FastAccess,
6+
Header as HeaderWrapper,
7+
Link,
8+
Logo,
9+
Nav,
10+
NavItem,
11+
Service,
12+
useDSFRConfig,
13+
// Autocomplete,
14+
// AutocompleteItem,
15+
// useAutocompleteList,
16+
// useDSFRConfig,
17+
} from "@dataesr/dsfr-plus";
18+
import { createIntl } from "react-intl";
19+
import { useLocation } from "react-router-dom";
20+
import SwitchLanguage from "../../../components/switch-language";
21+
import { isInProduction } from "../../../utils/helpers";
1822

19-
import { createIntl } from 'react-intl';
20-
import SwitchLanguage from '../../../components/switch-language';
21-
import { isInProduction } from "../../../utils/helpers"
2223
// import { autocompleteOrganizations } from '../api/organizations/autocomplete';
2324
// import { LightOrganization } from '../types/organization';
2425
// import getLangFieldValue from '../utils/lang';
2526

26-
const modules = import.meta.glob("./locales/*.json", { eager: true, import: "default" })
27+
const modules = import.meta.glob("./locales/*.json", {
28+
eager: true,
29+
import: "default",
30+
});
2731
const messages = Object.keys(modules).reduce((acc, key) => {
28-
const locale = key.match(/\.\/locales\/(.+)\.json$/)?.[1]
29-
if (locale) {
30-
return { ...acc, [locale]: modules[key] }
31-
}
32-
return acc
33-
}, {})
32+
const locale = key.match(/\.\/locales\/(.+)\.json$/)?.[1];
33+
if (locale) {
34+
return { ...acc, [locale]: modules[key] };
35+
}
36+
return acc;
37+
}, {});
3438

3539
const languages = [
36-
{ shortName: "FR", fullName: "Français", key: "fr" },
37-
{ shortName: "EN", fullName: "English", key: "en" },
38-
// TODO: Uncomment when translations are available
39-
// { shortName: 'DE', fullName: 'Deutsch', key: 'de' },
40-
// { shortName: 'ES', fullName: 'Español', key: 'es' },
41-
]
40+
{ shortName: "FR", fullName: "Français", key: "fr" },
41+
{ shortName: "EN", fullName: "English", key: "en" },
42+
// TODO: Uncomment when translations are available
43+
// { shortName: 'DE', fullName: 'Deutsch', key: 'de' },
44+
// { shortName: 'ES', fullName: 'Español', key: 'es' },
45+
];
4246

4347
export default function Header() {
44-
const { locale } = useDSFRConfig()
45-
const intl = createIntl({ locale, messages: messages[locale] })
46-
const { pathname } = useLocation()
48+
const { locale } = useDSFRConfig();
49+
const intl = createIntl({ locale, messages: messages[locale] });
50+
const { pathname } = useLocation();
4751

48-
// const authorsAutocompletedList = useAutocompleteList<LightOrganization>({
49-
// async load({ filterText }) {
50-
// if (!filterText) {
51-
// return { items: [] };
52-
// }
53-
// const res = await autocompleteOrganizations({ query: filterText })
54-
// return { items: res.data?.map((org) => org._source) };
55-
// }
56-
// });
52+
// const authorsAutocompletedList = useAutocompleteList<LightOrganization>({
53+
// async load({ filterText }) {
54+
// if (!filterText) {
55+
// return { items: [] };
56+
// }
57+
// const res = await autocompleteOrganizations({ query: filterText })
58+
// return { items: res.data?.map((org) => org._source) };
59+
// }
60+
// });
5761

58-
return (
59-
<HeaderWrapper>
60-
<Logo splitCharacter="|" text="Ministère|chargé|de l'enseignement|supérieur|et de la recherche" />
61-
<Service name="scanR" tagline={intl.formatMessage({ id: "layout.header.tagline" })} />
62-
<FastAccess>
63-
<Button className="fr-btn fr-icon-theme-fill" aria-controls="fr-theme-modal" data-fr-opened="false">
64-
{intl.formatMessage({ id: "layout.header.switch-theme" })}
65-
</Button>
66-
<SwitchLanguage languages={languages} />
67-
</FastAccess>
68-
{/* <Autocomplete
69-
label="Rechercher des structures"
70-
items={authorsAutocompletedList.items}
71-
inputValue={authorsAutocompletedList.filterText}
72-
onInputChange={authorsAutocompletedList.setFilterText}
73-
loadingState={authorsAutocompletedList.loadingState}
74-
placeholder="Recherche rapide"
75-
menuTrigger='input'
76-
size="md"
77-
>
78-
{(item) => (
79-
<AutocompleteItem
80-
startContent={<span className="fr-mr-3v fr-icon--md fr-icon-building-line" />}
81-
description={item.address?.find((a) => a.main).city}
82-
key={item.id}
83-
href={`/organizations/${item.id}`}
84-
>
85-
<span className="fr-text--sm">
86-
{getLangFieldValue(locale)(item.label)}
87-
</span>
88-
</AutocompleteItem>
89-
)}
90-
</Autocomplete> */}
91-
<Nav>
92-
<Link current={pathname === "/"} href="/">
93-
{intl.formatMessage({ id: "layout.header.nav.home" })}
94-
</Link>
95-
<NavItem
96-
current={pathname.split("/").includes("search")}
97-
title={intl.formatMessage({ id: "layout.header.nav.search" })}
98-
>
99-
<Link current={pathname.split("/").includes("organizations")} href="/search/organizations">
100-
{intl.formatMessage({ id: "layout.header.nav.search.organizations" })}
101-
</Link>
102-
<Link current={pathname.split("/").includes("authors")} href="/search/authors">
103-
{intl.formatMessage({ id: "layout.header.nav.search.authors" })}
104-
</Link>
105-
<Link current={pathname.split("/").includes("projects")} href="/search/projects">
106-
{intl.formatMessage({ id: "layout.header.nav.search.projects" })}
107-
</Link>
108-
<Link current={pathname.split("/").includes("publications")} href="/search/publications">
109-
{intl.formatMessage({ id: "layout.header.nav.search.publications" })}
110-
</Link>
111-
<Link current={pathname.split("/").includes("patents")} href="/search/patents">
112-
{intl.formatMessage({ id: "layout.header.nav.search.patents" })}
113-
</Link>
114-
</NavItem>
115-
<NavItem
116-
current={pathname.split("/").includes("networks") || pathname.split("/").includes("trends")}
117-
title={intl.formatMessage({ id: "layout.header.nav.analyze" })}
118-
>
119-
<Link current={pathname.split("/").includes("networks")} href="/networks/get-started">
120-
{intl.formatMessage({ id: "layout.header.nav.analyze.networks" })}
121-
</Link>
122-
{!isInProduction() && (
123-
<Link current={pathname.split("/").includes("trends")} href="/trends">
124-
{intl.formatMessage({ id: "layout.header.nav.analyze.trends" })}
125-
</Link>
126-
)}
127-
{!isInProduction() && (
128-
<Link current={pathname.split("/").includes("analytics")} href="/analytics">
129-
{intl.formatMessage({ id: "layout.header.nav.analyze.analytics" })}
130-
</Link>
131-
)}
132-
<Link current={pathname.split("/").includes("studio")} href="/studio">
133-
{intl.formatMessage({ id: "layout.header.nav.analyze.studio" })}
134-
</Link>
135-
</NavItem>
136-
</Nav>
137-
</HeaderWrapper>
138-
)
62+
return (
63+
<HeaderWrapper>
64+
<Logo
65+
splitCharacter="|"
66+
text="Ministère|chargé|de l'enseignement|supérieur|et de la recherche"
67+
/>
68+
<Service
69+
name="scanR"
70+
tagline={intl.formatMessage({ id: "layout.header.tagline" })}
71+
/>
72+
<FastAccess>
73+
<Button
74+
className="fr-btn fr-icon-theme-fill"
75+
aria-controls="fr-theme-modal"
76+
data-fr-opened="false"
77+
>
78+
{intl.formatMessage({ id: "layout.header.switch-theme" })}
79+
</Button>
80+
<SwitchLanguage languages={languages} />
81+
</FastAccess>
82+
<Nav>
83+
<Link current={pathname === "/"} href="/">
84+
{intl.formatMessage({ id: "layout.header.nav.home" })}
85+
</Link>
86+
<NavItem
87+
current={pathname.split("/").includes("search")}
88+
title={intl.formatMessage({ id: "layout.header.nav.search" })}
89+
>
90+
<Link
91+
current={pathname.split("/").includes("organizations")}
92+
href="/search/organizations"
93+
>
94+
{intl.formatMessage({
95+
id: "layout.header.nav.search.organizations",
96+
})}
97+
</Link>
98+
<Link
99+
current={pathname.split("/").includes("authors")}
100+
href="/search/authors"
101+
>
102+
{intl.formatMessage({ id: "layout.header.nav.search.authors" })}
103+
</Link>
104+
<Link
105+
current={pathname.split("/").includes("projects")}
106+
href="/search/projects"
107+
>
108+
{intl.formatMessage({ id: "layout.header.nav.search.projects" })}
109+
</Link>
110+
<Link
111+
current={pathname.split("/").includes("publications")}
112+
href="/search/publications"
113+
>
114+
{intl.formatMessage({
115+
id: "layout.header.nav.search.publications",
116+
})}
117+
</Link>
118+
<Link
119+
current={pathname.split("/").includes("patents")}
120+
href="/search/patents"
121+
>
122+
{intl.formatMessage({ id: "layout.header.nav.search.patents" })}
123+
</Link>
124+
</NavItem>
125+
<NavItem
126+
current={
127+
pathname.split("/").includes("networks") ||
128+
pathname.split("/").includes("trends")
129+
}
130+
title={intl.formatMessage({ id: "layout.header.nav.analyze" })}
131+
>
132+
<Link
133+
current={pathname.split("/").includes("networks")}
134+
href="/networks/get-started"
135+
>
136+
{intl.formatMessage({ id: "layout.header.nav.analyze.networks" })}
137+
</Link>
138+
{!isInProduction() && (
139+
<Link
140+
current={pathname.split("/").includes("trends")}
141+
href="/trends"
142+
>
143+
{intl.formatMessage({ id: "layout.header.nav.analyze.trends" })}
144+
</Link>
145+
)}
146+
<Link
147+
current={pathname.split("/").includes("analytics")}
148+
href="/analytics"
149+
>
150+
{intl.formatMessage({ id: "layout.header.nav.analyze.analytics" })}
151+
</Link>
152+
<Link current={pathname.split("/").includes("studio")} href="/studio">
153+
{intl.formatMessage({ id: "layout.header.nav.analyze.studio" })}
154+
</Link>
155+
</NavItem>
156+
</Nav>
157+
</HeaderWrapper>
158+
);
139159
}

0 commit comments

Comments
 (0)