Skip to content

Support navigation back to feature list page by link #577

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blrchen merged 8 commits into from
Aug 23, 2022
Merged

Support navigation back to feature list page by link #577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f087773
Support navigation back to feature list by back link
Aug 11, 2022
985904f
solve conflict
Aug 18, 2022
b80a529
replace params by checking navigation type
Aug 18, 2022
5d311f9
minor change on useEffect
Aug 18, 2022
4fc50f4
Merge branch 'main' into enya/feature-list
Aug 23, 2022
8e27824
improved solution
Aug 23, 2022
cf04437
minor changes
Aug 23, 2022
ac61c11
quick change
Aug 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 22 additions & 5 deletions ui/src/components/featureList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
import { DownOutlined } from "@ant-design/icons";
import {
Button,
Expand All @@ -14,7 +14,12 @@ import {
import { Feature } from "../models/model";
import { fetchProjects, fetchFeatures } from "../api";

const FeatureList = () => {
type Props = {
projectProp: string;
keywordProp: string;
};

const FeatureList = ({ projectProp, keywordProp }: Props) => {
const navigate = useNavigate();
const columns = [
{
Expand Down Expand Up @@ -171,9 +176,10 @@ const FeatureList = () => {
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(false);
const [tableData, setTableData] = useState<Feature[]>();
const [query, setQuery] = useState<string>("");
const [query, setQuery] = useState<string>(keywordProp);
const [projects, setProjects] = useState<any>([]);
const [project, setProject] = useState<string>("");
const [project, setProject] = useState<string>(projectProp);
const [, setURLSearchParams] = useSearchParams();

const fetchData = useCallback(
async (project) => {
Expand All @@ -182,8 +188,12 @@ const FeatureList = () => {
setPage(page);
setTableData(result);
setLoading(false);
setURLSearchParams({
project: project,
keyword: query,
});
},
[page, query]
[page, query, setURLSearchParams]
);

const loadProjects = useCallback(async () => {
Expand All @@ -196,6 +206,12 @@ const FeatureList = () => {
loadProjects();
}, [loadProjects]);

useEffect(() => {
if (projectProp) {
fetchData(projectProp);
}
}, [projectProp, fetchData]);

const onProjectChange = async (value: string) => {
setProject(value);
fetchData(value);
Expand Down Expand Up @@ -233,6 +249,7 @@ const FeatureList = () => {
></Select>
</Form.Item>
<Input
value={query}
placeholder="keyword"
style={{ width: "10%", marginLeft: "5px" }}
onChange={(e) => onKeywordChange(e.target.value)}
Expand Down
3 changes: 3 additions & 0 deletions ui/src/pages/feature/featureDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,9 @@ const FeatureDetails = () => {
} else {
return (
<>
<Button type="link" onClick={() => navigate(-1)}>
feature list {">"}
</Button>
<Card>
<Title level={3}>{data.attributes.name}</Title>
<div>
Expand Down
8 changes: 5 additions & 3 deletions ui/src/pages/feature/features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from "react";
import { Button, Card, Space, Typography } from "antd";
import { useNavigate } from "react-router-dom";
import { useNavigate, useSearchParams } from "react-router-dom";
import FeatureList from "../../components/featureList";

const { Title } = Typography;
Expand All @@ -10,6 +9,9 @@ const Features = () => {
const onCreateFeatureClick = () => {
navigate("/new-feature");
};
const [searchParams] = useSearchParams();
const project = (searchParams.get("project") as string) ?? "";
const keyword = (searchParams.get("keyword") as string) ?? "";

return (
<div className="page">
Expand All @@ -28,7 +30,7 @@ const Features = () => {
+ Create Feature
</Button>
</Space>
<FeatureList />
<FeatureList projectProp={project} keywordProp={keyword} />
</Card>
</div>
);
Expand Down