Skip to content

Commit

Permalink
Merge pull request #169 from COS301-SE-2024/fix/mobile/login-flow
Browse files Browse the repository at this point in the history 
Fix/mobile/login flow
  • Loading branch information
@KamogeloMoeketse
KamogeloMoeketse authored Jul 9, 2024
2 parents 6d96a98 + c7b05cb commit 5ba9c30
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 76 deletions.
63 changes: 17 additions & 46 deletions frontend/occupi-mobile4/screens/Dashboard/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,15 @@ import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-nat
// import { number } from 'zod';

const getRandomNumber = () => {
return Math.floor(Math.random() * 20)+300;
return Math.floor(Math.random() * 20) + 300;
};

const Dashboard = () => {
const colorScheme = useColorScheme();
const [numbers, setNumbers] = useState(Array.from({ length: 15 }, getRandomNumber));
const [isDarkMode, setIsDarkMode] = useState(colorScheme === 'dark');
const [checkedIn, setCheckedIn] = useState(false);
const [name, setName] = useState("User");
const toast = useToast()
useEffect(() => {
const intervalId = setInterval(() => {
Expand All @@ -38,50 +39,22 @@ const Dashboard = () => {
return newNumbers;
});
}, 3000);
// console.log(numbers);
setIsDarkMode(colorScheme === 'dark');
return () => clearInterval(intervalId);
}, [colorScheme]);

useEffect(() => {
const getUserDetails = async () => {
console.log("heree");
try {
const response = await fetch('https://dev.occupi.tech/api/[email protected]')
const data = await response.json();
if (response.ok) {
saveUserData(JSON.stringify(data));
console.log(data);
} else {
console.log(data);
toast.show({
placement: 'top',
render: ({ id }) => {
return (
<Toast nativeID={id} variant="accent" action="error">
<ToastTitle>{data.error.message}</ToastTitle>
</Toast>
);
},
});
}
} catch (error) {
console.error('Error:', error);
toast.show({
placement: 'top',
render: ({ id }) => {
return (
<Toast nativeID={id} variant="accent" action="error">
<ToastTitle>Network Error: {error.message}</ToastTitle>
</Toast>
);
},
});
let result = await SecureStore.getItemAsync('UserData');
console.log(result);
if (result !== undefined) {
let jsonresult = JSON.parse(result);
setName(String(jsonresult?.data?.details?.name));
}
};
getUserDetails();
}, [toast]);
}, []);

const checkIn = () => {
if (checkedIn === false) {
setCheckedIn(true);
Expand Down Expand Up @@ -109,9 +82,7 @@ const Dashboard = () => {
async function saveUserEmail(value) {
await SecureStore.setItemAsync('email', value);
}
async function saveUserData(value) {
await SecureStore.setItemAsync('UserData', value);
}


saveUserEmail('[email protected]');

Expand All @@ -126,7 +97,7 @@ const Dashboard = () => {
<View flexDirection="row" justifyContent="space-between">
<View>
<Text fontSize={wp('5%')} fontWeight="light" color={textColor}>
Hi Sabrina 👋
Hi {name} 👋
</Text>
<Text mt="$4" fontSize={wp('6%')} fontWeight="bold" color={textColor}>
Welcome to Occupi
Expand All @@ -144,7 +115,7 @@ const Dashboard = () => {
<Card flexDirection="row" justifyContent="center" alignItems="center" variant="elevated" mt="$4" style={{ width: wp('43%'), height: hp('12%') }} backgroundColor={cardBackgroundColor} borderRadius={10} >
<Text color={textColor} fontSize={40}>{numbers[0]}</Text>
<View flexDirection="column">
<View flexDirection="row" alignItems="center"><FontAwesome6 name="arrow-trend-up" size={24} color="yellowgreen" /><Text color="yellowgreen"> {numbers[0]/10+5}%</Text></View>
<View flexDirection="row" alignItems="center"><FontAwesome6 name="arrow-trend-up" size={24} color="yellowgreen" /><Text color="yellowgreen"> {numbers[0] / 10 + 5}%</Text></View>
</View>
</Card>
<Card size="lg" variant="elevated" mt="$4" style={{ width: wp('43%'), height: hp('12%') }} backgroundColor={cardBackgroundColor} borderRadius={10} />
Expand All @@ -169,10 +140,10 @@ const Dashboard = () => {
<View>
<Text color={textColor}>Occupancy levels</Text>
<LineChart
withInnerLines={true}
withOuterLines={false}
withVerticalLines={false}
// fromZero={true}
withInnerLines={true}
withOuterLines={false}
withVerticalLines={false}
// fromZero={true}
data={{
labels: ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00"],
datasets: [
Expand All @@ -197,7 +168,7 @@ const Dashboard = () => {
}
]
}}
width={Dimensions.get("window").width -30} // from react-native
width={Dimensions.get("window").width - 30} // from react-native
height={220}
// yAxisLabel=""
// yAxisSuffix="k"
Expand Down
22 changes: 21 additions & 1 deletion frontend/occupi-mobile4/screens/Dashboard/__tests__/Dashboard-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ jest.mock('@gluestack-ui/themed', () => ({
}),
}));

jest.mock('expo-secure-store', () => ({
getItemAsync: jest.fn(),
setItemAsync: jest.fn(),
}));

const renderWithProvider = (component) => {
return render(
<StyledProvider theme={Theme}>
Expand All @@ -26,9 +31,24 @@ describe('Dashboard component', () => {
// expect(tree).toMatchSnapshot();
// });

const mockedData = {
data: {
details: {
name: 'John Doe',
contactNo: '1234567890',
pronouns: 'He/Him',
dob: '1990-01-01T00:00:00Z', // Make sure the format matches your component's expectations
},
email: '[email protected]',
occupiId: 'EMP12345',
},
};

// Mock SecureStore getItemAsync to resolve with the mocked data
require('expo-secure-store').getItemAsync.mockResolvedValueOnce(JSON.stringify(mockedData));

it('renders text correctly', () => {
const { getByText } = renderWithProvider(<Dashboard />);
expect(getByText('Hi Sabrina 👋')).toBeTruthy();
expect(getByText('Welcome to Occupi')).toBeTruthy();
});

Expand Down
73 changes: 52 additions & 21 deletions frontend/occupi-mobile4/screens/Login/SignIn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,19 +85,14 @@ const SignInForm = () => {
console.log('Biometric hardware available:', isBiometricAvailable);
};

const storeData = async (value) => {
try {
await AsyncStorage.setItem('email', value);
} catch (e) {
// saving error
console.log(e);
}
};

async function saveUserData(value) {
async function storeUserData(value) {
await SecureStore.setItemAsync('UserData', value);
}

async function storeToken(value) {
await SecureStore.setItemAsync('Token', value);
}


const handleBiometricSignIn = async () => {
const biometricType = await LocalAuthentication.supportedAuthenticationTypesAsync();
Expand Down Expand Up @@ -160,7 +155,7 @@ const SignInForm = () => {
const onSubmit = async (_data: SignInSchemaType) => {
setLoading(true);
try {
const response = await fetch('https://dev.occupi.tech/auth/login', {
const response = await fetch('https://dev.occupi.tech/auth/login-mobile', {
method: 'POST',
headers: {
Accept: 'application/json',
Expand All @@ -173,16 +168,10 @@ const SignInForm = () => {
credentials: "include"
});
const data = await response.json();
const cookies = response.headers.get('Accept');
// CookieManager.get('https://dev.occupi.tech')
// .then((cookies) => {
// console.log('CookieManager.get =>', cookies);
// });
console.log(cookies);
if (response.ok) {
console.log(data.data.token);
setLoading(false);
storeData(_data.email);
saveUserData(_data.email);
storeToken(data.data.token);
toast.show({
placement: 'top',
render: ({ id }) => {
Expand All @@ -193,6 +182,50 @@ const SignInForm = () => {
);
},
});
try {
let authToken = await SecureStore.getItemAsync('Token');
// console.log(authToken);

const response = await fetch(`https://dev.occupi.tech/api/user-details?email=${_data.email}`, {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'Authorization': `${authToken}`
},
credentials: "include"
});
const data = await response.json();
console.log("here");
if (response.ok) {
storeUserData(JSON.stringify(data));
console.log(`Data of ${_data.email}: `,data);
} else {
console.log(data);
toast.show({
placement: 'top',
render: ({ id }) => {
return (
<Toast nativeID={id} variant="accent" action="error">
<ToastTitle>{data.error.message}</ToastTitle>
</Toast>
);
},
});
}
} catch (error) {
console.error('Error:', error);
toast.show({
placement: 'top',
render: ({ id }) => {
return (
<Toast nativeID={id} variant="accent" action="error">
<ToastTitle>Network Error</ToastTitle>
</Toast>
);
},
});
}
router.replace('/home');
} else {
setLoading(false);
Expand All @@ -210,9 +243,7 @@ const SignInForm = () => {
}
} catch (error) {
console.error('Error:', error);
// setResponse('An error occurred');
}
// }, 3000);
setLoading(false);
};

Expand Down
2 changes: 1 addition & 1 deletion frontend/occupi-mobile4/screens/Login/SplashScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export default function SplashScreen() {
useEffect(() => {
const timer = setTimeout(() => {
setSelectedIndex(1); // Assuming Onboarding1 is at index 1
router.replace('/home'); // Navigate to Onboarding1 screen
router.replace('/login'); // Navigate to Onboarding1 screen
}, 5000); // 8 seconds

return () => clearTimeout(timer); // Clean up timer on component unmount
Expand Down
4 changes: 2 additions & 2 deletions frontend/occupi-mobile4/screens/Settings/Profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,9 @@ const Profile = () => {
useEffect(() => {
const getUserDetails = async () => {
let result = await SecureStore.getItemAsync('UserData');
console.log(result);
console.log("UserData:",result);
// setUserDetails(JSON.parse(result).data);
let jsonresult = JSON.parse(result | "{}");
let jsonresult = JSON.parse(result);
// console.log(jsonresult.data.details.name);
setName(String(jsonresult?.data?.details?.name));
setEmail(String(jsonresult?.data?.email));
Expand Down
9 changes: 4 additions & 5 deletions frontend/occupi-mobile4/screens/Settings/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,25 +26,23 @@ const Settings = () => {
useEffect(() => {
const getUserDetails = async () => {
let result = await SecureStore.getItemAsync('UserData');
// setUserDetails(JSON.parse(result).data);
let jsonresult = JSON.parse(result);
// console.log(jsonresult.data.details.name);
setName(String(jsonresult.data.details.name));
setPosition(String(jsonresult.data.position));
// console.log(JSON.parse(result).data.details.name);
};
getUserDetails();
}, []);

const handleLogout = async () => {
let authToken = await SecureStore.getItemAsync('Token');
try {
const response = await fetch('https://dev.occupi.tech/auth/logout', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': `${authToken}`
},
body: JSON.stringify({}),
credentials: "include"
});
const data = await response.json();
Expand All @@ -53,6 +51,7 @@ const Settings = () => {
alert("logged out siccessfully");
router.replace('/login');
} else {
console.log(data);
alert("unable to logout");
}
} catch (error) {
Expand Down

0 comments on commit 5ba9c30

Please sign in to comment.