• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• Github-Profile-README-master
  • .github
    • workflows
      • firebaseDeploy.yml
  • src
    • containers
      • MainContainer.js
      • WallContainer.js
    • dataSet
      • githubCards
        • shubhamdsm.md
        • mohammadanang.md
        • someshwarMirge.md
        • fatik07.md
        • akapattnaik.md
        • srinibasbiswal.md
        • swarajlaha.md
        • KonradLinkowski.md
        • aryan-chawla.md
        • gabirlima.md
        • kumaranshu72.md
        • vansh1067.md
        • prathimacode-hub.md
        • vivek32ta.md
        • ankitabasera.md
        • dedesaepulloh.md
        • shin-iji.md
        • pradhyumvyas.md
        • caroline-rodrigues.md
        • Aayushi-Mittal.md
        • komalswami.md
        • tanut2539.md
        • ankitaugale23.md
        • Vrindagupta6828.md
        • DriftingShadows.md
        • aniruddhparwal.md
        • pritam047.md
        • mohprilaksono.md
        • lucasguiss.md
        • Nithin005.md
        • meghasharma123.md
        • Kanadets.md
        • tmw9.md
        • MThakkar121.md
        • Erikadarisman.md
        • iagormoraes.md
        • itzmeowww.md
        • fakhrulzulfi.md
        • vj-abishek.md
        • leonardomath.md
        • kdimas12.md
        • mandy6720.md
        • vyasriday.md
        • abhijitparida.md
        • Harshita248.md
        • ayushmaloo.md
        • aniketsingh98571.md
        • python1neo.md
        • sabicd.md
        • gsiradze.md
        • aecuto.md
        • Abhijith126.md
        • manishakanyal.md
        • vishalpattnaik.md
        • sonilaia.md
        • gitapin82y.md
        • immayurpanchal.md
      • users.js
    • components
      • ProfileCardComponent.js
      • HeaderComponent.js
    • App.js
    • App.test.js
    • App.css
    • serviceWorker.js
    • index.css
    • setupTests.js
    • stylesheets
      • style.module.css
    • index.js
  • public
    • robots.txt
    • manifest.json
    • index.html
    • site.webmanifest
  • LICENSE
  • firebase.json
  • .firebaserc
  • README.md
  • package.json
  • .gitignore

import React, { useEffect, useState } from 'react';
import styles from '../stylesheets/style.module.css';
import {users} from '../dataSet/users';
import ProfileCardComponent from '../components/ProfileCardComponent';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch } from '@fortawesome/free-solid-svg-icons';

function WallContainer(){

    const [usersProfile, setusersProfile] = useState({
        profiles : []
    });

    const [globalProfiles, setglobalProfiles] = useState({
        profiles : []
    });

    const [userGithubCards, setuserGithubCards] = useState({});

    const [searchValue, setsearchValue] = useState('');

    const importAll = (r) => r.keys().map(r);
    const markdownFiles = importAll(require.context('../dataSet/githubCards', false, /\.md$/)).sort().reverse();

    useEffect(() => {
        var profileCards = [];
        users.forEach(user => {
            profileCards.push(user);
        });
        setusersProfile({profiles : profileCards})
        setglobalProfiles({profiles : profileCards})           
        renderPosts();
        // eslint-disable-next-line    
      }, []);

    const renderPosts = async() => {
        var fileNameExecutionSeq = [];
        Promise.all(
            markdownFiles.map((file) => fetch(file)
                .then(
                    (res) => {
                        var fileName = file;
                        fileName = fileName.substr(14).slice(0, -12);
                        fileNameExecutionSeq.push(fileName);                        
                        return res.text();
                    }
                )))
                .then((mdData) => {
                    fileNameExecutionSeq.forEach( (fName,index) => {
                        var cards = userGithubCards;
                        cards[fName] = mdData[index]
                        setuserGithubCards({cards});
                    });
            })
             .catch((err) => console.error(err)); 
    }

    const handleSubmit = (event) => {
        handleSearch(searchValue);
        event.preventDefault();        
    }

    const search = (event) => {
        const target = event.target;
        setsearchValue(target.value); 
        handleSearch(target.value);       
    }

    const handleSearch = (searchValue) =>{
        var profileCards = globalProfiles.profiles;
        var matchedProfiles = [];
        profileCards.forEach(profile => {
            if (profile.githubUserName.toUpperCase().indexOf(searchValue.toUpperCase()) !== -1 ){
                matchedProfiles.push(profile);
            }
        });
        setusersProfile({profiles : matchedProfiles});
        renderPosts();        
    }

    return(
        <React.Fragment>
            <div className={`${styles.SearchComponent}`}>
                <form onSubmit={handleSubmit}>
                    <div className={styles.search}>
                        <input type="text" value={searchValue} onChange={search} className={styles.search__input} placeholder="Search GitHub User Name"/>
                        <div className={styles.search__icon}>
                        <FontAwesomeIcon name="search" icon={faSearch}></FontAwesomeIcon>
                        </div>
                    </div>                                       
                </form>
                
            </div>
            
            {
            (typeof userGithubCards.cards !== 'undefined')
                ? <div className={styles.ProfileCardContainer}>
                    {
                        usersProfile.profiles.map((profile, index) => {                 
                            return(
                                <ProfileCardComponent
                                    profileDetails = {profile}
                                    markDown={userGithubCards.cards[profile.githubUserName]}
                                    index={index}
                                    key={index}
                                />
                            )
                        })
                    }
                </div>
                : <div></div>       
            }
        </React.Fragment>
    )
}

export default WallContainer;