Skip to content

Commit

Permalink
Merge pull request #6 from TharindaPrabhath/frontend-day-09-stepper
Browse files Browse the repository at this point in the history 
Frontend day 09 stepper
  • Loading branch information
@TharindaPrabhath
TharindaPrabhath authored Sep 25, 2021
2 parents 3d61ac4 + 5500388 commit c864c8a
Show file tree
Hide file tree
Showing 10 changed files with 279 additions and 143 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"recharts": "^2.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"swr": "^1.0.1",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1",
"yup": "^0.32.9"
Expand Down
4 changes: 3 additions & 1 deletion src/components/Certificate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@ const Certificate = ({
</h5>
<h5 className="verification-web-site">
Verify the authenticity of the certificate at:
<span> www.certify.com/certificate/verify</span>
<span>
{` https://symetry-certify-frontend.herokuapp.com/certificate/verify`}
</span>
</h5>
</div>
</div>
Expand Down
32 changes: 22 additions & 10 deletions src/components/CertificateTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@ import colors from "../data/colors";
import moment from "moment";
import useLocalStorage from "../utils/useLocalStorage";
import useBadge from "../utils/useBadge";
import useSWR from "swr";
import requests from "../data/requests";
import axios from "../utils/axios";
import useAxios from "../utils/axios";

const getRow = (
certificateId: string,
Expand Down Expand Up @@ -58,16 +62,24 @@ const CertificateTable = () => {
const history = useHistory();
const { getAdmin } = useLocalStorage();
const { CertificateCategoryBadge } = useBadge();
const axios = useAxios();

useEffect(() => {
fetchCertificates()
.then((res) => {
setCertficates(toCertificateTableData(res.data));
})
.catch((err) => {
console.error(err);
});
}, []);
const { data } = useSWR(requests.fetchCertificates, (url: string) =>
axios
.get(url)
.then((r) => toCertificateTableData(r.data))
.catch((err) => console.error(err))
);

// useEffect(() => {
// fetchCertificates()
// .then((res) => {
// setCertficates(toCertificateTableData(res.data));
// })
// .catch((err) => {
// console.error(err);
// });
// }, []);

type CertificateTableRow = {
id: string;
Expand Down Expand Up @@ -235,7 +247,7 @@ const CertificateTable = () => {
}}
>
<DataGrid
rows={certificates}
rows={data || []}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
Expand Down
119 changes: 70 additions & 49 deletions src/components/UserProfile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
Tabs,
Tab,
AppBar,
CircularProgress,
} from "@material-ui/core";
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router";
Expand All @@ -25,21 +26,38 @@ interface UserProfileProps {
id: number;
}

const Loading = () => {
return (
<div
style={{
marginLeft: "45%",
marginTop: "30%",
}}
>
<CircularProgress />
<p>Loading</p>
</div>
);
};

const UserProfile: React.FC<UserProfileProps> = ({ open, onClose, id }) => {
const [user, setUser] = useState<UserDto>();
const [certificates, setCertificates] = useState<CertificateDto[]>();
const [selectedTab, setSelectedTab] = useState<number>(0);
const { VerifiedBadge, CertifiedBadge } = useBadge();
const [loading, setLoading] = useState(false);

useEffect(() => {
if (open) {
setLoading(true);
fetchUser(id)
.then((res) => {
setUser(res.data);
})
.catch((err) => {
console.error(err);
});
})
.finally(() => setLoading(false));

fetchCertificatesByUser(id)
.then((res) => {
Expand Down Expand Up @@ -74,58 +92,61 @@ const UserProfile: React.FC<UserProfileProps> = ({ open, onClose, id }) => {
</AppBar>

<div className="user-profile-dialog__body">
{selectedTab === 0 && (
<div className="user-profile-dialog__info">
<section className="info__badges-container">
<h5>Badges</h5>
<div className="badges">
<VerifiedBadge verified={user?.emailVerified!} />
<CertifiedBadge certified={user?.certified!} />
</div>
</section>

<section className="info__info-container">
<div className="set-1">
<div className="set__left-col">
<p className="key">First Name</p>
<p className="key">Last Name</p>
<p className="key">Role</p>
<p className="key">Birthday</p>
<p className="key">Email</p>
<p className="key">Phone</p>
</div>
<div className="set__right-col">
<p className="value">{user?.fname}</p>
<p className="value">{user?.lname}</p>
<p className="value">{user?.role}</p>
<p className="value">{user?.birthday}</p>
<p className="value">{user?.email}</p>
<p className="value">{user?.phone}</p>
{selectedTab === 0 &&
(!loading ? (
<div className="user-profile-dialog__info">
<section className="info__badges-container">
<h5>Badges</h5>
<div className="badges">
<VerifiedBadge verified={user?.emailVerified!} />
<CertifiedBadge certified={user?.certified!} />
</div>
</div>
</section>

<div className="set-2">
{user?.address && (
<div className="descriptive-section">
<p className="key">Address</p>
<p className="descriptive-section__value">
{user?.address}
</p>
<section className="info__info-container">
<div className="set-1">
<div className="set__left-col">
<p className="key">First Name</p>
<p className="key">Last Name</p>
<p className="key">Role</p>
<p className="key">Birthday</p>
<p className="key">Email</p>
<p className="key">Phone</p>
</div>
)}

{user?.description && (
<div className="descriptive-section">
<p className="key">Description</p>
<p className="descriptive-section__value">
{user?.description}
</p>
<div className="set__right-col">
<p className="value">{user?.fname}</p>
<p className="value">{user?.lname}</p>
<p className="value">{user?.role}</p>
<p className="value">{user?.birthday}</p>
<p className="value">{user?.email}</p>
<p className="value">{user?.phone}</p>
</div>
)}
</div>
</section>
</div>
)}
</div>

<div className="set-2">
{user?.address && (
<div className="descriptive-section">
<p className="key">Address</p>
<p className="descriptive-section__value">
{user?.address}
</p>
</div>
)}

{user?.description && (
<div className="descriptive-section">
<p className="key">Description</p>
<p className="descriptive-section__value">
{user?.description}
</p>
</div>
)}
</div>
</section>
</div>
) : (
<Loading />
))}
{selectedTab === 1 && (
<div className="user-profile-dialog__certificates">
{certificates?.length !== 0 ? (
Expand Down
39 changes: 25 additions & 14 deletions src/components/UserTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
import UserProfile from "./UserProfile";
import useLocalStorage from "../utils/useLocalStorage";
import useBadge from "../utils/useBadge";
import useSWR from "swr";
import requests from "../data/requests";
import useAxios from "../utils/axios";

const getRow = (
id: string,
Expand Down Expand Up @@ -57,7 +60,7 @@ const rows = [
];

const UserTable = () => {
const [users, setUsers] = useState<UserDto[]>([]);
//const [users, setUsers] = useState<UserDto[]>([]);
const [selectedUserId, setSelectedUserId] = useState<number>();
const [redirect, setRedirect] = useState<boolean>(false);
const [openConfirmBox, setOpenConfirmBox] = useState<boolean>(false);
Expand All @@ -72,27 +75,35 @@ const UserTable = () => {
const [openUserProfile, setOpenUserProfile] = useState<boolean>(false);
const { getAdmin } = useLocalStorage();
const { StatusBadge } = useBadge();
const axios = useAxios();

useEffect(() => {
fetchUsers()
.then((res) => {
setUsers(toUserDtos(res.data));
})
.catch((err) => {
console.error(err);
});
}, []);
const { data: users } = useSWR(requests.fetchUsers, (url: string) =>
axios
.get(url)
.then((r) => toUserDtos(r.data))
.catch((err) => console.error(err))
);

// useEffect(() => {
// fetchUsers()
// .then((res) => {
// setUsers(toUserDtos(res.data));
// })
// .catch((err) => {
// console.error(err);
// });
// }, []);

const handleViewClick = (event: React.MouseEvent<unknown>, id: number) => {
// set current user in redux store
setUser(users.find((u) => u.id === id)!);
setUser(users?.find((u) => u.id === id)!);
setSelectedUserId(id);
setOpenUserProfile(true);
};

const handleEditClick = (event: React.MouseEvent<unknown>, id: number) => {
// set current user in redux store
setUser(users.find((u) => u.id === id)!);
setUser(users?.find((u) => u.id === id)!);

setSelectedUserId(id);
setRedirect(true);
Expand All @@ -110,7 +121,7 @@ const UserTable = () => {
});

// removing the item from the table
setUsers(users.filter((u) => u.id !== id));
//setUsers(users.filter((u) => u.id !== id));

// if the deleted user is the current user in redux store. delete it
if (currentUser?.id === id) removeUser();
Expand Down Expand Up @@ -225,7 +236,7 @@ const UserTable = () => {
}}
>
<DataGrid
rows={users}
rows={users || []}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
Expand Down
50 changes: 37 additions & 13 deletions src/screens/Activity.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@ import ActivityDto from "../types/models/ActivityDto";
import { fetchActivities } from "../utils/requestHelper";
import useLocalStorage from "../utils/useLocalStorage";

import { bindActionCreators } from "redux";
import { actionCreators } from "../redux";
import { useDispatch } from "react-redux";

import useSWR from "swr";
import requests from "../data/requests";
import useAxios from "../utils/axios";

import "./Activity.css";

export interface ActivityWrapper {
Expand All @@ -18,20 +26,36 @@ export interface ActivityWrapper {

const Activity = () => {
const { getAdmin } = useLocalStorage();
const dispatch = useDispatch();
const { setLoading } = bindActionCreators(actionCreators, dispatch);
const axios = useAxios();

//const [activities, setActivities] = useState<ActivityWrapper>();

const { data: activities } = useSWR(requests.fetchActivities, (url: string) =>
axios
.get(url, {
params: {
admin_id: getAdmin().id,
},
})
.then((r) => r.data)
.catch((err) => console.error(err))
);

const [activities, setActivities] = useState<ActivityWrapper>();

useEffect(() => {
if (getAdmin().id !== null) {
fetchActivities(parseInt(getAdmin().id!))
.then((res) => {
setActivities(res.data);
})
.catch((err) => {
console.error(err);
});
}
}, []);
// useEffect(() => {
// if (getAdmin().id !== null) {
// setLoading(true);
// fetchActivities(parseInt(getAdmin().id!))
// .then((res) => {
// setActivities(res.data);
// })
// .catch((err) => {
// console.error(err);
// })
// .finally(() => setLoading(false));
// }
// }, []);

return (
<div className="activity-screen">
Expand Down
Loading

0 comments on commit c864c8a

Please sign in to comment.