Company Profile Page

apps/redi-talent-pool/src/components/organisms/JobListingCard.tsx

@@ -11,14 +11,16 @@ import './JobListingCard.scss'
 
 interface JobListingCardProps {
   jobListing: Partial<TpJobListing>
-  onClick?: () => void
+  onCardClick?: () => void
+  onCompanyNameClick?: () => void
   isFavorite?: boolean
   toggleFavorite?: (id: string) => void
 }
 
 export function JobListingCard({
   jobListing,
-  onClick,
+  onCardClick,
+  onCompanyNameClick,
   toggleFavorite,
   isFavorite,
 }: JobListingCardProps) {
@@ -36,16 +38,21 @@ export function JobListingCard({
     toggleFavorite && toggleFavorite(jobListing.id)
   }
 
+  const handleCompanyNameClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onCompanyNameClick()
+  }
+
   const imgSrc = companyAvatarImage
     ? AWS_PROFILE_AVATARS_BUCKET_BASE_URL + companyAvatarImage
     : null
 
   return (
     <Card
       className={classnames('job-posting-card', {
-        'job-posting-card--active': onClick,
+        'job-posting-card--active': onCardClick,
       })}
-      onClick={onClick}
+      onClick={onCardClick}
     >
       <Card.Image
         className="job-posting-card__image"
@@ -76,7 +83,8 @@ export function JobListingCard({
         <Element
           className="content job-posting-card__company-name"
           key="location"
-          renderAs="div"
+          renderAs="a"
+          onClick={handleCompanyNameClick}
         >
           {companyName}
         </Element>

apps/redi-talent-pool/src/components/organisms/company-profile-editables/EditableJobPostings.tsx

@@ -120,7 +120,7 @@ export function EditableJobPostings({
                   <JobListingCard
                     key={jobListing.id}
                     jobListing={jobListing}
-                    onClick={() => startEditing(jobListing.id)}
+                    onCardClick={() => startEditing(jobListing.id)}
                   />
                 </Columns.Column>
               ))}

apps/redi-talent-pool/src/components/organisms/company-profile-editables/EditableNamePhotoLocation.tsx

@@ -28,6 +28,28 @@ export function EditableNamePhotoLocation({ profile, disableEditing }: Props) {
 
   const isLocationEmpty = EditableNamePhotoLocation.isSectionEmpty(profile)
 
+  function getCorrectAvatar(profile, disableEditing): JSX.Element {
+    if (profile && disableEditing) {
+      return (
+        <Avatar
+          profile={profile}
+          shape="square"
+        />
+      )
+    } else if (profile && !disableEditing) {
+      return (
+        <Avatar.Editable
+          profile={profile}
+          profileSaveStart={mutation.mutate}
+          callToActionText="Please add your company logo"
+          shape="square"
+        />
+      )
+    } else {
+      return null
+    }
+  }
+
   return (
     <Editable
       disableEditing={disableEditing}
@@ -37,14 +59,7 @@ export function EditableNamePhotoLocation({ profile, disableEditing }: Props) {
       readComponent={
         <Columns vCentered breakpoint="mobile" className="oneandhalf-bs">
           <Columns.Column size={5}>
-            {profile ? (
-              <Avatar.Editable
-                profile={profile}
-                profileSaveStart={mutation.mutate}
-                callToActionText="Please add your company logo"
-                shape="square"
-              />
-            ) : null}
+            { getCorrectAvatar(profile, disableEditing) }
           </Columns.Column>
           <Columns.Column size={7}>
             <Heading size="medium">{profile?.companyName}</Heading>

apps/redi-talent-pool/src/pages/app/browse/BrowseJobseeker.tsx

@@ -269,9 +269,12 @@ export function BrowseJobseeker() {
                 <JobListingCard
                   key={jobListing.id}
                   jobListing={jobListing}
-                  onClick={() =>
+                  onCardClick={() =>
                     history.push(`/app/job-listing/${jobListing.id}`)
                   }
+                  onCompanyNameClick={() =>
+                    history.push(`/app/company-profile/${jobListing.tpCompanyProfileId}`)
+                  }
                   toggleFavorite={handleFavoriteJobListing}
                   isFavorite={isFavorite}
                 />

apps/redi-talent-pool/src/pages/app/company-profile/CompanyProfile.tsx

@@ -0,0 +1,55 @@
+import { useHistory, useParams } from "react-router-dom";
+import { Columns } from 'react-bulma-components'
+import { useTpCompanyProfileByIdQuery } from "apps/redi-talent-pool/src/react-query/use-tpcompanyprofile-query";
+import { LoggedIn } from "apps/redi-talent-pool/src/components/templates";
+import { EditableNamePhotoLocation } from "apps/redi-talent-pool/src/components/organisms/company-profile-editables/EditableNamePhotoLocation";
+import { EditableAbout } from "apps/redi-talent-pool/src/components/organisms/company-profile-editables/EditableAbout";
+import { EditableDetails } from "apps/redi-talent-pool/src/components/organisms/company-profile-editables/EditableDetails";
+import { EditableContact } from "apps/redi-talent-pool/src/components/organisms/company-profile-editables/EditableContact";
+import { EditableJobPostings } from '../../../components/organisms/company-profile-editables/EditableJobPostings'
+import { stubFalse } from "lodash";
+import { useTpJobListingAllOfOneUserQuery } from "apps/redi-talent-pool/src/react-query/use-tpjoblisting-all-query";
+import JobListing from "../job-listing/JobListing";
+import { JobListingCard } from '../../../components/organisms/JobListingCard';
+
+// const history = useHistory()
+
+interface CompanyProfileParams {
+    tpCompanyProfileId: string
+}
+
+export function CompanyProfile() {
+    const { tpCompanyProfileId } = useParams<CompanyProfileParams>()
+    const { data: companyProfile } = useTpCompanyProfileByIdQuery(tpCompanyProfileId)
+    // const { data: jobListings } = useTpJobListingAllOfOneUserQuery(tpCompanyProfileId)
+
+    return (
+        <LoggedIn>
+            <Columns className="is-6 is-variable">
+                <Columns.Column mobile={{ size: 12 }} tablet={{ size: 'three-fifths '}}>
+                    <EditableNamePhotoLocation profile={companyProfile} disableEditing />
+                    <EditableAbout profile={companyProfile} disableEditing />
+                </Columns.Column>
+                <Columns.Column>
+                    <EditableDetails profile={companyProfile} disableEditing />
+                    <EditableContact profile={companyProfile} disableEditing />
+                </Columns.Column>
+            </Columns>
+            <Columns>
+                {/* {jobListings?.map((jobListing) => (
+                    <Columns.Column mobile={{ size: 12 }} tablet={{ size: 6 }}>
+                        <JobListingCard
+                            key={jobListing.id}
+                            jobListing={jobListing}
+                            onCardClick={() =>
+                                history.push(`/app/job-listing/${jobListing.id}`)
+                            }
+                        />
+                    </Columns.Column>
+                ))} */}
+            </Columns>
+        </LoggedIn>
+    )
+}
+
+export default CompanyProfile

apps/redi-talent-pool/src/pages/app/job-listing/JobListing.tsx

@@ -16,12 +16,18 @@ import { EditableContact } from '../../../components/organisms/company-profile-e
 import { EditableDetails } from '../../../components/organisms/company-profile-editables/EditableDetails'
 import { LoggedIn } from '../../../components/templates'
 import { useTpJobListingOneQuery } from '../../../react-query/use-tpjoblisting-one-query'
+import { useHistory } from 'react-router-dom'
 
 export function JobListing() {
   const { tpJobListingId }: { tpJobListingId: string } = useParams()
   const { data: jobListing } = useTpJobListingOneQuery(tpJobListingId)
 
-  console.log(jobListing)
+  const history = useHistory()
+
+  const handleCompanyClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    history.push(`/app/company-profile/${jobListing.tpCompanyProfileId}`)
+  }
 
   return (
     <LoggedIn>
@@ -41,10 +47,11 @@ export function JobListing() {
         >
           <Heading size="medium">{jobListing?.title}</Heading>
           <Element
-            renderAs="p"
+            renderAs="a"
             textSize={4}
             responsive={{ mobile: { textSize: { value: 5 } } }}
             className="oneandhalf-bs"
+            onClick={handleCompanyClick}
           >
             at {jobListing?.tpCompanyProfile?.companyName}
           </Element>

apps/redi-talent-pool/src/react-query/use-tpcompanyprofile-query.ts

@@ -1,5 +1,5 @@
 import { useQuery } from 'react-query'
-import { fetchCurrentUserTpCompanyProfile } from '../services/api/api'
+import { fetchCurrentUserTpCompanyProfile, fetchTpCompanyProfileById } from '../services/api/api'
 
 interface Props {
   retry: boolean
@@ -18,3 +18,9 @@ export function useTpCompanyProfileQuery(props?: Props) {
     }
   )
 }
+
+export function useTpCompanyProfileByIdQuery(id: string) {
+  return useQuery(['oneTpCompanyProfile', id], () => 
+    fetchTpCompanyProfileById(id)
+  )
+}

apps/redi-talent-pool/src/react-query/use-tpjoblisting-all-query.ts

@@ -1,6 +1,7 @@
 import { useQuery } from 'react-query'
 import {
   fetchAllTpJobListings,
+  fetchAllTpJobListingsOfOneUser,
   fetchAllTpJobListingsUsingFilters,
   TpJobListingFilters,
 } from '../services/api/api'
@@ -12,6 +13,14 @@ export function useTpJobListingAllQuery() {
   })
 }
 
+export function useTpJobListingAllOfOneUserQuery(id: string) {
+  return useQuery(['allTpJobListingsOfOneUser', id], () =>
+    fetchAllTpJobListingsOfOneUser(id), 
+    {
+      refetchOnWindowFocus: false,
+    })
+}
+
 export function useBrowseTpJobListingsQuery(filters: TpJobListingFilters) {
   return useQuery(['browseTpJobListings', filters], () =>
     fetchAllTpJobListingsUsingFilters(filters)

apps/redi-talent-pool/src/routes/routes__logged-in.tsx

@@ -35,7 +35,13 @@ const JobListing = lazy(
 const JobseekerProfile = lazy(
   () =>
     import(
-      /* webpackChunkName: "Browse", webpackPreload: true  */ '../pages/app/jobseeker-profile/JobseekerProfile'
+      /* webpackChunkName: "JobseekerProfile", webpackPreload: true  */ '../pages/app/jobseeker-profile/JobseekerProfile'
+    )
+)
+const CompanyProfile = lazy(
+  () =>
+    import(
+      /* webpackChunkName: "CompanyProfile", webpackPreload: true  */ '../pages/app/company-profile/CompanyProfile'
     )
 )
 
@@ -69,6 +75,11 @@ const routes: RouteDefinition[] = [
     component: JobseekerProfile,
     exact: true,
   },
+  {
+    path: '/app/company-profile/:tpCompanyProfileId',
+    component: CompanyProfile,
+    exact: true,
+  },
 ]
 
 const routesRequiringLoggedIn = routes.map((route) =>

apps/redi-talent-pool/src/services/api/api.tsx

@@ -349,6 +349,11 @@ export async function fetchAllTpJobListings(): Promise<Array<TpJobListing>> {
   return resp.data.filter((listing) => !listing.dummy)
 }
 
+export async function fetchAllTpJobListingsOfOneUser( id: string): Promise<Array<TpJobListing>> {
+  const resp = await http(`${API_URL}/redUsers/${id}/tpJobListings`)
+  return resp.data
+}
+
 export async function fetchOneTpJobListingOfCurrentUser(
   id: string
 ): Promise<TpJobListing> {
@@ -430,3 +435,10 @@ export async function fetchTpJobseekerProfileById(
   const resp = await http(`${API_URL}/tpJobseekerProfiles/${id}`)
   return resp.data
 }
+
+export async function fetchTpCompanyProfileById(
+  id: string
+): Promise<Partial<TpCompanyProfile>> {
+  const resp = await http(`${API_URL}/tpCompanyProfiles/${id}`)
+  return resp.data
+}