Skip to content

Commit

Permalink
feat(component): add Loader component in ProjectIcon Page and StackIc…
Browse files Browse the repository at this point in the history 
…on Page
  • Loading branch information
@DIGOARTHUR
DIGOARTHUR committed Aug 26, 2023
1 parent 8631768 commit 4aeff39
Show file tree
Hide file tree
Showing 6 changed files with 223 additions and 41 deletions.
2 changes: 1 addition & 1 deletion github-automated-repos-page/new/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@
</head>
<body>
<div id="root"></div>
<script type="module" src="/main.jsx"></script>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
1 change: 1 addition & 0 deletions github-automated-repos-page/new/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.10.1",
"react-loader-spinner": "^5.3.4",
"react-router-dom": "^6.15.0",
"react-toastify": "^9.1.3",
"vite-plugin-svgr": "^3.2.0"
Expand Down
16 changes: 16 additions & 0 deletions github-automated-repos-page/new/src/components/Loader/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { ThreeDots } from 'react-loader-spinner'

export default function Loader() {
return (
<ThreeDots
height="80"
width="80"
radius="9"
color="#99A1B3"
ariaLabel="three-dots-loading"
wrapperStyle={{}}
wrapperClassName=""
visible={true}
/>
)
}
27 changes: 14 additions & 13 deletions github-automated-repos-page/new/src/pages/ProjectIcons.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Header from "../components/Header";
import Sidebar from "../components/Sidebar";
import { IconsData } from 'github-automated-repos/index';
import { Card } from "../components/Card";
import Loader from '../components/Loader';

export default function IconsProject() {

Expand All @@ -15,7 +16,7 @@ export default function IconsProject() {
window.scrollTo(0, 0);
const id = setTimeout(() => {
setFinishedTimeout(true);
}, 1000);
}, 350);

return () => clearTimeout(id);

Expand All @@ -26,39 +27,39 @@ export default function IconsProject() {

const [finishedTimeout, setFinishedTimeout] = useState(false);

const [stackIconKeys, setStackIconKeys] = useState([]);
const [stackIconValues, setStackIconValues] = useState([]);
const [projectsIconKeys, setProjectsIconKeys] = useState([]);
const [projectsIconValues, setProjectsIconValues] = useState([]);

const [inicialStackIconKeys, setInicialStackIconKeys] = useState([]);
const [inicialStackIconValues, setInicialStackIconValues] = useState([]);
useEffect(() => {


setStackIconKeys(Object.keys(iconsProjects));
setStackIconValues(Object.values(iconsProjects));
setProjectsIconKeys(Object.keys(iconsProjects));
setProjectsIconValues(Object.values(iconsProjects));

setInicialStackIconKeys(Object.keys(iconsProjects));
setInicialStackIconValues(Object.values(iconsProjects));
}, []);

function _handleSearch(e) {
if (!e.target.value) {
setStackIconKeys(inicialStackIconKeys);
setStackIconValues(inicialStackIconValues);
setProjectsIconKeys(inicialStackIconKeys);
setProjectsIconValues(inicialStackIconValues);
return;
}

const filterStackIconKeys = inicialStackIconKeys.filter((values) => {
return values.includes(e.target.value.toLowerCase());
});
setStackIconKeys(filterStackIconKeys);
setProjectsIconKeys(filterStackIconKeys);
console.log(filterStackIconKeys);

const filterStackIconValues = filterStackIconKeys.map((iconKey) => {
return iconsProjects[iconKey];
});

setStackIconValues(filterStackIconValues);
setProjectsIconValues(filterStackIconValues);
}
return (
<div>
Expand All @@ -77,11 +78,11 @@ export default function IconsProject() {
</div>
<ul className='mt-8 flex flex-wrap gap-4 justify-center'>
{
finishedTimeout == false ? (<div>carregando</div>) : (
stackIconValues.length > 0 ? (
finishedTimeout == false ? (<Loader/>) : (
projectsIconValues.length > 0 ? (

stackIconValues.map((item, index) => {
return <Card key={index} item={item} iconKey={stackIconKeys[index]} />;
projectsIconValues.map((item, index) => {
return <Card key={index} item={item} iconKey={projectsIconKeys[index]} />;
})


Expand Down
62 changes: 39 additions & 23 deletions github-automated-repos-page/new/src/pages/StackIcons.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,33 @@ import { FiExternalLink } from 'react-icons/fi';
import Footer from "../components/Footer";
import Header from "../components/Header";
import Sidebar from "../components/Sidebar";
import {Card} from "../components/Card";
import { Card } from "../components/Card";
import { IconsData } from 'github-automated-repos/index';
import Loader from '../components/Loader';


export default function IconStacks(){
export default function IconStacks() {

useEffect(() => {
window.scrollTo(0, 0);


}, []);
const id = setTimeout(() => {
setFinishedTimeout(true);
}, 350);

return () => clearTimeout(id);

}, []);
const { iconStacks } = IconsData();


const [finishedTimeout, setFinishedTimeout] = useState(false);

const [stackIconKeys, setStackIconKeys] = useState([]);
const [stackIconValues, setStackIconValues] = useState([]);

const [inicialStackIconKeys, setInicialStackIconKeys] = useState([]);
const [inicialStackIconValues, setInicialStackIconValues] = useState([]);
useEffect(() => {


setStackIconKeys(Object.keys(iconStacks));
setStackIconValues(Object.values(iconStacks));
Expand All @@ -47,7 +54,7 @@ export default function IconStacks(){
setStackIconKeys(filterStackIconKeys);
console.log(filterStackIconKeys);

const filterStackIconValues = filterStackIconKeys.map((iconKey ) => {
const filterStackIconValues = filterStackIconKeys.map((iconKey) => {
return iconStacks[iconKey];
});

Expand All @@ -69,21 +76,30 @@ export default function IconStacks(){
<input className=' bg-[#70708e33] w-full rounded-lg px-4 py-2 ' placeholder='🔍 Search Icons' type='text' onChange={_handleSearch} />
</div>
<ul className='mt-8 flex flex-wrap gap-4 justify-center'>
{stackIconValues.length > 0 ? (
stackIconValues.map((item, index) => {
return <Card key={index} item={item} iconKey={stackIconKeys[index]} />;
})
) : (
<div className='flex flex-col m-auto gap-4'>
<p className='text-xl text-center'>
Didn't find your icon? <br /> Tell us about here:{' '}
<a className='flex gap-2 text-[#00979C] justify-center' href='https://github.com/DIGOARTHUR/github-automated-repos/issues/new?assignees=&labels=&template=2-feature-request.yaml'>
Feature Request <FiExternalLink />
</a>
</p>
<img className='h-[350px]' src='https://user-images.githubusercontent.com/59892368/220364871-f553109d-855f-426a-bbe5-5e1c11278003.svg'></img>
</div>
)}


{

finishedTimeout == false ? (<Loader />) : (
stackIconValues.length > 0 ? (
stackIconValues.map((item, index) => {
return <Card key={index} item={item} iconKey={stackIconKeys[index]} />;
})
) : (
<div className='flex flex-col m-auto gap-4'>
<p className='text-xl text-center'>
Didn't find your icon? <br /> Tell us about here:{' '}
<a className='flex gap-2 text-[#00979C] justify-center' href='https://github.com/DIGOARTHUR/github-automated-repos/issues/new?assignees=&labels=&template=2-feature-request.yaml'>
Feature Request <FiExternalLink />
</a>
</p>
<img className='h-[350px]' src='https://user-images.githubusercontent.com/59892368/220364871-f553109d-855f-426a-bbe5-5e1c11278003.svg'></img>
</div>
)

)
}



</ul>
Expand Down
Loading

0 comments on commit 4aeff39

Please sign in to comment.