feat: revamp homepage (#1264)

cypress/integration/common/actions.js

@@ -1,4 +1,4 @@
-import { Given } from 'cypress-cucumber-preprocessor/steps'
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 
 Given('I open {string} page', (uri) => {
   const baseUrl = 'http://localhost:3000'
@@ -7,6 +7,9 @@ Given('I open {string} page', (uri) => {
     case 'home':
       path = '/'
       break
+    case 'search':
+      path = '/search'
+      break
     case 'eddiejaoude':
       path = '/eddiejaoude'
       break

cypress/integration/search.feature

@@ -2,20 +2,25 @@ Feature: Search
 
     Saerch all users
 
-    Scenario: Search on the homepage
+    Scenario: Navigate to the search page
         Given I open "home" page
+        When I click on "search"
+        Then I see ".search-section" item on the page
+
+    Scenario: Search page has a search box
+        Given I open "search" page
         And I see ".search-section" item on the page
 
     Scenario: Search with results
-        Given I open "home" page
+        Given I open "search" page
         Then I see "Eddie Jaoude" text in section "main"
         And I see "Kunal Verma" text in section "main"
         When I type "Eddie Jaoude" in ".search-section input"
         Then I see "Eddie Jaoude" text in section "main"
         And I do not see "Kunal Verma" text in section "main"
 
     Scenario: Search with no results
-        Given I open "home" page
+        Given I open "search" page
         Then I see "Eddie Jaoude" text in section "main"
         When I type "abced" in ".search-section input"
         Then I see "No users found, please try with another name." text in section "main"

ideas.md

@@ -0,0 +1,6 @@
+Homepage
+
+- [ ] show stats on homepage https://www.primefaces.org/primeblocks-react/#/free
+- [ ] pick random users to display
+- [ ] display demo as animated gif
+- [ ] show instructions and animated gif

src/App.js

@@ -8,7 +8,8 @@ import 'primeicons/primeicons.css'
 
 import Footer from './Components/Footer'
 import User from './Components/UserProfile/User'
-import Home from './Components/Home/Home'
+import Home from './Components/Home'
+import Search from './Components/Search/Search'
 
 import user from './config/user.json'
 
@@ -19,6 +20,9 @@ function App() {
         {user.username && <User singleUser={user} />}
         {!user.username && (
           <Switch>
+            <Route path="/search">
+              <Search />
+            </Route>
             <Route path="/:username">
               <User />
             </Route>

src/Components/Home.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+import Navbar from './Navbar'
+import GetIcons from './Icons/GetIcons'
+
+function Home() {
+  return (
+    <>
+      <Navbar
+        start={
+          <Link to="/search" aria-label="Search">
+            <GetIcons iconName="search" size={20} />
+          </Link>
+        }
+      />
+      <h2 className="text-4xl text-center">
+        LinkFree connects audiences to all of your content with just one link
+      </h2>
+      <p className="text-2xl text-center">
+        It is an open-source alternative to Linktree implemented in JavaScript
+      </p>
+      <p className="text-1xl text-center">
+        Example profile of <Link to="/eddiejaoude">Eddie Jaoude</Link>. Want to
+        add your profile, read the{' '}
+        <a href="https://github.com/EddieHubCommunity/LinkFree#-to-add-your-profile">
+          instructions
+        </a>
+        .
+      </p>
+      <img
+        className="max-w-screen"
+        src="/mockup.png"
+        alt="Exapmle of the LinkFree app on Apple devices"
+      />
+    </>
+  )
+}
+
+export default Home

src/Components/Home/Home.js → src/Components/Search/Search.js

@@ -1,12 +1,12 @@
-import './Home.css'
+import './Search.css'
 
 import React, { useState, useEffect, useRef } from 'react'
 import { Toast } from 'primereact/toast'
 
 import Placeholders from './Placeholders'
 import Users from './Users'
 
-function Home() {
+function Search() {
   const [list, setList] = useState([])
   const [skeleton, setskeleton] = useState(true)
   const toast = useRef(null)
@@ -21,7 +21,7 @@ function Home() {
       )
       .then((data) => setList(data))
       .catch((error) => {
-        console.log('Home useEffect', error)
+        console.log('Search useEffect', error)
         toast.current.show({
           severity: 'error',
           summary: 'Error Message',
@@ -44,4 +44,4 @@ function Home() {
   )
 }
 
-export default Home
+export default Search

src/Components/Home/Searchbar.js → src/Components/Search/Searchbar.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { InputText } from 'primereact/inputtext'
 import GetIcons from '../Icons/GetIcons'
-import './Home.css'
+import './Search.css'
 
 const Searchbar = ({ searchHandler, searchTerm }) => {
   return (

src/Components/Home/Users.js → src/Components/Search/Users.js

@@ -7,6 +7,7 @@ import { Message } from 'primereact/message'
 import Navbar from '../Navbar'
 import Searchbar from './Searchbar'
 import ProfileTypeFilter from './filterProfileType'
+import GetIcons from '../Icons/GetIcons'
 
 function Users({ list }) {
   const [profileType, setProfileType] = useState('all')
@@ -58,10 +59,13 @@ function Users({ list }) {
     <>
       <Navbar
         start={
-          <Searchbar searchTerm={searchTerm} searchHandler={searchHandler} />
+          <Link to="/" aria-label="Go back to Home">
+            <GetIcons iconName="arrowLeft" size={20} />
+          </Link>
         }
       />
       <div className="mb-2 flex justify-content-center align-items-center">
+        <Searchbar searchTerm={searchTerm} searchHandler={searchHandler} />
         <label className="p-2">Profile Type</label>
         <ProfileTypeFilter
           profileType={profileType}