| @@ -22,6 +22,7 @@ import { Login } from "./components/auth/Login"; | |||||
| import { Signup } from "./components/auth/Signup"; | import { Signup } from "./components/auth/Signup"; | ||||
| export const SERVER_URL = 'http://localhost:8001'; | export const SERVER_URL = 'http://localhost:8001'; | ||||
| export const API_TOKEN = { "Authorization": `Bearer ${localStorage.anamnesisToken}` } | |||||
| export var userProfileData: IProfile = { | export var userProfileData: IProfile = { | ||||
| @@ -4,15 +4,8 @@ import { ReactComponent as LogoIcon } from '../../assets/icons/anamnesis.svg'; | |||||
| import { ReactComponent as EyeOffIcon } from '../../assets/icons/eye-off-outline.svg'; | import { ReactComponent as EyeOffIcon } from '../../assets/icons/eye-off-outline.svg'; | ||||
| import { ReactComponent as EyeIcon } from '../../assets/icons/eye-outline.svg'; | import { ReactComponent as EyeIcon } from '../../assets/icons/eye-outline.svg'; | ||||
| import { NavLink } from "react-router-dom"; | import { NavLink } from "react-router-dom"; | ||||
| import axios from 'axios'; | |||||
| import { SERVER_URL } from "../../App"; | |||||
| export const authenticateCredentials = async (username: string, password: string) => { | |||||
| return await axios.post(SERVER_URL + '/auth/api-auth/', { | |||||
| email: username, | |||||
| password: password | |||||
| }); | |||||
| } | |||||
| import { authenticateCredentials } from "../../services/auth"; | |||||
| export const Login: React.FC = () => { | export const Login: React.FC = () => { | ||||
| const [showPassowrd, setShowPassword] = useState<boolean>(true); | const [showPassowrd, setShowPassword] = useState<boolean>(true); | ||||
| @@ -6,7 +6,8 @@ import { ReactComponent as EyeIcon } from '../../assets/icons/eye-outline.svg'; | |||||
| import { NavLink } from "react-router-dom"; | import { NavLink } from "react-router-dom"; | ||||
| import axios from 'axios'; | import axios from 'axios'; | ||||
| import { SERVER_URL } from "../../App"; | import { SERVER_URL } from "../../App"; | ||||
| import { authenticateCredentials } from "./Login"; | |||||
| import { authenticateCredentials } from "../../services/auth"; | |||||
| const registerUser = async (name: string, username: string, password: string) => { | const registerUser = async (name: string, username: string, password: string) => { | ||||
| @@ -16,11 +16,27 @@ import { NavLink } from "react-router-dom"; | |||||
| import { AddCategory } from "../add-category/AddCategory"; | import { AddCategory } from "../add-category/AddCategory"; | ||||
| import { useHistory } from "react-router-dom"; | import { useHistory } from "react-router-dom"; | ||||
| import { userProfileData } from "../../App"; | import { userProfileData } from "../../App"; | ||||
| import { addCategory, getCategory, updateCategory } from "../../services/category"; | |||||
| import { getUserProfile } from "../../services/user"; | |||||
| import { getWordResult } from "../../services/words"; | |||||
| export const Home: React.FC = () => { | export const Home: React.FC = () => { | ||||
| const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState<Boolean>(false); | const [isAddCategoryPopupOpen, setAddCategoryPopupState] = useState<Boolean>(false); | ||||
| const history = useHistory(); | const history = useHistory(); | ||||
| getUserProfile().then((data) => { | |||||
| console.log("UserProfile", data) | |||||
| }, (err) => { | |||||
| console.log(err) | |||||
| }) | |||||
| getWordResult('Ple').then((data) => { | |||||
| console.log("Words", data.data) | |||||
| }, (err) => { | |||||
| console.log(err) | |||||
| }) | |||||
| return <section className="page"> | return <section className="page"> | ||||
| <header className={styles.pageHeader}> | <header className={styles.pageHeader}> | ||||
| @@ -28,8 +44,8 @@ export const Home: React.FC = () => { | |||||
| </header> | </header> | ||||
| <section className={styles.upfold}> | <section className={styles.upfold}> | ||||
| <div className={styles.profileImage}> | |||||
| <CircularProgressbar value={70} strokeWidth={4} | |||||
| <div className={styles.profileImage}> | |||||
| <CircularProgressbar value={70} strokeWidth={4} | |||||
| styles={{ | styles={{ | ||||
| path: { | path: { | ||||
| stroke: '#d45b63', | stroke: '#d45b63', | ||||
| @@ -38,11 +54,12 @@ export const Home: React.FC = () => { | |||||
| trail: { | trail: { | ||||
| stroke: 'rgba(255, 255, 255, 0)', | stroke: 'rgba(255, 255, 255, 0)', | ||||
| strokeLinecap: 'round', | strokeLinecap: 'round', | ||||
| }} | |||||
| } | |||||
| } | |||||
| } /> | } /> | ||||
| {/* eslint-disable-next-line */} | {/* eslint-disable-next-line */} | ||||
| <img src="https://www.lakecountyin.org/images/user-icon-placeholder.png" alt="profile-image" /> | <img src="https://www.lakecountyin.org/images/user-icon-placeholder.png" alt="profile-image" /> | ||||
| { userProfileData.medal.icon } | |||||
| {userProfileData.medal.icon} | |||||
| </div> | </div> | ||||
| <div className={styles.userDetails}> | <div className={styles.userDetails}> | ||||
| <h2> Neymar Junior </h2> | <h2> Neymar Junior </h2> | ||||
| @@ -114,13 +131,13 @@ export const Home: React.FC = () => { | |||||
| </NavLink> | </NavLink> | ||||
| </header> | </header> | ||||
| <ul> | <ul> | ||||
| { userProfileData.categories.map((category, categoryIndex) => { | |||||
| {userProfileData.categories.map((category, categoryIndex) => { | |||||
| return category.shelves.map((shelf, shelfIndex) => { | return category.shelves.map((shelf, shelfIndex) => { | ||||
| return <li key={shelf.name} onClick={ () => { | |||||
| return <li key={shelf.name} onClick={() => { | |||||
| history.push('/shelf-details/category_id=' + categoryIndex + '&&shelf_id=' + shelfIndex); | history.push('/shelf-details/category_id=' + categoryIndex + '&&shelf_id=' + shelfIndex); | ||||
| } }> | |||||
| }}> | |||||
| <div className={styles.progress}> | <div className={styles.progress}> | ||||
| <CircularProgressbar value={shelf.words.length > 0 ? (shelf.revisedWords.length * 100/ shelf.words.length) : 0} strokeWidth={7} | |||||
| <CircularProgressbar value={shelf.words.length > 0 ? (shelf.revisedWords.length * 100 / shelf.words.length) : 0} strokeWidth={7} | |||||
| styles={{ | styles={{ | ||||
| path: { | path: { | ||||
| stroke: 'white', | stroke: 'white', | ||||
| @@ -129,17 +146,18 @@ export const Home: React.FC = () => { | |||||
| trail: { | trail: { | ||||
| stroke: 'rgba(255, 255, 255, 0.25)', | stroke: 'rgba(255, 255, 255, 0.25)', | ||||
| strokeLinecap: 'round', | strokeLinecap: 'round', | ||||
| }} | |||||
| } | |||||
| } | |||||
| } /> | } /> | ||||
| <span className={styles.text}> { shelf.words.length > 0 ? (shelf.revisedWords.length * 100/ shelf.words.length) : 0 }% </span> | |||||
| <span className={styles.text}> {shelf.words.length > 0 ? (shelf.revisedWords.length * 100 / shelf.words.length) : 0}% </span> | |||||
| </div> | </div> | ||||
| <h5> { shelf.name } </h5> | |||||
| <p> { shelf.words.length } words </p> | |||||
| <p> { category.name } </p> | |||||
| <h5> {shelf.name} </h5> | |||||
| <p> {shelf.words.length} words </p> | |||||
| <p> {category.name} </p> | |||||
| </li> | </li> | ||||
| }) | }) | ||||
| }) } | |||||
| })} | |||||
| </ul> | </ul> | ||||
| </section> | </section> | ||||
| @@ -157,22 +175,22 @@ export const Home: React.FC = () => { | |||||
| </button> | </button> | ||||
| </header> | </header> | ||||
| <ul> | <ul> | ||||
| { userProfileData.categories.map((category, index) => { | |||||
| {userProfileData.categories.map((category, index) => { | |||||
| return <li key={category.name} onClick={() => { | return <li key={category.name} onClick={() => { | ||||
| history.push('/category-details/category_id=' + index); | history.push('/category-details/category_id=' + index); | ||||
| }}> | }}> | ||||
| <div className={styles.icon}> | <div className={styles.icon}> | ||||
| { category.icon } | |||||
| {category.icon} | |||||
| </div> | </div> | ||||
| <div className={styles.info}> | <div className={styles.info}> | ||||
| <label> { category.name } </label> | |||||
| <span> { category.shelves.length } Shelves </span> | |||||
| <label> {category.name} </label> | |||||
| <span> {category.shelves.length} Shelves </span> | |||||
| </div> | </div> | ||||
| </li> | </li> | ||||
| })} | |||||
| })} | |||||
| </ul> | </ul> | ||||
| </section> | </section> | ||||
| { isAddCategoryPopupOpen && <AddCategory hidePopup={() => setAddCategoryPopupState(false)} /> } | |||||
| {isAddCategoryPopupOpen && <AddCategory hidePopup={() => setAddCategoryPopupState(false)} />} | |||||
| </section> | </section> | ||||
| } | } | ||||
| @@ -0,0 +1,9 @@ | |||||
| import axios from "axios"; | |||||
| import { SERVER_URL } from "../App"; | |||||
| export const authenticateCredentials = async (username: string, password: string) => { | |||||
| return await axios.post(SERVER_URL + '/auth/api-auth/', { | |||||
| email: username, | |||||
| password: password | |||||
| }); | |||||
| } | |||||
| @@ -0,0 +1,31 @@ | |||||
| import axios from "axios"; | |||||
| import { API_TOKEN, SERVER_URL } from "../App"; | |||||
| export const addCategory = async (name: string) => { | |||||
| return await axios.post(SERVER_URL + '/category/add/', | |||||
| { name: name }, | |||||
| { | |||||
| headers: API_TOKEN, | |||||
| } | |||||
| ) | |||||
| } | |||||
| //Need to be changed | |||||
| export const getCategory = async (id: string) => { | |||||
| return await axios.get(SERVER_URL + '/category/details/', { | |||||
| params: { _id: id }, | |||||
| headers: API_TOKEN | |||||
| }) | |||||
| } | |||||
| export const updateCategory = async (id: string, name: string) => { | |||||
| return await axios.put(SERVER_URL + '/category/update/', | |||||
| { | |||||
| _id: id, | |||||
| name: name | |||||
| }, | |||||
| { | |||||
| headers: API_TOKEN | |||||
| }) | |||||
| } | |||||
| @@ -0,0 +1,22 @@ | |||||
| import axios from "axios"; | |||||
| import { API_TOKEN, SERVER_URL } from "../App"; | |||||
| export const updateRecollectionQuestion = async (shelfId: string, wordId: string, wasRecallSuccessful: boolean) => { | |||||
| return await axios.post(SERVER_URL + '/recollection/update/', | |||||
| { | |||||
| shelfId: shelfId, | |||||
| wordId: wordId, | |||||
| wasRecallSuccessful: wasRecallSuccessful | |||||
| }, | |||||
| { | |||||
| headers: API_TOKEN | |||||
| }) | |||||
| } | |||||
| export const recollectionQuestions = async () => { | |||||
| return await axios.get(SERVER_URL + '/recollection/questions/', | |||||
| { | |||||
| headers: API_TOKEN | |||||
| }) | |||||
| } | |||||
| @@ -0,0 +1,40 @@ | |||||
| import axios from "axios"; | |||||
| import { API_TOKEN, SERVER_URL } from "../App"; | |||||
| export const getAllShelf = async (categoryId: string) => { | |||||
| return await axios.get(SERVER_URL + '/shelf/details/?_id=' + { categoryId: categoryId }, | |||||
| { | |||||
| headers: API_TOKEN | |||||
| }) | |||||
| } | |||||
| export const addShelf = async (categoryId: string, name: string) => { | |||||
| return await axios.post(SERVER_URL + '/shelf/add/', | |||||
| { | |||||
| categoryId: categoryId, | |||||
| name: name | |||||
| }, | |||||
| { | |||||
| headers: API_TOKEN | |||||
| }) | |||||
| } | |||||
| //Need to be discussed | |||||
| export const updateShelf = async (id: string, word: string, isArchived: boolean, spaceBetweenRecall: number) => { | |||||
| return await axios.put(SERVER_URL + '/shelf/update/', | |||||
| { | |||||
| id: id, | |||||
| words: [{ | |||||
| word: word, | |||||
| notes: [], | |||||
| isArchived: isArchived, | |||||
| spaceBetweenRecall: spaceBetweenRecall | |||||
| }] | |||||
| }, | |||||
| { | |||||
| headers: API_TOKEN | |||||
| }) | |||||
| } | |||||
| @@ -0,0 +1,9 @@ | |||||
| import axios from "axios"; | |||||
| import { SERVER_URL, API_TOKEN } from "../App"; | |||||
| export const getUserProfile = async() =>{ | |||||
| return await axios.get(SERVER_URL + '/user/profile/', | |||||
| { | |||||
| headers: API_TOKEN | |||||
| }) | |||||
| } | |||||
| @@ -0,0 +1,33 @@ | |||||
| import axios from "axios"; | |||||
| import { SERVER_URL, API_TOKEN } from "../App"; | |||||
| export const getWordResult = async (name: string) => { | |||||
| return await axios.get(SERVER_URL + '/library/search/', { | |||||
| params: { name: name }, | |||||
| headers: API_TOKEN | |||||
| }) | |||||
| } | |||||
| export const getAllWords = async () => { | |||||
| return await axios.get(SERVER_URL + '/library/all/', | |||||
| { | |||||
| headers: API_TOKEN | |||||
| }) | |||||
| } | |||||
| export const addFavouriteWord = async (wordId: string) => { | |||||
| return await axios.post(SERVER_URL + '/user/favourite-words/', | |||||
| { wordId: wordId }, | |||||
| { | |||||
| headers: API_TOKEN | |||||
| }) | |||||
| } | |||||
| export const updateFavouriteWord = async (favouriteWords: Array<string>) => { | |||||
| return await axios.put(SERVER_URL + '/user/favourite-words/', | |||||
| { favouriteWords: favouriteWords }, | |||||
| { | |||||
| headers: API_TOKEN | |||||
| }) | |||||
| } | |||||