Skip to content

Star Analyzer feature #58

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

Open
shawntobin wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Star Analyzer feature #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
05d8af1
Star Analyzer feature
shawntobin Jul 20, 2023
5b3e126
minor UI change
shawntobin Jul 20, 2023
761e8e9
styling changes
shawntobin Sep 21, 2023
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
1 change: 1 addition & 0 deletions declarations.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
declare module "urbit-ob";
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@
"prompt": "^1.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hook-form": "^7.45.1",
"react-paginate": "^8.2.0",
"react-router-dom": "^5.0.0",
"react-scripts": "4.0.3",
"replace-in-file": "^4.1.1",
Expand Down
4 changes: 3 additions & 1 deletion src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { getPreferredWallet } from './utils/local-storage';
import { minGas } from './utils/gas-prices';
import { getEthBalance } from './utils/eth';
import Container from './components/Container';

import StarAnalyzer from "./components/Analyzer/StarAnalyzer";
// import { toPairsIn } from 'lodash';
// import { ToggleSwitch } from '@tlon/indigo-react';

Expand Down Expand Up @@ -215,6 +215,8 @@ const App = () => {
<Route path="/tos">
<Tos />
</Route>
<Route exact path="/star-analyzer" component={StarAnalyzer} />
<Route path="/star-analyzer/:star" component={StarAnalyzer} />
<Route exact path="/">
<Home />
</Route>
Expand Down
110 changes: 110 additions & 0 deletions src/components/Analyzer/FilterBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import { Icon, Box, Button } from "@tlon/indigo-react";
import { filters } from "../../utils/analyzer-utils"

interface FilterBarProps {
selectedFilter: string;
star: string;
applyFilter: (filter: string) => void;
reset: () => void;
}

const FilterBar = (props: FilterBarProps) => {
const { star, selectedFilter } = props;

const renderFilters = () => {
return filters.map((filter) => {
return (
<Box key={filter}>
<Button
style={{
padding: 7,
marginRight: 5,
marginTop: 10,
backgroundColor:
selectedFilter === filter ? "#007bff" : "white",
color: selectedFilter === filter ? "white" : "black",
}}
onClick={() => props.applyFilter(filter)}
>
{filter}
{selectedFilter === filter && (
<Icon
color="white"
size={18}
icon="X"
style={{ marginLeft: 7 }}
/>
)}
</Button>
</Box>
);
});
};

const renderContent = () => {
return (
<Box
style={{
backgroundColor: "#f3f2f0",
minHeight: 75,
padding: 20,
fontWeight: 600,
}}
>

{star && renderBackButton()}


{selectedFilter.length === 0 && (
<div style={{ marginTop: 25, fontSize: 14 }}>Use the filter buttons to check for interesting planets:</div>
)}
<div
style={{
flexWrap: "wrap",
display: "flex",
fontSize: 15,
alignItems: "center",
marginTop: 10
}}
>
{renderFilters()}
</div>
</Box>
)
}


const renderBackButton = () => {
return (

<Button
onClick={props.reset}
style={{ padding: 15, backgroundColor: "black", color: "white" }}
>
<Icon color="white" size={16} icon="ArrowWest" />

<div
style={{
marginLeft: 10,
marginRight: 10,
fontFamily: "Source Code Pro",
fontSize: 20,
fontWeight: 400,
flex: 1,
}}
>
{star}
</div>
</Button>
)
}


return (
<>
{renderContent()}
</>
);
};

export default FilterBar;
126 changes: 126 additions & 0 deletions src/components/Analyzer/PlanetTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
import { Icon } from "@tlon/indigo-react";
import "./StarAnalyzer.scss";
import { sigil, reactRenderer } from "@tlon/sigil-js";
import ReactPaginate from "react-paginate";
import * as utils from "../../utils/analyzer-utils";


interface Planet {
point: number;
patp: string;
tags?: string[];
}

interface PlanetTableProps {
items: Planet[];
currentPage: number;
itemOffset: number;
setItemOffset: (offset: number) => void;
setCurrentPage: (page: number) => void;
}

const PlanetTable: React.FC<PlanetTableProps> = (props) => {
const { items, currentPage, itemOffset } = props;

const Items: React.FC<{ currentItems: Planet[] }> = ({ currentItems }) => {
return (
<>
{currentItems.map((planet, index) => (
<tr key={index} >
<td>
<div style={{ borderRadius: 2, overflow: "hidden", width: 30, height: 30 }} >
{sigil({
patp: planet.patp,
renderer: reactRenderer,
size: 30,
colors: ["black", "#FFFFFF"],
})}
</div>
</td>
<td>{planet.patp}</td>
<td className={"remove-mobile"}>{planet.point}</td>
<td style={{ overflowX: "auto", maxWidth: 130 }} >{renderTags(planet.tags || [])}</td>
</tr>
))}
</>
);
};

const itemsPerPage = 100;

const endOffset = itemOffset + itemsPerPage;
const currentItems = items.slice(itemOffset, endOffset);
const pageCount = Math.ceil(items.length / itemsPerPage);

const handlePageClick = (event: { selected: number }) => {
const newOffset = (event.selected * itemsPerPage) % items.length;

props.setItemOffset(newOffset);
props.setCurrentPage(event.selected);
};

const renderTags = (tags: string[]) => {
return tags.map((tag, index) => {
return (
<span
key={index}
className="tag-badge"
style={{
backgroundColor: utils.getTagColor(tag),
}}
>
{tag}
</span>
);
});
};

return (
<>
<table className="planet-table-container">
<thead>
<tr id="unique-id" style={{ borderBottom: "2px solid #000" }}>
<th style={{ padding: "30px 0" }}>Sigil</th>
<th style={{ padding: "30px 0" }}>Name</th>
<th className={"remove-mobile"} style={{ padding: "30px 0" }}>
ID
</th>
<th style={{ padding: "30px 0" }}> Tags</th>
</tr>
</thead>
<tbody style={{ whiteSpace: "nowrap" }}>
<Items currentItems={currentItems} />
</tbody>
</table>

<div
className="pagination-container"
style={{ cursor: "pointer", marginTop: 50 }}
>
<ReactPaginate
forcePage={currentPage}
nextLabel={<Icon color="#0056b3" size={16} icon="ChevronEast" />}
onPageChange={handlePageClick}
pageRangeDisplayed={3}
marginPagesDisplayed={0}
pageCount={pageCount}
previousLabel={<Icon color="#0056b3" size={16} icon="ChevronWest" />}
pageClassName="page-item"
pageLinkClassName="page-link"
previousClassName="page-item"
previousLinkClassName="page-link"
nextClassName="page-item"
nextLinkClassName="page-link"
breakLabel="..."
breakClassName="page-item"
breakLinkClassName="page-link"
containerClassName="pagination"
activeClassName="active"
renderOnZeroPageCount={null}
/>
</div>
</>
);
};

export default PlanetTable;
59 changes: 59 additions & 0 deletions src/components/Analyzer/SearchBarFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { useForm } from "react-hook-form";

type FormValues = {
searchFilter: string;
};

type SearchBarFilterProps = {
placeholder: string;
handleSubmit: (filterValue: string) => void;
};

const SearchBarFilter = (props: SearchBarFilterProps) => {
const { placeholder, handleSubmit } = props;
const {
register,
reset,
handleSubmit: formSubmit
} = useForm<FormValues>();

const onSubmit = (data: FormValues) => {
handleSubmit(data.searchFilter);
reset({
searchFilter: "",
});
};

return (
<>
<form
onSubmit={formSubmit(onSubmit)}
style={{
backgroundColor: "transparent",
minHeight: 0,
}}
>
<div
style={{
display: "flex",
alignItems: "center",
marginRight: 20,
}}
>
<input
className="search-bar"
autoComplete="off"
autoCorrect="off"
type="text"
placeholder={placeholder}
{...register("searchFilter", {
maxLength: 14,
})}
/>
</div>
</form>
</>
);
};

export default SearchBarFilter;
Loading