Skip to content

Commit

Permalink
Merge pull request #31 from hicsail/wireframe-components
Browse files Browse the repository at this point in the history
Add about/strategies, homepage blog panel
  • Loading branch information
vpsx authored Nov 27, 2023
2 parents 7b1aefb + a7a9439 commit 6786855
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 27 deletions.
34 changes: 23 additions & 11 deletions packages/client/src/gql.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -129,17 +129,6 @@ export const GET_TREATMENTS_CARDGRID = gql`
}
}
`;
export const GET_ABOUT_MISSION = gql`
query GetAboutMission {
aboutMission {
data {
attributes {
Body
}
}
}
}
`;
export const GET_UPCOMING_ONGOING = gql`
query GetUpcomingOngoing {
aboutUpcomingOngoing {
Expand Down Expand Up @@ -200,6 +189,29 @@ export const GET_RESEARCH_AND_EVALUATIONS = gql`
}
}
`;
export const GET_RECENT_BLOG_POSTS = gql`
query GetBlogPosts($pageSize: Int!) {
blogPosts(pagination: { page: 1, pageSize: $pageSize }, sort: "DatetimePublished:desc") {
data {
id
attributes {
Title
DatetimePublished
Body
Category
Author
CoverImage {
data {
attributes {
url
}
}
}
}
}
}
}
`;
export const GET_RECENT_BLOG_POSTS_EXCEPT = gql`
query GetBlogPosts($id: ID!, $pageSize: Int!) {
blogPosts(
Expand Down
57 changes: 42 additions & 15 deletions packages/client/src/pages/AboutMission.jsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,55 @@
import { useQuery } from '@apollo/client';
import ReactMarkdown from 'react-markdown';

import { Box, Typography } from '@mui/material';
import { InfoPanelA } from '../components/InfoPanelA.jsx';
import { prependStrapiURL } from '../utils.jsx';

import { GET_ABOUT_MISSION } from '../gql.jsx';

import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
function Strategies() {
return (
<Box sx={{ display: 'flex' }}>
<Box sx={{ width: '60%', display: 'flex', flexDirection: 'column' }}>
<Typography variant="infoPanelBTitle" sx={{ textAlign: 'center' }}>
Our Strategies
</Typography>
<Typography variant="infoPanelBBody" sx={{ textAlign: 'center' }}>
RESTORE uses various strategies to achieve these goals, including:
</Typography>
<Typography variant="infoPanelBBody">
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}>
<p>Clinical training and consultation initiatives</p>
<p>Expanding the capacity of the mental health workforce</p>
<p>Offering web-delivered mental health applications</p>
<p>Community health worker-supported services</p>
<p>Tailoring treatments to fit usual care settings</p>
<p>Cultural tailoring of treatments to enhance quality and fit with our patients</p>
<p>Patient education and outreach to reduce mental health stigma and build trust</p>
<p>Offering coping skills training to enhance readiness for intensive treatments</p>
<p>Improving the efficiency of service delivery through measurement based care</p>
<p>Partnering with the community through various advisory boards</p>
</Box>
</Typography>
</Box>
<Box sx={{ width: '40%', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<img width="100%" src={prependStrapiURL('/uploads/ourstrategies_090926ae2a.png')} />
</Box>
</Box>
);
}

export default function AboutMission() {
const { loading, error, data } = useQuery(GET_ABOUT_MISSION);

if (loading) return <p>Loading...</p>;
if (error) return <p>Error : {error.message}</p>;

return (
<>
{/* As much as possible should become Strapi queries.*/}
<InfoPanelA
title="Our Mission: Providing Compassionate Psychiatric Care"
subtitle="The REcovery from Stress and Trauma through Outpatient care, Research and Education (RESTORE) Center aims to improve access to high-quality services for PTSD across the health system and remove barriers to treatment for our patients."
subtitle={
<p>
The <strong>RE</strong>covery from <strong>S</strong>tress and <strong>T</strong>rauma through{' '}
<strong>O</strong>utpatient care, <strong>R</strong>esearch and <strong>E</strong>ducation (
<strong>RESTORE</strong>) Center aims to <strong>improve access</strong> to high-quality services for PTSD
across the health system and <strong>remove barriers</strong> to treatment for our patients.
</p>
}
imageUrl="src/assets/imgplaceholder.png"
icon={SentimentSatisfiedAltIcon}
/>
<ReactMarkdown>{data.aboutMission.data.attributes.Body}</ReactMarkdown>
<Strategies />
</>
);
}
42 changes: 41 additions & 1 deletion packages/client/src/pages/Home.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
import { NavLink } from 'react-router-dom';
import { Box, Button, Typography } from '@mui/material';

import { InfoPanelA } from '../components/InfoPanelA.jsx';
import { CardGrid } from '../components/CardGrid.jsx';
import { BlogCard } from '../components/BlogCard.jsx';

import { useQuery } from '@apollo/client';
import { GET_HOMEPAGE_CARDGRID, GET_HOMEPAGE_INFOPANEL_TOP, GET_HOMEPAGE_INFOPANEL_BOTTOM } from '../gql.jsx';
import {
GET_HOMEPAGE_CARDGRID,
GET_HOMEPAGE_INFOPANEL_TOP,
GET_HOMEPAGE_INFOPANEL_BOTTOM,
GET_RECENT_BLOG_POSTS
} from '../gql.jsx';

// Some random placeholder icon options...
import GestureIcon from '@mui/icons-material/Gesture';
Expand Down Expand Up @@ -62,12 +71,43 @@ function HomepageInfoPanelBottom() {
);
}

function HomepageBlogPreview() {
const { loading, error, data } = useQuery(GET_RECENT_BLOG_POSTS, {
variables: { pageSize: 3 }
});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;

return (
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<Typography variant="infoPanelATitle">Our Blog</Typography>
<Box sx={{ display: 'flex' }}>
{data.blogPosts.data.map((post) => (
<BlogCard
key={post.id}
id={post.id}
tag={post.attributes.Category}
title={post.attributes.Title}
imgSource={post.attributes.CoverImage.data?.attributes.url}
author={post.attributes.Author}
date={post.attributes.DatetimePublished}
/>
))}
</Box>
<Button component={NavLink} to="/blog" variant="outlined" sx={{ color: 'black', borderColor: 'black' }}>
View all
</Button>
</Box>
);
}

export default function Home() {
return (
<>
<HomepageInfoPanelTop />
<HomepageCardGrid />
<HomepageInfoPanelBottom />
<HomepageBlogPreview />
</>
);
}

0 comments on commit 6786855

Please sign in to comment.