Skip to content
This repository was archived by the owner on May 30, 2024. It is now read-only.

Commit 4c1236a

Browse files
author
Noah Hanjun Lee
authored
Change metas (title, favicon) for each page (#231)
* Install react helmet * Update to display title dynamically * Add spinner icon
1 parent 28f4c03 commit 4c1236a

File tree

10 files changed

+124
-26
lines changed

10 files changed

+124
-26
lines changed

‎ui/package-lock.json

Lines changed: 69 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ui/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"moment": "^2.29.1",
2121
"react": "^17.0.2",
2222
"react-dom": "^17.0.2",
23+
"react-helmet": "^6.1.0",
2324
"react-redux": "^7.2.4",
2425
"react-router-dom": "^5.2.0",
2526
"react-scripts": "4.0.3",
@@ -51,6 +52,7 @@
5152
]
5253
},
5354
"devDependencies": {
55+
"@types/react-helmet": "^6.1.4",
5456
"@types/react-router-dom": "^5.1.7",
5557
"@typescript-eslint/eslint-plugin": "^4.28.4",
5658
"@typescript-eslint/parser": "^4.28.4",

‎ui/public/index.html

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
65
<meta name="viewport" content="width=device-width, initial-scale=1" />
76
<meta name="theme-color" content="#000000" />
87
<meta
@@ -24,7 +23,6 @@
2423
work correctly both with client-side routing and a non-root public URL.
2524
Learn how to configure a non-root public URL by running `npm run build`.
2625
-->
27-
<title>Gitploy</title>
2826
</head>
2927
<body>
3028
<noscript>You need to enable JavaScript to run this app.</noscript>

‎ui/public/spinner.ico

2.07 KB
Binary file not shown.

‎ui/src/views/Deployment.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useEffect } from "react"
22
import { Breadcrumb, PageHeader, Result } from "antd"
33
import { shallowEqual } from 'react-redux'
44
import { useParams } from "react-router-dom"
5+
import { Helmet } from "react-helmet"
56

67
import { useAppSelector, useAppDispatch } from "../redux/hooks"
78
import {
@@ -127,6 +128,9 @@ export default function DeploymentView(): JSX.Element {
127128

128129
return (
129130
<Main>
131+
<Helmet>
132+
<title>Deployment #{number} - {namespace}/{name}</title>
133+
</Helmet>
130134
<div>
131135
<PageHeader
132136
title={`Deployment #${number}`}

‎ui/src/views/Home.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useEffect } from 'react'
22
import { shallowEqual } from 'react-redux'
33
import { Input, Breadcrumb } from 'antd'
4+
import { Helmet } from "react-helmet"
45

56
import { useAppSelector, useAppDispatch } from '../redux/hooks'
67
import { homeSlice, listRepos, perPage, sync, homeSlice as slice } from '../redux/home'
@@ -74,6 +75,9 @@ export default function Home(): JSX.Element {
7475

7576
return (
7677
<Main>
78+
<Helmet>
79+
<title>Home</title>
80+
</Helmet>
7781
<div >
7882
<Breadcrumb>
7983
<Breadcrumb.Item>

‎ui/src/views/Main.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react"
22
import { shallowEqual } from "react-redux"
33
import { Layout, Menu, Row, Col, Result, Button, Drawer, Avatar, Dropdown, Badge} from "antd"
44
import { SettingFilled } from "@ant-design/icons"
5+
import { Helmet } from "react-helmet"
56

67
import { useAppSelector, useAppDispatch } from "../redux/hooks"
78
import { init, searchDeployments, searchReviews, fetchLicense, mainSlice as slice } from "../redux/main"
@@ -92,6 +93,12 @@ export default function Main(props: any) {
9293

9394
return (
9495
<Layout className="layout">
96+
<Helmet>
97+
<title>Gitploy</title>
98+
{(deployments.length + reviews.length > 0)?
99+
<link rel="icon" href="/spinner.ico" />:
100+
<link rel="icon" href="/favicon.ico" />}
101+
</Helmet>
95102
<Header>
96103
<Row>
97104
<Col span="16">
@@ -135,7 +142,7 @@ export default function Main(props: any) {
135142
</Menu.Item>
136143
<Menu.Divider />
137144
<Menu.Item key="1">
138-
<a href="https://docs.gitploy.io/" target="_blank">Read Doc</a>
145+
<a href="https://docs.gitploy.io/" target="_blank">Read Docs</a>
139146
</Menu.Item>
140147
<Menu.Item key="2">
141148
<a href="/signout">Sign out</a>

‎ui/src/views/Members.tsx

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useEffect } from "react"
22
import { shallowEqual } from "react-redux"
33
import { Input } from "antd"
4+
import { Helmet } from "react-helmet"
45

56
import { useAppSelector, useAppDispatch } from "../redux/hooks"
67
import { membersSlice as slice, fetchUsers, updateUser, deleteUser, perPage } from "../redux/members"
@@ -44,27 +45,32 @@ export default function Member(): JSX.Element {
4445
dispatch(fetchUsers())
4546
}
4647

47-
return <Main>
48-
<div>
49-
<h1>Members</h1>
50-
</div>
51-
<div style={{marginTop: "40px", paddingRight: "20px"}}>
52-
<Search placeholder="Search user ..." onSearch={onSearch} enterButton />
53-
</div>
54-
<div style={{marginTop: "40px"}}>
55-
<MemberList
56-
users={users}
57-
onChangeSwitch={onChangeSwitch}
58-
onClickDelete={onClickDelete}
59-
/>
60-
</div>
61-
<div style={{marginTop: "40px", textAlign: "center"}}>
62-
<Pagination
63-
page={page}
64-
isLast={users.length !== perPage}
65-
onClickPrev={onClickPrev}
66-
onClickNext={onClickNext}
67-
/>
68-
</div>
69-
</Main>
48+
return (
49+
<Main>
50+
<Helmet>
51+
<title>Members</title>
52+
</Helmet>
53+
<div>
54+
<h1>Members</h1>
55+
</div>
56+
<div style={{marginTop: "40px", paddingRight: "20px"}}>
57+
<Search placeholder="Search user ..." onSearch={onSearch} enterButton />
58+
</div>
59+
<div style={{marginTop: "40px"}}>
60+
<MemberList
61+
users={users}
62+
onChangeSwitch={onChangeSwitch}
63+
onClickDelete={onClickDelete}
64+
/>
65+
</div>
66+
<div style={{marginTop: "40px", textAlign: "center"}}>
67+
<Pagination
68+
page={page}
69+
isLast={users.length !== perPage}
70+
onClickPrev={onClickPrev}
71+
onClickNext={onClickNext}
72+
/>
73+
</div>
74+
</Main>
75+
)
7076
}

‎ui/src/views/Repo.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useParams } from "react-router-dom";
22
import { Menu, Breadcrumb, Result, } from 'antd'
33
import { shallowEqual } from "react-redux";
44
import { useEffect } from "react";
5+
import { Helmet } from "react-helmet"
56

67
import { useAppSelector, useAppDispatch } from '../redux/hooks'
78
import { init, activate, repoSlice as slice } from '../redux/repo'
@@ -68,6 +69,9 @@ export default function Repo(): JSX.Element {
6869

6970
return (
7071
<Main>
72+
<Helmet>
73+
<title>{namespace}/{name}</title>
74+
</Helmet>
7175
<div >
7276
<Breadcrumb>
7377
<Breadcrumb.Item>

‎ui/src/views/Settings.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Avatar, Button, Tag } from "antd"
22
import moment from "moment"
33
import { useEffect } from "react"
44
import { shallowEqual } from "react-redux"
5+
import { Helmet } from "react-helmet"
56

67
import { useAppSelector, useAppDispatch } from "../redux/hooks"
78
import { fetchMe, fetchRateLimit,checkSlack } from "../redux/settings"
@@ -23,6 +24,9 @@ export default function Settings(): JSX.Element {
2324

2425
return (
2526
<Main>
27+
<Helmet>
28+
<title>Settings</title>
29+
</Helmet>
2630
<div >
2731
<h1>Settings</h1>
2832
</div>

0 commit comments

Comments
 (0)