Skip to content

Commit

Permalink
💄 Adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
@ouckah
ouckah committed Apr 14, 2024
1 parent ff9508c commit c11c63e
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 57 deletions.
49 changes: 49 additions & 0 deletions client/src/components/CompanyCard.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// assets
import BigSmiley from '../static/ratings/BigSmiley.png'
import smiley from '../static/ratings/smiley.png'
import neutral from '../static/ratings/neutral.png'
import frown from '../static/ratings/frown.png'
import demon from '../static/ratings/demon.png'

export const CompanyCard = ({ company }) => {
const options = [demon, frown, neutral, smiley, BigSmiley]

return (
<div className="min-h-4/5 min-w-1/4 mt-24 flex flex-col rounded-2xl border-2 border-transparent bg-pipeline-blue-200/20 p-8 py-5 text-pipelines-gray-100 md:flex-row md:gap-5 md:px-16 md:py-10 lg:mt-0 ">
<div className="card flex-col items-center justify-center">
<img
src={company.logo}
className="shadow-2x h-32 w-32 max-w-sm rounded-lg bg-slate-100 object-contain p-2 md:h-64 md:w-64"
/>
<div className="flex-row object-center">
<h1 className="p-6 text-center text-5xl font-bold text-slate-200">
{company.name}
</h1>
</div>
</div>
<div className="ml-4 w-min flex-col object-center p-2">
<p className="mb-2 w-72 p-2 text-lg">{company.info}</p>
{company.rating !== null ? (
<div className="card w-min flex-row bg-gray-900 bg-opacity-60 p-3 shadow-xl">
<p className="mr-2 p-2 text-lg font-bold text-slate-200">
Rating:
</p>
<div
className="tooltip"
data-tip={company.rating + '/5'}
>
<div className="avatar mr-2 h-12 w-12 rounded-full">
<img
src={options[Math.ceil(company.rating) - 1]}
alt="rating"
/>
</div>
</div>
</div>
) : (
<div></div>
)}
</div>
</div>
)
}
52 changes: 3 additions & 49 deletions client/src/pages/Company.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,7 @@ import { fetchWithAuth } from '../util/fetchUtils'
// components
import { error404 } from '../components/Error404'
import Loading from './Loading'

// assets
import BigSmiley from '../static/ratings/BigSmiley.png'
import smiley from '../static/ratings/smiley.png'
import neutral from '../static/ratings/neutral.png'
import frown from '../static/ratings/frown.png'
import demon from '../static/ratings/demon.png'
import { CompanyCard } from '../components/CompanyCard'

const Company = () => {
const { id } = useParams()
Expand All @@ -27,8 +21,6 @@ const Company = () => {
const [rating, setRating] = useState(null)
const [loading, setLoading] = useState(false)

const options = [demon, frown, neutral, smiley, BigSmiley]

// if routed company changes:
useEffect(() => {
;(async () => {
Expand Down Expand Up @@ -241,46 +233,7 @@ const Company = () => {
return (
<div className="flex-col p-8">
<div className="hero-content flex-col rounded-lg bg-opacity-0 lg:flex-row">
<div className="min-h-4/5 min-w-1/4 mt-24 flex flex-col gap-5 rounded-2xl border-2 border-transparent bg-pipeline-blue-200/20 p-8 py-5 text-pipelines-gray-100 md:flex-row md:px-16 md:py-10 lg:mt-0 ">
<div className="card flex-col items-center justify-center md:items-start md:justify-start">
<img
src={logo}
className="shadow-2x h-32 w-32 max-w-sm rounded-lg bg-slate-100 object-contain md:h-64 md:w-64"
/>
<div className="flex-row object-center">
<h1 className="p-6 text-5xl font-bold text-slate-200">
{name}
</h1>
</div>
</div>
<div className="ml-4 w-min flex-col object-center p-2">
<p className="mb-2 w-72 p-2 text-lg">{info}</p>
{rating !== null ? (
<div className="card w-min flex-row bg-gray-900 bg-opacity-60 p-3 shadow-xl">
<p className="mr-2 p-2 text-lg font-bold text-slate-200">
Rating:
</p>
<div
className="tooltip"
data-tip={rating + '/5'}
>
<div className="avatar mr-2 h-12 w-12 rounded-full">
<img
src={
options[
Math.ceil(rating) - 1
]
}
alt="rating"
/>
</div>
</div>
</div>
) : (
<div></div>
)}
</div>
</div>
<CompanyCard company={{ name, logo, info, rating }} />
<div className="card w-full object-center shadow-xl">
<div className="card-body">
<h2 className="card-title text-xl text-slate-200">
Expand All @@ -305,6 +258,7 @@ const Company = () => {
const error404component = error404(
'We were unable to find the company you requested!'
)

return loading ? (
<Loading />
) : name === null ? (
Expand Down
102 changes: 94 additions & 8 deletions client/src/pages/Search.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState, useCallback, useEffect } from 'react'
import { useSearchParams } from 'react-router-dom'
import { useSearchParams, useNavigate } from 'react-router-dom'

import { HOST } from '../util/apiRoutes'
import { fetchWithAuth } from '../util/fetchUtils'
Expand All @@ -21,6 +21,7 @@ const ERROR_MESSAGE = {
function Search() {
const [query, setQuery] = useState('')
const [profiles, setProfiles] = useState([])
const [company, setCompany] = useState(null)

const [loading, setLoading] = useState(false)
const [errorMessage, setErrorMessage] = useState('')
Expand All @@ -32,14 +33,30 @@ function Search() {
const fetchCompanies = async (company) => {
try {
const encodedQuery = encodeURIComponent(company)
const data = await fetchWithAuth({
const profileData = await fetchWithAuth({
url: `${HOST}/api/pipeline/search/company/${encodedQuery}`,
method: 'GET',
})

const companyData = await fetchWithAuth({
url: `${HOST}/api/company/get/${encodedQuery}`,
method: 'GET',
})

// Assuming fetchWithAuth throws for non-OK responses, including 404
setErrorMessage('') // If the fetch was successful, there's no 404, so we assume some results were found
setProfiles([...data]) // Update the profiles state with the fetched data
setProfiles([...profileData]) // Update the profiles state with the fetched data

const companyRating = Math.floor(
companyData.rating / companyData.ratedEmployees.length / 20
)
setCompany({
id: companyData.name,
name: companyData.displayName,
logo: companyData.logo,
info: companyData.description,
rating: companyRating,
}) // fetch company data to display in card
} catch (err) {
throw new Error(err)
}
Expand All @@ -59,10 +76,13 @@ function Search() {

await fetchCompanies(query.name)
} catch (error) {
console.error('Error:', error.message)
console.error(error.message)

// clear the profiles
setProfiles([])

// Handle specific conditions like 404 Not Found
if (error.message.includes('404')) {
if (error.message.includes('No profiles found.')) {
setErrorMessage(ERROR_MESSAGE.NO_USERS)
}
} finally {
Expand All @@ -74,6 +94,7 @@ function Search() {
setQuery('')
setProfiles([])
setErrorMessage('')
setCompany(null)
}

useEffect(() => {
Expand All @@ -83,6 +104,7 @@ function Search() {
// edge case: no search params given
if (!company) {
resetSearch()
return
}

// if params preset, refetch companies and set query to company in URL
Expand All @@ -93,10 +115,13 @@ function Search() {
await fetchCompanies(company)
setQuery(company)
} catch (error) {
console.error('Error:', error.message)
console.error(error.message)

// clear the profiles
setProfiles([])

// Handle specific conditions like 404 Not Found
if (error.message.includes('404')) {
if (error.message.includes('No profiles found.')) {
setErrorMessage(ERROR_MESSAGE.NO_USERS)
} else {
setErrorMessage(ERROR_MESSAGE.NO_COMPANY_FOUND)
Expand Down Expand Up @@ -157,7 +182,7 @@ function Search() {
)

const ViewButtons = () => (
<div className="flex flex-row items-center justify-center gap-5">
<div className="hidden items-center justify-center gap-5 md:flex md:flex-row">
<button
className={`rounded-lg p-1 ${viewMode === 'grid' ? 'bg-white bg-opacity-30' : 'transition-all duration-300 hover:bg-white hover:bg-opacity-30'}`}
onClick={() => setViewMode('grid')}
Expand Down Expand Up @@ -204,10 +229,71 @@ function Search() {
<QuerySearchInput handleSearch={handleSearch} />
<ViewButtons />
</div>
{company && <SearchCompanyCard company={company} />}
{viewMode === 'grid' ? gridView : pipelineView}
</div>
</>
)
}

// assets
import BigSmiley from '../static/ratings/BigSmiley.png'
import smiley from '../static/ratings/smiley.png'
import neutral from '../static/ratings/neutral.png'
import frown from '../static/ratings/frown.png'
import demon from '../static/ratings/demon.png'

const SearchCompanyCard = ({ company }) => {
const options = [demon, frown, neutral, smiley, BigSmiley]

const navigate = useNavigate()

return (
<button onClick={() => navigate(`/company/${company.id}`)}>
<div className="min-h-4/5 min-w-1/4 flex flex-col gap-0 rounded-2xl border-2 border-transparent bg-pipeline-blue-200/20 p-4 py-2 text-pipelines-gray-100 md:flex-row md:gap-5 md:px-8 md:py-5 lg:mt-0 ">
<div className="card flex-col items-center justify-center">
<img
src={company.logo}
className="shadow-2x mt-4 h-24 w-24 max-w-sm rounded-lg object-contain transition-all duration-300 hover:scale-110 hover:cursor-pointer md:mt-0 md:h-32 md:w-32"
/>
<div className="flex-row object-center">
<h1 className="p-6 text-5xl font-bold text-slate-200">
{company.name}
</h1>
</div>
</div>
<div className="w-full flex-col p-2 md:ml-4 md:w-min md:object-center">
<p className="text-md mb-2 w-72 p-2 text-center md:text-left">
{company.info}
</p>
{company.rating !== null ? (
<div className="card w-min flex-row bg-gray-900 bg-opacity-60 p-3 shadow-xl">
<p className="mr-2 p-2 text-lg font-bold text-slate-200">
Rating:
</p>
<div
className="tooltip"
data-tip={company.rating + '/5'}
>
<div className="avatar mr-2 h-12 w-12 rounded-full">
<img
src={
options[
Math.ceil(company.rating) - 1
]
}
alt="rating"
/>
</div>
</div>
</div>
) : (
<div></div>
)}
</div>
</div>
</button>
)
}

export default Search

0 comments on commit c11c63e

Please sign in to comment.