Skip to content

Commit

Permalink
Merge pull request #198 from nwplus/daniel/redesign-resources
Browse files Browse the repository at this point in the history 
Redesign resources section
  • Loading branch information
@DonaldKLee
DonaldKLee authored Aug 31, 2024
2 parents dbb1887 + 19e1cc9 commit b30173b
Show file tree
Hide file tree
Showing 5 changed files with 351 additions and 179 deletions.
241 changes: 135 additions & 106 deletions components/ResourceContainer.js
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,101 @@
import React, { useState } from 'react'
import React, { useState } from 'react';
import styled from 'styled-components';
import { FILTER_TYPE, FILTER_EVENT, FILTER_YEAR, ResourceType, ResourceEvent, ResourceYear, RESOURCES } from '../utils/ResourceUtils';
import ResourceFilterCard from './ResourceFilterCard';
import {
FILTER_TYPE,
FILTER_EVENT,
FILTER_YEAR,
ResourceType,
ResourceEvent,
ResourceYear,
RESOURCES,
} from '../utils/ResourceUtils';
import ResourceFilterDropdown from './ResourceFilterDropdown';
import ResourcePage from './ResourcePage';
import { Title1, Body, LinkBody } from './Typography';
import { Title1 } from './Typography';
import Button from './Button';
import ResourceFilterTabs from './ResourceFilterTabs';

const Container = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`
gap: 12px;
`;
const HeaderContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
`
`;

const CardContainer = styled.div`
width: 100%;
display: flex;
flex-direction: column;
padding: 8px;
gap: 40px;
${(p) => p.theme.mediaQueries.mobile} {
flex-direction: column;
justify-content: center;
}
`;

const FilterContainer = styled.div`
display: flex;
flex-direction: column;
margin-right: 40px;
width: 100%;
flex-direction: row;
justify-content: center;
padding: 0 8px;
${(p) => p.theme.mediaQueries.mobile} {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 16px;
margin-right: 0px;
gap: 12px;
}
`;

const CallToActionContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 20px 16px;
background-color: white;
border-radius: 10px;
font-weight: bold;
text-align: center;
${(p) => p.theme.mediaQueries.mobile} {
gap: 8px;
}
`
`;

const ActionButton = styled(Button)`
font-size: 24px;
width: fit-content;
padding: 12px 20px;
margin-bottom: 0;
color: black;
const FilterCardContainer = styled.div`
margin-bottom: 15px;
flex-wrap: wrap-content;
${(p) => p.theme.mediaQueries.mobile} {
margin-right: 10px;
flex-grow: 1;
font-size: 16px;
}
&:hover {
cursor: pointer;
}
`
`;

const RESOURCES_TITLE = 'Resources';
const RESOURCES_BODY = 'If you are looking to get started in Computer Science, check out our ';
const RESOURCES_BODY =
'If you are looking to get started in Computer Science, check out our ';
const RESOURCES_LINK = 'https://resources.nwplus.io/';
const RESOURCES_LINK_TEXT = 'Self-Learning Resources Wiki';
const EXCLAMATION_MARK = '!';

export default function ResourceContainer() {
const [typeFilters, setTypeFilters] = useState({
videos: false,
articles: false,
slides: false,
github: false,
videos: true,
articles: true,
slides: true,
github: true,
});
const [eventFilters, setEventFilters] = useState({
hackcamp: false,
Expand All @@ -69,10 +105,10 @@ export default function ResourceContainer() {
const [yearFilters, setYearFilters] = useState({
2019: false,
2020: false,
2021: false
2021: false,
});
const filteredResources = RESOURCES.filter(resource => {

const filteredResources = RESOURCES.filter((resource) => {
let videosFilter = false;
let githubFilter = false;
let articlesFilter = false;
Expand All @@ -89,124 +125,117 @@ export default function ResourceContainer() {
let filter2021 = false;
let isYearFilter = false;

const isTypeFilterChecked = (typeFilters.videos || typeFilters.github || typeFilters.articles || typeFilters.slides);
const isEventFilterChecked = (eventFilters.hackcamp || eventFilters.nwhacks || eventFilters.cmd_f);
const isYearFilterChecked = (yearFilters[2019] || yearFilters[2020] || yearFilters[2021]);
const isTypeFilterChecked =
typeFilters.videos ||
typeFilters.github ||
typeFilters.articles ||
typeFilters.slides;
const isEventFilterChecked =
eventFilters.hackcamp || eventFilters.nwhacks || eventFilters.cmd_f;
const isYearFilterChecked =
yearFilters[2019] || yearFilters[2020] || yearFilters[2021];

if (typeFilters.videos) {
videosFilter = resource.type === ResourceType.VIDEO
videosFilter = resource.type === ResourceType.VIDEO;
}

if (typeFilters.github) {
githubFilter = resource.type === ResourceType.GITHUB
githubFilter = resource.type === ResourceType.GITHUB;
}

if (typeFilters.articles) {
articlesFilter = resource.type === ResourceType.ARTICLES
articlesFilter = resource.type === ResourceType.ARTICLES;
}

if (typeFilters.slides) {
slidesFilter = resource.type === ResourceType.SLIDES
slidesFilter = resource.type === ResourceType.SLIDES;
}

if (eventFilters.hackcamp) {
hackcampFilter = resource.event === ResourceEvent.HACK_CAMP
hackcampFilter = resource.event === ResourceEvent.HACK_CAMP;
}

if (eventFilters.nwhacks) {
nwhacksFilter = resource.event === ResourceEvent.NW_HACKS
nwhacksFilter = resource.event === ResourceEvent.NW_HACKS;
}

if (eventFilters.cmd_f) {
cmdfFilter = resource.event === ResourceEvent.CMD_F
cmdfFilter = resource.event === ResourceEvent.CMD_F;
}

if (yearFilters[2019]) {
filter2019 = resource.year === ResourceYear[2019]
filter2019 = resource.year === ResourceYear[2019];
}

if (yearFilters[2020]) {
filter2020 = resource.year === ResourceYear[2020]
filter2020 = resource.year === ResourceYear[2020];
}

if (yearFilters[2021]) {
filter2021 = resource.year === ResourceYear[2021]
}

isTypeFilter = (videosFilter || githubFilter || articlesFilter || slidesFilter);
isEventFilter = (hackcampFilter || nwhacksFilter || cmdfFilter);
isYearFilter = (filter2019 || filter2020 || filter2021);

if(isTypeFilterChecked && isEventFilterChecked && isYearFilterChecked) {
return (isTypeFilter && isEventFilter && isYearFilter);
}

else if(isTypeFilterChecked && isYearFilterChecked) {
return (isTypeFilter && isYearFilter);
}

else if(isTypeFilterChecked && isEventFilterChecked) {
return (isTypeFilter && isEventFilter);
}

else if(isEventFilterChecked && isYearFilterChecked) {
return (isEventFilter && isYearFilter);
}

else if(isTypeFilterChecked) {
filter2021 = resource.year === ResourceYear[2021];
}

isTypeFilter =
videosFilter || githubFilter || articlesFilter || slidesFilter;
isEventFilter = hackcampFilter || nwhacksFilter || cmdfFilter;
isYearFilter = filter2019 || filter2020 || filter2021;

if (isTypeFilterChecked && isEventFilterChecked && isYearFilterChecked) {
return isTypeFilter && isEventFilter && isYearFilter;
} else if (isTypeFilterChecked && isYearFilterChecked) {
return isTypeFilter && isYearFilter;
} else if (isTypeFilterChecked && isEventFilterChecked) {
return isTypeFilter && isEventFilter;
} else if (isEventFilterChecked && isYearFilterChecked) {
return isEventFilter && isYearFilter;
} else if (isTypeFilterChecked) {
return isTypeFilter;
}

else if(isEventFilterChecked) {
} else if (isEventFilterChecked) {
return isEventFilter;
}

else if(isYearFilterChecked) {
} else if (isYearFilterChecked) {
return isYearFilter;
}
else return true;
})
} else return true;
});

return (
<Container>
<HeaderContainer>
<Title1 withGradient>{RESOURCES_TITLE}</Title1>
<Body>
{RESOURCES_BODY}
<a href={RESOURCES_LINK} target='_blank' rel="noreferrer">
<LinkBody>{RESOURCES_LINK_TEXT}</LinkBody>
</a>
{EXCLAMATION_MARK}
</Body>
</HeaderContainer>
<CardContainer>
<CardContainer>
<FilterContainer>
<FilterCardContainer>
<ResourceFilterCard header={FILTER_TYPE}
items={ResourceType}
filterStates={typeFilters}
onChange={setTypeFilters}
/>
</FilterCardContainer>
<FilterCardContainer>
<ResourceFilterCard
header={FILTER_EVENT}
items={ResourceEvent}
filterStates={eventFilters}
onChange={setEventFilters}
/>
</FilterCardContainer>
<FilterCardContainer>
<ResourceFilterCard
header={FILTER_YEAR}
items={ResourceYear}
filterStates={yearFilters}
onChange={setYearFilters}
/>
</FilterCardContainer>
<ResourceFilterTabs
header={FILTER_TYPE}
items={ResourceType}
filterStates={typeFilters}
onChange={setTypeFilters}
/>
<ResourceFilterDropdown
header={FILTER_EVENT}
items={ResourceEvent}
filterStates={eventFilters}
onChange={setEventFilters}
/>
<ResourceFilterDropdown
header={FILTER_YEAR}
items={ResourceYear}
filterStates={yearFilters}
onChange={setYearFilters}
/>
</FilterContainer>
<ResourcePage resources={filteredResources} />
</CardContainer>
<CallToActionContainer>
{RESOURCES_BODY}
<ActionButton
href={RESOURCES_LINK}
target='_blank'
rel='noreferrer'
align='center'
>
{RESOURCES_LINK_TEXT}
</ActionButton>
</CallToActionContainer>
</Container>
)
);
}
Loading

0 comments on commit b30173b

Please sign in to comment.