Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flexibleidealist/applicants screen styling #72

Open
wants to merge 6 commits into
base: native-development
Choose a base branch
from
Open

Flexibleidealist/applicants screen styling #72

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c7bf2b8
begins styling Applicants screen; makes changes to Applicants screen …
flexibleidealist Jun 15, 2022
c0adabf
adds styling to Applicants screen; modifies JSX to match Figma design…
flexibleidealist Jun 20, 2022
58a997f
updates styling on Applicants screen, including creating round image …
flexibleidealist Jun 21, 2022
88b7c67
updates styling on Applicants screen
flexibleidealist Jun 21, 2022
15b25ba
updates styling on Applicants screen; changes size of image placehold…
flexibleidealist Jun 21, 2022
375220c
updates styling on Applicants screen
flexibleidealist Jun 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions native/components/OwnerView/OwnerView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@ export function OwnerView({ project }) {
});
};

const showApplicants = (id) => {
const showApplicants = (project, applicants) => {
navigation.navigate('Applicants', {
projectID: id,
project: project,
applicants: applicants,
});
};
useEffect(() => {
Expand Down Expand Up @@ -43,7 +44,7 @@ export function OwnerView({ project }) {
</Pressable>
))}
{project.interested_applicants.length > 3 ? (
<Pressable onPress={() => showApplicants(project._id)}>
<Pressable onPress={() => showApplicants(project, applicants)}>
<Text>{`See all ${project.interested_applicants.length} applicants`}</Text>
</Pressable>
) : null}
Expand Down
63 changes: 46 additions & 17 deletions native/screens/Applicants/Applicants.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { Button, Text, TouchableOpacity, ScrollView, View } from 'react-native';
import { Button, Text, TouchableOpacity, ScrollView, StyleSheet, View } from 'react-native';
import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import uuid from 'react-native-uuid';
import { handleToggle } from '../../services/utils/handlers';
import { getOneProject } from '../../services/api/projects';

export const Applicants = ({ navigation, route }) => {
const soloProject = useSelector((state) => state.projects.allProjects[0]);
Expand All @@ -13,19 +12,16 @@ export const Applicants = ({ navigation, route }) => {

useEffect(() => {
const setProject = async () => {
let fetchedProject;

if (!route.params) {
fetchedProject = soloProject;
setCurrProject(soloProject); // ultimately we shouldn't need this, since this screen only comes from SingleProject screen
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Discussed over stand-up; decided on reolcating applicant logic to backend instead
New flow would look like:
Owner views their project ->
Clicks on "all applicants" ->
On navigation to Applicants, projectID is passed in as a prop ->
Applicants screen uses the project ID to call an "applicants only" endpoint ->
backend will fetch the applicants list from DB then fetch each individual user's object mainly for their name, image, and role ->
then filter through these users to separate them by role ->
package the response as an object with a property for each role (each role will have an array as a value full of those role-specific users) ->
Frontend will use this response to generate the lists again

} else {
fetchedProject = await getOneProject(route.params.projectID); // must be tested
setCurrProject(route.params.project);
}

const filterRoles = (role) => {
return fetchedProject.interested_applicants?.filter((applicant) => applicant.role === role);
return route.params.applicants.filter((applicant) => applicant.role === role);
};

setCurrProject(fetchedProject);
setEngineers(() => filterRoles('Software Engineer'));
setDesigners(() => filterRoles('UX Designer'));
};
Expand All @@ -35,14 +31,12 @@ export const Applicants = ({ navigation, route }) => {
if (currProject) {
return (
<ScrollView>
<Text>Applications</Text>
<RoleList
applicants={engineers}
navigation={navigation}
role={'Software Developers'}
role={'Software Engineers'}
currProject={currProject}
/>
<Text>{'\nJUST A DIVIDER \n DONT MIND ME \n DELETE ME AFTER \n'}</Text>
<RoleList
applicants={designers}
navigation={navigation}
Expand Down Expand Up @@ -74,7 +68,7 @@ const RoleList = ({ applicants, navigation, role, currProject }) => {
return (
<View>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The container for each RoleList should have at least a 40px between each RoleList component, drew a line on figma to measure the distance

{loadMore && <Button title="Show less" onPress={() => handleToggle(toggleLoadMore)} />}
<Text>{role}</Text>
<Text style={styles.largerText}>{role}</Text>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The styling for this text box is not the same color (#505050) , size (18), or margin (centered with 15px on the left + right) as depicted on the figma

{visibleList.map((applicant) => (
<TouchableOpacity
key={uuid.v4()}
Expand All @@ -87,21 +81,56 @@ const RoleList = ({ applicants, navigation, role, currProject }) => {
}}
>
<View>
<View>
<View style={styles.applicantInfo}>
<Text>IMAGE</Text>
flexibleidealist marked this conversation as resolved.
Show resolved Hide resolved
<Text
style={styles.boldText}
>{`${applicant.first_name} ${applicant.last_name}`}</Text>
<Text style={styles.boldText}>{`${applicant.role}`}</Text>
</View>
<Text>{`${applicant.first_name} ${applicant.last_name}`}</Text>
<Text>{applicant.role}</Text>
<Text>PERSONAL MESSAGE FROM APPLICANT</Text>
<Text
style={styles.applicantMessage}
>{`here is a personal message from ${applicant.first_name} about their application for this project and expressing their interest`}</Text>
</View>
</TouchableOpacity>
))}
{!loadMore && applicants.length > 3 && (
<Button title="Load more..." onPress={() => handleToggle(toggleLoadMore)} />
<View style={styles.buttonContainer}>
<Button title="Load more..." onPress={() => handleToggle(toggleLoadMore)} />
</View>
)}
</View>
);
} else {
return <Text>Loading or no applicants.</Text>;
}
};

const styles = StyleSheet.create({
applicantInfo: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 10,
marginBottom: 10,
paddingLeft: 15,
paddingRight: 15,
},
applicantMessage: {
textAlign: 'justify',
paddingRight: 25,
paddingLeft: 30,
},
boldText: {
fontWeight: 'bold',
},
buttonContainer: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
paddingLeft: 10,
},
largerText: {
fontSize: 16,
},
});