@@ -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 | |||||
}) | |||||
} |