59 lines
2.3 KiB
TypeScript
59 lines
2.3 KiB
TypeScript
import React, { FunctionComponent } from "react";
|
||
import style from "./style.module.css";
|
||
import { useHistory } from 'react-router';
|
||
import { base58UUID } from '../../util/uuid';
|
||
import { useStoredProjectList } from "../../hooks/use-stored-project-list";
|
||
|
||
const Home: FunctionComponent = () => {
|
||
const [ projects, refreshProjects ] = useStoredProjectList();
|
||
const history = useHistory();
|
||
|
||
const openNewProject = () => {
|
||
const uuid = base58UUID();
|
||
history.push(`/p/${uuid}`);
|
||
};
|
||
|
||
return (
|
||
<div className={`container ${style.home}`}>
|
||
<div className="columns">
|
||
<div className="column">
|
||
<div className="buttons is-right">
|
||
<button className="button is-primary"
|
||
onClick={openNewProject}>
|
||
<strong>+</strong> Nouveau projet
|
||
</button>
|
||
</div>
|
||
<div className="panel">
|
||
<p className="panel-heading">
|
||
Mes projets
|
||
</p>
|
||
{/* <div className="panel-block">
|
||
<p className="control has-icons-left">
|
||
<input className="input" type="text" placeholder="Search" />
|
||
<span className="icon is-left">🔍</span>
|
||
</p>
|
||
</div> */}
|
||
{
|
||
projects.map(p => (
|
||
<a key={`project-${p.id}`} className="panel-block" href={`/p/${p.id}`}>
|
||
<span className="panel-icon">🗒️</span>
|
||
{ p.label ? p.label : "Projet sans nom" }
|
||
</a>
|
||
))
|
||
}
|
||
{
|
||
projects.length === 0 ?
|
||
<p className="panel-block">
|
||
<div className={style.noProjects}>Aucun project pour l'instant.</div>
|
||
</p> :
|
||
null
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Home;
|