personal-site/components/blogposts/001/index.jsx

/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */
import React from "react";

/** ********************************************** */
/** ********************************************** */
/** ********************************************** */

/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */

/**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 */
export default function Homepage(props) {
    // ## Get Contexts

    /** ********************************************** */
    /** ********************************************** */
    /** ********************************************** */

    // ## Javascript Variables
    /** ********************* Head Items */
    let head = (
        <React.Fragment>
            <title>Showmerebates | Home</title>
            <meta name="description" content="Find great property rebates" />
        </React.Fragment>
    );
    /** ********************************************** */
    /** ********************************************** */
    /** ********************************************** */


    /** ********************************************** */
    /** ********************************************** */
    /** ********************************************** */

    // ## React Hooks { useState, useEffect, useRef, etc ... }

    /** ********************************************** */
    /** ********************************************** */
    /** ********************************************** */

    // ## Function Return
    return (
        <React.Fragment>
            <GeneralLayout head={ head } user={ props.user }>
                <main>
                    <Hero />
                    <HowItWorks />
                    <FeaturedProperties data={ props.data } user={ props.user } />
                    <AboutUsSection />
                    { !props.user && <LoginPromptPopup user={ props.user } /> }
                </main>
            </GeneralLayout>
        </React.Fragment>
    );
    /** ********************************************** */
    /** ********************************************** */
    /** ********************************************** */
};

/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */
/** ****************************************************************************** */

/**
 * ==============================================================================
 * Server Side Props or Static Props
 * ==============================================================================
 * @param {Object} req - http incoming request object
 * @param {Object} res - http response object
 * @param {Object} query - queries attached to the url
 */
export async function getServerSideProps({ req, res, query }) {
    // ## Environment processes


    /** ********************************************** */
    /** ********************************************** */
    /** ********************************************** */

    // ## User Authentication
    const user = await userAuth(req, res);

    /** ********************************************** */
    /** ********************************************** */
    /** ********************************************** */

    // ## Page/Site Data Data Fetching
    let properties = await dbHandler(`
    SELECT 
        ListingKeyNumeric,City,RoomsTotal,BathroomsFull,BathroomsTotalInteger,BedroomsTotal,UnparsedAddress,BuildingAreaTotal,ListPrice,PostalCode
    FROM 
        utahapidata 
    WHERE 
        PhotosCount > 0 AND ListPrice > 0 AND BedroomsTotal > 0 LIMIT 3
    `);

    /** ********************************************** */
    /** ********************************************** */
    /** ********************************************** */

    // ## Server Props Return
    return {
        props: {
            user: user,
            data: properties,
        },
    };

    /** ********************************************** */
    /** ********************************************** */
    /** ********************************************** */
}