src/components/AboutComponent.js
// might need to combine these compoents or switch how theyre rendered in one another and exported
might need to combine these compoents or switch how theyre rendered in one another and exported
might need to combine these compoents or switch how theyre rendered in one another and exported
function About() {
    let storageRef = storage.ref()
    const [pictureURLs, setPictureURLs] = useState([])
    useEffect(() => {
        if (pictureURLs.length === 0) {
            const fetchImages = async () => {
                let result = await storageRef.child('aboutpage').listAll();
                let urlPromises = result.items.map(imageRef => imageRef.getDownloadURL())
                return Promise.all(urlPromises)
            }
            const loadImages = async () => {
                const urls = await fetchImages()
                setPictureURLs(urls)
            }
            loadImages()
        }
    }, [])
    console.log(pictureURLs)
    const Images = () => {
        return pictureURLs.map((pic) => {
            return (
                <img className="col-lg-4 abt-img img-fluid" src={pic} alt="About picture" style={{ height: '28.7rem', width: '25%' }} />
            );
        })
    }
    return (
        <React.Fragment>
            <Container>
                <h1>About Us</h1>
                <hr />
                <div className="row">
                    <div className="col">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </div>
                </div>
                {}
                <Row className="flex list-group-sm list-group-flush-md mb-3" xs={1} md={2} lg={3} style={{ overflow: "hidden" }}>
                    {pictureURLs ? <Images /> : null}
                    {}
                </Row>
            </Container>
            <AboutForm />
        </React.Fragment>
    );
}
function About ( ) { let storageRef = storage . ref ( ) const [ pictureURLs , setPictureURLs ] = useState ( [ ] ) useEffect ( ( ) => { if ( pictureURLs . length === 0 ) { const fetchImages = async ( ) => { let result = await storageRef . child ( 'aboutpage' ) . listAll ( ) ; let urlPromises = result . items . map ( imageRef => imageRef . getDownloadURL ( ) ) return Promise . all ( urlPromises ) } const loadImages = async ( ) => { const urls = await fetchImages ( ) setPictureURLs ( urls ) } loadImages ( ) } } , [ ] ) console . log ( pictureURLs ) const Images = ( ) => { return pictureURLs . map ( ( pic ) => { return ( < img className = "col-lg-4 abt-img img-fluid" src = { pic } alt = "About picture" style = { { height : '28.7rem' , width : '25%' } } / > ) ; } ) } return ( < React . Fragment > < Container > < h1 > About Us < / h1 > < hr / > < div className = "row" > < div className = "col" > < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. < / p > < / div > < / div > { } < Row className = "flex list-group-sm list-group-flush-md mb-3" xs = { 1 } md = { 2 } lg = { 3 } style = { { overflow : "hidden" } } > { pictureURLs ? < Images / > : null } { } < / Row > < / Container > < AboutForm / > < / React . Fragment > ) ; }
might need to combine these compoents or switch how theyre rendered in one another and exported
might need to combine these compoents or switch how theyre rendered in one another and exported
// meybe better to make the images an object with one prop=picuteURL, 1 altText, 1 classNames/styling // i think i can make a reference inside firebase to the img i want in storage. i will try // <div className="col-4"> // </div> /* 'flex '  */ /* <div className="col-4">
                        <img className="abt-img img-fluid" src="assets/images/outsideShopWinter.jpg" alt="View of Others cafe during winter."/>
                    </div>
                    <div className="col-4">
                        <img className="abt-img img-fluid elvies-img" src="assets/images/elviesBags.jpg" alt="Elvies Guatemalan bags."/>
                    </div>
                    <div className="col-4">
                    
                        <img className="abt-img img-fluid" src="assets/images/gelatoServing.jpg" alt="Two women serving gelato outside the shop."/>
                    </div> */