From 4632c3cc343947e56488c0e2f187883aa44d6da9 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Thu, 18 Jul 2024 22:34:19 +0200
Subject: [PATCH] combined button files
---
src/App/App.tsx | 2 +-
.../{Villagebuttons.tsx => Buttons.tsx} | 51 ++++++++++++++-
src/components/DownloadButton.tsx | 31 ---------
src/components/Filter.tsx | 64 +++++++++++++++++--
src/components/HorizontalTimeline.tsx | 5 +-
src/components/UrlButton.tsx | 14 ----
src/components/pdfs.tsx | 2 +-
src/components/seclarations.ts | 2 +-
src/contents/human-practices.tsx | 4 +-
src/contents/wiki.tsx | 4 +-
10 files changed, 116 insertions(+), 63 deletions(-)
rename src/components/{Villagebuttons.tsx => Buttons.tsx} (59%)
delete mode 100644 src/components/DownloadButton.tsx
delete mode 100644 src/components/UrlButton.tsx
diff --git a/src/App/App.tsx b/src/App/App.tsx
index d59dbea5..4d3c2829 100644
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -8,7 +8,7 @@ import { Navbar } from "../components/Navbar.tsx";
import { getPathMapping } from "../utils/getPathMapping.ts";
import { stringToSlug } from "../utils/stringToSlug.ts";
import { useEffect} from "react";
-import Villbuttonrow from "../components/Villagebuttons.tsx";
+import { Villbuttonrow } from "../components/Buttons.tsx";
/* import Sidebar from "../components/Sidebar.tsx"; */
import "../utils/highlight.js";
import "../../pubpub/mapscript.js"
diff --git a/src/components/Villagebuttons.tsx b/src/components/Buttons.tsx
similarity index 59%
rename from src/components/Villagebuttons.tsx
rename to src/components/Buttons.tsx
index 1133d06f..bf3fdf60 100644
--- a/src/components/Villagebuttons.tsx
+++ b/src/components/Buttons.tsx
@@ -1,5 +1,11 @@
import { Link } from "react-router-dom";
+interface UrlButtonProps{
+ href: string,
+ children: string,
+ };
+
+
export function Villagebutton({ title, source, page }: { title: string; source: string; page:string}) {
return (
<Link className="btn village-style-button" role="button" to={page}>
@@ -19,9 +25,50 @@ export function Villbuttonrow(){
<Villagebutton page="/engineering" source="https://static.igem.wiki/teams/5247/design/icons/genetic-engineering.png" title="Engineering"></Villagebutton>
<Villagebutton page="/safety" source="https://static.igem.wiki/teams/5247/design/icons/safety.png" title="Safety"></Villagebutton>
<Villagebutton page="/results" source="https://static.igem.wiki/teams/5247/design/icons/results.png" title="Results"></Villagebutton>
-
</div>
)
}
-export default Villbuttonrow; // Don’t forget to use export default!
\ No newline at end of file
+
+export const UrlButton = ({ href, children }:UrlButtonProps) => {
+ return (
+ <a href={href} className="url-button">
+ {children}
+ </a>
+ );
+ }
+
+
+
+
+export const DownloadLink = ({ url, fileName }: {url: string, fileName: string}) => {
+const handleDownload = () => {
+ fetch(url)
+ .then((response) => response.blob())
+ .then((blob) => {
+ const url = window.URL.createObjectURL(new Blob([blob]));
+ const link = document.createElement("a");
+ link.href = url;
+ link.download = fileName || "downloaded-file";
+ document.body.appendChild(link);
+
+ link.click();
+
+ document.body.removeChild(link);
+ window.URL.revokeObjectURL(url);
+ })
+ .catch((error) => {
+ console.error("Error fetching the file:", error);
+ });
+};
+
+return (
+
+ <a type="button" onClick={handleDownload} className="download-butt">
+ Download
+ </a>
+
+);
+};
+
+
\ No newline at end of file
diff --git a/src/components/DownloadButton.tsx b/src/components/DownloadButton.tsx
deleted file mode 100644
index af9e740c..00000000
--- a/src/components/DownloadButton.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-
-export const DownloadLink = ({ url, fileName }: {url: string, fileName: string}) => {
- const handleDownload = () => {
- fetch(url)
- .then((response) => response.blob())
- .then((blob) => {
- const url = window.URL.createObjectURL(new Blob([blob]));
- const link = document.createElement("a");
- link.href = url;
- link.download = fileName || "downloaded-file";
- document.body.appendChild(link);
-
- link.click();
-
- document.body.removeChild(link);
- window.URL.revokeObjectURL(url);
- })
- .catch((error) => {
- console.error("Error fetching the file:", error);
- });
- };
-
- return (
-
- <a type="button" onClick={handleDownload} className="download-butt">
- Download
- </a>
-
- );
-};
-
diff --git a/src/components/Filter.tsx b/src/components/Filter.tsx
index 9373a0d3..505055bb 100644
--- a/src/components/Filter.tsx
+++ b/src/components/Filter.tsx
@@ -8,7 +8,7 @@ interface Props {
value: string,
label: string
}
-const options =[
+const wikioptions =[
{value: "all", label: "Show all"},
{value: "react", label: "React"},
{value: "type", label: "Types"},
@@ -119,15 +119,15 @@ function w3RemoveClass(element: Element, name: string) {
}
-export function Selector(){
+export function WikiSelector(){
return(
<div>
- <Action></Action>
+ <WikiAction></WikiAction>
</div>
)
}
-class Action extends React.Component {
+class WikiAction extends React.Component {
state = {
selectedOption: null,
};
@@ -147,8 +147,8 @@ class Action extends React.Component {
value={selectedOption}
onChange={this.handleChange}
isMulti
- options={options}
- defaultValue={[options[0]]}
+ options={wikioptions}
+ defaultValue={[wikioptions[0]]}
className="basic-multi-select"
classNamePrefix="select"
/>
@@ -158,4 +158,54 @@ class Action extends React.Component {
/* Type '(selectedOption: Props | null) => void' is not assignable to type '(newValue: MultiValue<{ value: string; label: string; } | null>, actionMeta: ActionMeta<{ value: string; label: string; } | null>) => void'.
Types of parameters 'selectedOption' and 'newValue' are incompatible.
- Type 'readonly ({ value: string; label: string; } | null)[]' is missing the following properties from type 'Props': value, label */
\ No newline at end of file
+ Type 'readonly ({ value: string; label: string; } | null)[]' is missing the following properties from type 'Props': value, label */
+ /* const hpoptions =[
+ {value: "all", label: "All"},
+ {value: "Academia", label: "Academia"},
+ {value: "PatientPatient", label: "Patient"},
+ {value: "Medical", label: "Medical Professional"},
+ {value: "property", label: "Properties"},
+ {value: "pipeline", label: "GitLab Pipeline"},
+ {value: "html", label: "HTML"},
+ {value: "css", label: "CSS"},
+
+ ]
+
+ export function HPSelector(){
+ return(
+ <div>
+ <HPAction></HPAction>
+ </div>
+ )
+ }
+
+
+
+ class HPAction extends React.Component {
+ state = {
+ selectedOption: null,
+ };
+ handleChange = (selectedOption: any) => {
+
+ this.setState({ selectedOption }, () =>
+ console.log(`Option selected:`, this.state.selectedOption)
+
+ );
+ filterMultiSelection(selectedOption)
+ };
+ render() {
+ const { selectedOption } = this.state;
+
+ return (
+ <Select
+ value={selectedOption}
+ onChange={this.handleChange}
+ isMulti
+ options={hpoptions}
+ defaultValue={[hpoptions[0]]}
+ className="basic-multi-select"
+ classNamePrefix="select"
+ />
+ );
+ }
+ } */
\ No newline at end of file
diff --git a/src/components/HorizontalTimeline.tsx b/src/components/HorizontalTimeline.tsx
index 4dd4dd7a..7d626349 100644
--- a/src/components/HorizontalTimeline.tsx
+++ b/src/components/HorizontalTimeline.tsx
@@ -1,7 +1,7 @@
-
+
function TimeItem({tag, title, children, pic, author, tabid}: ItemProps){
- let cl = "t-tag " + tag;
+ let cl = "t-tag " + tag;
return(
<li className="timelineolli">
<div className="timeline-item moretop">
@@ -45,7 +45,6 @@ function TimeItem({tag, title, children, pic, author, tabid}: ItemProps){
return(
<div>
-
<section className="timeline row align-items-center">
<ol className="timelineol">
<AllItems></AllItems>
diff --git a/src/components/UrlButton.tsx b/src/components/UrlButton.tsx
deleted file mode 100644
index 4819efe1..00000000
--- a/src/components/UrlButton.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-
- const UrlButton = ({ href, children }:UrlButtonProps) => {
-
- return (
- <a href={href} className="url-button">
- {children}
- </a>
- );
-}
-export default UrlButton;
-interface UrlButtonProps{
- href: string,
- children: string,
-};
diff --git a/src/components/pdfs.tsx b/src/components/pdfs.tsx
index b0c8dd29..560c2aaa 100644
--- a/src/components/pdfs.tsx
+++ b/src/components/pdfs.tsx
@@ -1,4 +1,4 @@
-import { DownloadLink } from './DownloadButton';
+import { DownloadLink } from "./Buttons"
export function PDF({link, name}: {link: string, name:string}){
diff --git a/src/components/seclarations.ts b/src/components/seclarations.ts
index 2da863ce..67a7c787 100644
--- a/src/components/seclarations.ts
+++ b/src/components/seclarations.ts
@@ -1,5 +1,5 @@
-export * from './Villagebuttons.tsx';
+export * from './Buttons.tsx'
export * from './headings.tsx';
export * from './Sidebar.tsx';
diff --git a/src/contents/human-practices.tsx b/src/contents/human-practices.tsx
index 4d509eea..73874dae 100644
--- a/src/contents/human-practices.tsx
+++ b/src/contents/human-practices.tsx
@@ -17,7 +17,9 @@ export function HumanPractices() {
return (
<>
-
+ <div className="row align-items-center bottom-buttons">
+
+ </div>
<AllPopus></AllPopus>
<TimeHori></TimeHori>
<div>
diff --git a/src/contents/wiki.tsx b/src/contents/wiki.tsx
index 515a95a2..dd25ebdd 100644
--- a/src/contents/wiki.tsx
+++ b/src/contents/wiki.tsx
@@ -166,13 +166,13 @@ function Started(){
-import { Selector } from "../components/Filter";
+import { WikiSelector } from "../components/Filter";
function Troubleshooting(){
return(
<div>
Please select what you want to troubleshoot for.
- <Selector></Selector>
+ <WikiSelector></WikiSelector>
<div id="nono" className="noshow">
This combination returns no instances.
</div>
--
GitLab