Skip to content

Commit

Permalink
show intro text after loggin in with role selection (#81)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JurreBrandsenInfoSupport
JurreBrandsenInfoSupport authored Apr 5, 2024
1 parent 70e466c commit 4ca2a2e
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 89 deletions.
125 changes: 61 additions & 64 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,73 +20,70 @@ const Home: React.FC = async () => {
</span>
<span className="block sm:inline"> Tech Survey of 2024</span>
</h1>
{!session && (
<div className="items-center justify-center py-6">
<div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
<div className="text-center">
<p className="mb-8 text-lg ">
An organization-wide initiative designed for all our
consultant colleagues. This comprehensive survey covers a wide
array of technological roles, ranging from &quot;Data
Engineering&quot; to &quot;Product Owner / Analyst /
Requirements Engineer.&quot; The data gathered reflects inputs
from diverse areas and communities within the realm of
technology, collected over the past year.
</p>
<div className="mb-8">
<h2 className="mb-4 text-xl font-bold ">
Our survey serves several essential purposes:
</h2>
<ol className="list-decimal pl-4 text-left">
<li className="mb-4">
<strong>Self-Evaluation:</strong> As a consultant, this
survey offers you a valuable opportunity to assess your
knowledge across various technologies. It enables you to
gauge your familiarity with different areas and identify
areas for further improvement or exploration through
additional training or experimentation.
</li>
<li className="mb-4">
<strong>Thermometer:</strong> For community leads, area
leads, teachers, and managers, the survey acts as a
thermometer, providing insights into the prevailing trends
among Info Supporters. For instance, it offers visibility
into the collective expertise in Java or any other
technology, guiding decisions related to training
initiatives or topics for discussion in ISKA (Info Support
Knowledge Academy).
</li>
<li className="mb-4">
<strong>
&apos;Find the Expert&apos; (Managers Only):
</strong>{" "}
Managers gain access to a powerful search functionality
that enables them to identify experts within Info Support.
This feature proves invaluable when clients present
specific inquiries, as it allows managers to swiftly
pinpoint the right consultant equipped to address their
needs.
</li>
</ol>
</div>
<p className="mb-8 text-lg ">
Join us in leveraging the collective expertise of Info Support
to drive innovation and excellence in technology solutions.
</p>

<div className="items-center justify-center py-6">
<div className="mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center">
<p className="mb-8 text-lg ">
An organization-wide initiative designed for all our consultant
colleagues. This comprehensive survey covers a wide array of
technological roles, ranging from &quot;Data Engineering&quot;
to &quot;Product Owner / Analyst / Requirements Engineer.&quot;
The data gathered reflects inputs from diverse areas and
communities within the realm of technology, collected over the
past year.
</p>
<div className="mb-8">
<h2 className="mb-4 text-xl font-bold ">
Our survey serves several essential purposes:
</h2>
<ol className="list-decimal pl-4 text-left">
<li className="mb-4">
<strong>Self-Evaluation:</strong> As a consultant, this
survey offers you a valuable opportunity to assess your
knowledge across various technologies. It enables you to
gauge your familiarity with different areas and identify
areas for further improvement or exploration through
additional training or experimentation.
</li>
<li className="mb-4">
<strong>Thermometer:</strong> For community leads, area
leads, teachers, and managers, the survey acts as a
thermometer, providing insights into the prevailing trends
among Info Supporters. For instance, it offers visibility
into the collective expertise in Java or any other
technology, guiding decisions related to training
initiatives or topics for discussion in ISKA (Info Support
Knowledge Academy).
</li>
<li className="mb-4">
<strong>
&apos;Find the Expert&apos; (Managers Only):
</strong>{" "}
Managers gain access to a powerful search functionality that
enables them to identify experts within Info Support. This
feature proves invaluable when clients present specific
inquiries, as it allows managers to swiftly pinpoint the
right consultant equipped to address their needs.
</li>
</ol>
</div>
<Buttons session={session} />
<p className="mb-8 text-lg ">
Join us in leveraging the collective expertise of Info Support
to drive innovation and excellence in technology solutions.
</p>
</div>
{/* If the user is logged in, show the SelectRole component */}
{session && (
<div>
<Suspense fallback={<RoleSelectionSkeleton />}>
<SelectRoleWrapper session={session} />
</Suspense>
</div>
)}
<Buttons session={session} />
</div>
)}

{/* If the user is logged in, show the SelectRole component */}
{session && (
<div>
<Suspense fallback={<RoleSelectionSkeleton />}>
<SelectRoleWrapper session={session} />
</Suspense>
</div>
)}
</div>
</div>
</div>
);
Expand Down
40 changes: 23 additions & 17 deletions src/components/additional-buttons-homepage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,29 @@ const Buttons = ({ session }: { session: Session | null }) => {
return (
<div className="mt-5 flex justify-center">
<div className="mt-5 flex flex-col items-center gap-6 md:flex-row">
<Login session={session} text="Go to survey" />
<Button
onClick={() => signIn("azure-ad", { callbackUrl: "/result/general" })}
className="bg-custom-buttonPrimary text-custom-secondary hover:bg-custom-buttonHover dark:bg-custom-buttonPrimary dark:hover:bg-custom-buttonHover"
>
Show anonymised results
<ArrowRight />
</Button>
<Button
onClick={() =>
signIn("azure-ad", { callbackUrl: "/management/general" })
}
className=" bg-custom-buttonPrimary text-custom-secondary hover:bg-custom-buttonHover dark:bg-custom-buttonPrimary dark:hover:bg-custom-buttonHover"
>
Find the Expert
<ArrowRight />
</Button>
{!session && (
<>
<Login session={session} text="Go to survey" />
<Button
onClick={() =>
signIn("azure-ad", { callbackUrl: "/result/general" })
}
className="bg-custom-buttonPrimary text-custom-secondary hover:bg-custom-buttonHover dark:bg-custom-buttonPrimary dark:hover:bg-custom-buttonHover"
>
Show anonymised results
<ArrowRight />
</Button>
<Button
onClick={() =>
signIn("azure-ad", { callbackUrl: "/management/general" })
}
className=" bg-custom-buttonPrimary text-custom-secondary hover:bg-custom-buttonHover dark:bg-custom-buttonPrimary dark:hover:bg-custom-buttonHover"
>
Find the Expert
<ArrowRight />
</Button>
</>
)}
</div>
</div>
);
Expand Down
16 changes: 8 additions & 8 deletions src/components/select-role.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,8 @@ export default function SelectRoles({
error: setRoleError,
isLoading: setRoleIsLoading,
} = api.survey.setRole.useMutation();
const {
mutate: setDefaultRoleMutate,
isLoading: setDefaultRoleIsLoading,
isSuccess: setDefaultRoleIsSuccess,
} = api.survey.setDefaultRole.useMutation();
const { mutate: setDefaultRoleMutate, isSuccess: setDefaultRoleIsSuccess } =
api.survey.setDefaultRole.useMutation();

useEffect(() => {
if (setRoleError) {
Expand Down Expand Up @@ -97,18 +94,21 @@ export default function SelectRoles({
{roles.map((role) => (
<li
key={role.id}
className={`rounded-lg border p-4 hover:bg-gray-100 hover:bg-opacity-25 ${
role.default ? "" : "cursor-pointer"
className={`rounded-lg border p-4 ${
role.default
? ""
: "cursor-pointer hover:bg-gray-400 hover:bg-opacity-25 dark:hover:bg-gray-800"
}`}
onClick={() => handleRoleToggle(role.id, role.default)}
>
<input
type="checkbox"
className="mr-2 cursor-pointer accent-custom-primary"
className={`mr-2 ${role.default ? "" : "cursor-pointer"} accent-custom-primary`}
checked={role.default || selectedRoles.includes(role.id)}
onChange={() => handleRoleToggle(role.id, role.default)}
disabled={role.default}
/>

<label
className={role.default ? "" : "cursor-pointer"}
style={{ color: role.default ? "#999" : "inherit" }}
Expand Down

0 comments on commit 4ca2a2e

Please sign in to comment.