egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added sorting functionality

Browse Source
This commit is contained in:
Daniel
2022-06-01 16:03:36 +04:30
parent 6f8b34dc8e
commit 2e2135976f
7 changed files with 103 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/componets/Filters.js
+1 -1
View File
@@ -13,7 +13,7 @@ const Filters = ({nameChecked, handleNameCheckbox, descriptionChecked, handleDes
<fieldset className='filter'>
<legend >Filter by</legend>
<label><input type="checkbox" checked={nameChecked} onChange={handleNameCheckbox} />Name</label>
<label><input type="checkbox" checked={descriptionChecked} onChange={handleDescriptionCheckbox} />Title</label>
<label><input type="checkbox" checked={descriptionChecked} onChange={handleDescriptionCheckbox} />Website title</label>
<label><input type="checkbox" checked={tagsChecked} onChange={handleTagsCheckbox} />Tags</label>
</fieldset>
</>
src/componets/Sort.js
+12 -8
View File
@@ -1,23 +1,27 @@
import '../styles/Sort.css'
const Sort = ({ onExit }) => {
const Sort = ({ sortBy, onExit }) => {
function abort(e) {
if (e.target.className === "sort-overlay") {
onExit();
}
}
function sort(e) {
sortBy(e.target.value);
}
return (
<>
<div className='sort-overlay' onClick={abort}></div>
<fieldset className='sort'>
<fieldset className='sort' onClick={sort}>
<legend>Sort by</legend>
<label><input name="sort" type="radio" />Date (Newest first)</label>
<label><input name="sort" type="radio" />Date (Oldest first)</label>
<label><input name="sort" type="radio" />Name (A-Z)</label>
<label><input name="sort" type="radio" />Name (Z-A)</label>
<label><input name="sort" type="radio" />Title (A-Z)</label>
<label><input name="sort" type="radio" />Title (Z-A)</label>
<button className='sort-by-btn' value='Default'>&#xf271; Date (Newest first)</button>
<button className='sort-by-btn' value='Date (Oldest first)'>&#xf272; Date (Oldest first)</button>
<button className='sort-by-btn' value='Name (A-Z)'>&#xf15d; Name (A-Z)</button>
<button className='sort-by-btn' value='Name (Z-A)'>&#xf15e; Name (Z-A)</button>
<button className='sort-by-btn' value='Title (A-Z)'>&#xf15d; Website title (A-Z)</button>
<button className='sort-by-btn' value='Title (Z-A)'>&#xf15e; Website title (Z-A)</button>
</fieldset>
</>
)