Merge commit '958e62d733e19813e76a2f9d5d49d46ac1eebbc2' into feature/initial_frontend

App.tsx

@@ -10,6 +10,9 @@ import UserInfo from "./src/Routes/UserInfo/UserInfo";
 import AddNote from "./src/Routes/AddNote/AddNote";
 import Login from "./src/Routes/Login/Login";
 import Register from "./src/Routes/Register/Register";
+import { Provider } from "react-redux";
+import Store from "./src/Features/Redux/Store/Store";
+import { QueryClient, QueryClientProvider } from "react-query";
 
 
 const Drawer = createDrawerNavigator();
@@ -17,6 +20,7 @@ const Drawer = createDrawerNavigator();
 
 export default function App() {
   return (
+  <Provider store={Store}>
     <NavigationContainer>
       <Drawer.Navigator
         initialRouteName="Home"
@@ -31,5 +35,6 @@ export default function App() {
         
       </Drawer.Navigator>
     </NavigationContainer>
+  </Provider>
   );
 }

package.json

@@ -9,15 +9,20 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@expo/webpack-config": "^18.0.1",
+    "@react-native-async-storage/async-storage": "^1.18.1",
     "@react-navigation/drawer": "^6.6.2",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/native-stack": "^6.9.12",
     "@react-navigation/stack": "^6.3.16",
+    "@reduxjs/toolkit": "^1.9.3",
+    "axios": "^1.3.4",
     "expo": "~48.0.5",
     "expo-linear-gradient": "^12.1.1",
     "expo-status-bar": "~1.4.4",
     "react": "18.2.0",
-    "react-native": "0.71.3",
+    "react-dom": "18.2.0",
+    "react-native": "0.71.6",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-paper": "^5.4.0",
     "react-native-pell-rich-editor": "^1.8.8",
@@ -25,11 +30,16 @@
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
     "react-native-svg": "13.4.0",
-    "react-native-webview": "^11.26.1"
+    "react-native-webview": "^11.26.1",
+    "react-native-web": "~0.18.10",
+    "react-query": "^3.39.3",
+    "react-redux": "^8.0.5",
+    "redux": "^4.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@types/react": "~18.0.14",
+    "@types/react-native": "^0.71.5",
     "typescript": "^4.9.4"
   },
   "private": true

src/Components/Api/Api.tsx

@@ -0,0 +1,142 @@
+import axios from "axios";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import {
+  ActivationParams,
+  UpdateNoteParams,
+  AddNoteParams,
+  LoginParams,
+  RegistrationParams,
+} from "../../Interfaces/Interfaces";
+
+// Note APIs
+
+const instance = axios.create({
+  baseURL: "https://keannu126.pythonanywhere.com",
+});
+
+export async function GetNotes() {
+  const token = JSON.parse(await AsyncStorage.getItem("token") || "{}");
+  return instance
+    .get("/api/v1/notes/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    });
+}
+
+export function GetPublicNotes() {
+  return instance.get("/api/v1/public_notes/").then((response) => {
+    return response.data;
+  });
+}
+
+export async function GetNote(id: number) {
+  const token = JSON.parse(await AsyncStorage.getItem("token") || "{}");
+  return instance
+    .get("/api/v1/notes/" + id + "/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    });
+}
+
+export async function UpdateNote(note: UpdateNoteParams) {
+  const token = JSON.parse(await AsyncStorage.getItem("token") || "{}");
+  return instance
+    .patch("/api/v1/notes/" + note.id + "/", note, {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      return error;
+    });
+}
+
+export async function AddNote(note: AddNoteParams) {
+  const token = JSON.parse(await AsyncStorage.getItem("token") || "{}");
+  return instance
+    .post("/api/v1/notes/", note, {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      return error;
+    });
+}
+
+export async function DeleteNote(id: number) {
+  const token = JSON.parse(await AsyncStorage.getItem("token") || "{}");
+  return instance
+    .delete("/api/v1/notes/" + id + "/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .catch((error) => {
+      return error;
+    });
+}
+
+// User APIs
+
+export function UserRegister(register: RegistrationParams) {
+  return instance
+    .post("/api/v1/accounts/users/", register)
+    .then(async (response) => {
+      return true;
+    })
+    .catch((error) => {
+      return false;
+    });
+}
+
+export function UserLogin(user: LoginParams) {
+  return instance
+    .post("/api/v1/accounts/token/login/", user)
+    .then(async (response) => {
+      AsyncStorage.setItem("token", JSON.stringify(response.data.auth_token));
+      return true;
+    })
+    .catch((error) => {
+      console.log("Login Failed: " + error);
+      return false;
+    });
+}
+
+export async function UserInfo() {
+  const token = JSON.parse(await AsyncStorage.getItem("token") || "{}");
+  return instance
+    .get("/api/v1/accounts/users/me/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    });
+}
+
+export function UserActivate(activation: ActivationParams) {
+  return instance
+    .post("/api/v1/accounts/users/activation/", activation)
+    .then(async (response) => {
+      return true;
+    })
+    .catch((error) => {
+      return false;
+    });
+}

src/Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice.tsx

@@ -0,0 +1,33 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const LoggedInUserSlice = createSlice({
+  name: "Login",
+  initialState: {
+    value: {
+      email: "",
+      id: 0,
+      username: "",
+    },
+  },
+  reducers: {
+    SetUser: (state, action) => {
+      state.value = {
+        email: action.payload.email,
+        id: action.payload.id,
+        username: action.payload.username,
+      };
+    },
+    UnsetUser: (state) => {
+      state.value = {
+        email: "",
+        id: 0,
+        username: "",
+      };
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { SetUser, UnsetUser } = LoggedInUserSlice.actions;
+
+export default LoggedInUserSlice.reducer;

src/Features/Redux/Slices/LoginSlice/LoginSlice.tsx

@@ -0,0 +1,21 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const LoginSlice = createSlice({
+  name: "Login",
+  initialState: {
+    logged_in: false,
+  },
+  reducers: {
+    SetLoggedIn: (state) => {
+      state.logged_in = !state.logged_in;
+    },
+    SetLoggedOut: (state) => {
+      state.logged_in = !state.logged_in;
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { SetLoggedIn, SetLoggedOut } = LoginSlice.actions;
+
+export default LoginSlice.reducer;

src/Features/Redux/Store/Store.tsx

@@ -0,0 +1,10 @@
+import { configureStore } from "@reduxjs/toolkit";
+import LoginReducer from "../Slices/LoginSlice/LoginSlice";
+import LoggedInUserReucer from "../Slices/LoggedInUserSlice/LoggedInUserSlice";
+
+export default configureStore({
+  reducer: {
+    Login: LoginReducer,
+    LoggedInUser: LoggedInUserReucer,
+  },
+});

src/Interfaces/Interfaces.tsx

@@ -6,3 +6,62 @@ export interface IconProps {
 export interface RootDrawerParamList {
   navigate: any;
 }
+
+// Redux Interfaces
+export interface LoginState {
+  Login: { logged_in: boolean };
+}
+
+export interface LoggedInUserState {
+  LoggedInUser: {
+    value: {
+      email: string;
+      id: number;
+      username: string;
+    };
+  };
+}
+
+// Component Props Interfaces
+
+export interface NoteProps {
+  title: string;
+  content: string;
+  id: number;
+  date_created: Date;
+  owner: string;
+}
+
+export interface IconProps {
+  size: number;
+  color: string;
+}
+
+// API Interfaces
+
+export interface RegistrationParams {
+  email: string;
+  username: string;
+  password: string;
+}
+
+export interface LoginParams {
+  username: string;
+  password: string;
+}
+
+export interface ActivationParams {
+  uid: string;
+  token: string;
+}
+
+export interface AddNoteParams {
+  title: string;
+  content: string;
+}
+
+export interface UpdateNoteParams {
+  id: number;
+  title: string;
+  content: string;
+}

src/Routes/Home/Home.tsx

@@ -1,34 +1,40 @@
-import * as React from 'react';
-import {View, Text} from 'react-native';
-import styles from '../../styles';
-import Background from '../../Components/Background/Background';
+import * as React from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import styles from "../../styles";
+import Background from "../../Components/Background/Background";
+import AppIcon from "../../Components/Icons/AppIcon/AppIcon";
 import { useNavigation } from "@react-navigation/native";
-import {TouchableOpacity,} from "react-native";
+import { useDispatch } from "react-redux";
 import { RootDrawerParamList } from "../../Interfaces/Interfaces";
 
 export default function Home() {
-    const navigation = useNavigation<RootDrawerParamList>();
+  const navigation = useNavigation<RootDrawerParamList>();
 
+  const dispatch = useDispatch();
   return (
     <Background>
-      <Text style={{...styles.text_white, ...{fontSize: 25}}}>Clip Notes</Text>
+      <Text style={{ ...styles.text_white, ...{ fontSize: 25 } }}>
+        Clip Notes
+      </Text>
       <View
         style={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}>
-          <View style={styles.homecont}>
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <View style={styles.homecont}>
           <TouchableOpacity
-        onPress={() => {
-          navigation.navigate("Add Note");  
-        }}>
-          <Text style={styles.newnote}>+</Text>
-        </TouchableOpacity>
-        <Text style={styles.no}>New note...</Text>
-      <View style={{margin: 16}} />
-       </View>
+            onPress={() => {
+              navigation.navigate("Add Note");
+            }}
+          >
+            <Text style={styles.newnote}>+</Text>
+          </TouchableOpacity>
+          <Text style={styles.no}>New note...</Text>
+          <View style={{ margin: 16 }} />
+        </View>
       </View>
     </Background>
   );

src/Routes/Login/Login.tsx

@@ -1,61 +1,99 @@
-import * as React from 'react';
-import {View, Text,  TextInput} from 'react-native';
-import styles from '../../styles';
-import Background from '../../Components/Background/Background';
-import { SafeAreaView} from "react-native";
+import * as React from "react";
+import { View, Text, TextInput } from "react-native";
+import styles from "../../styles";
+import Background from "../../Components/Background/Background";
+import {
+  SafeAreaView,
+  NativeSyntheticEvent,
+  TextInputChangeEventData,
+} from "react-native";
 import { StatusBar } from "expo-status-bar";
 import { useState } from "react";
-import {TouchableOpacity,} from "react-native";
+import { TouchableOpacity } from "react-native";
+import {
+  NavigationHelpersContext,
+  useNavigation,
+} from "@react-navigation/native";
+import { useDispatch } from "react-redux";
+import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
+import { SetLoggedIn } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
+import { UserInfo, UserLogin } from "../../Components/Api/Api";
 import { RootDrawerParamList } from "../../Interfaces/Interfaces";
-import { useNavigation } from "@react-navigation/native";
 
 export default function Login() {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-
   const navigation = useNavigation<RootDrawerParamList>();
+  const dispatch = useDispatch();
+  const [user, setUser] = useState({
+    username: "",
+    password: "",
+  });
+  const [error, setError] = useState("");
   return (
     <Background>
-       <Text style={{...styles.text_white, ...{fontSize: 32}}}></Text>
+      <Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}></Text>
       <SafeAreaView>
-      <View style={styles.container}> 
-        <Text style ={styles.loginlabel}>Login to Clip Notes</Text>
-      <StatusBar style="auto" />
-      <View style={styles.inputView}>
-        <TextInput 
-            style={styles.TextInput}
-            placeholder="Username"
-            placeholderTextColor="white"
-            onChangeText={setUsername} 
-            value={username}
-          /> 
+        <View style={styles.container}>
+          <Text style={styles.loginlabel}>Login to Clip Notes</Text>
+          <StatusBar style="auto" />
+          <View style={styles.inputView}>
+            <TextInput
+              style={styles.TextInput}
+              placeholder="Username"
+              placeholderTextColor="white"
+              value={user.username}
+              maxLength={20}
+              onChange={(
+                e: NativeSyntheticEvent<TextInputChangeEventData>
+              ): void => {
+                setUser({ ...user, username: e.nativeEvent.text });
+                console.log(user.username);
+              }}
+            />
           </View>
-        <View style={styles.inputView}>
-        <TextInput
-          style={styles.TextInput}
-          placeholder="Password"
-          placeholderTextColor="white"
-          secureTextEntry={true}
-          onChangeText={setPassword} 
-          value={password}
-        />
-      </View>
 
-      <TouchableOpacity>
-        <Text style={styles.forgot_button}>Forgot Password?</Text> 
-      </TouchableOpacity> 
-      <TouchableOpacity style={styles.loginBtn}>
-      <Text style={styles.loginText}>LOGIN</Text>
-      </TouchableOpacity>
-      <TouchableOpacity style={styles.registerbtn}
-      onPress={() => {
-        navigation.navigate("Register");  
-      }}>
-      <Text style={styles.registertext}>REGISTER</Text>
-      </TouchableOpacity>
-      </View>
+          <View style={styles.inputView}>
+            <TextInput
+              style={styles.TextInput}
+              placeholder="Password"
+              placeholderTextColor="white"
+              secureTextEntry={true}
+              value={user.password}
+              onChange={(
+                e: NativeSyntheticEvent<TextInputChangeEventData>
+              ): void => {
+                setUser({ ...user, password: e.nativeEvent.text });
+                console.log(user.password);
+              }}
+            />
+          </View>
+
+          <TouchableOpacity>
+            <Text style={styles.forgot_button}>Forgot Password?</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={async () => {
+              setUser({
+                username: "",
+                password: "",
+              });
+              if (await UserLogin(user)) {
+                await dispatch(SetLoggedIn());
+                await dispatch(SetUser(await UserInfo()));
+                navigation.navigate("Home");
+              } else {
+                setError("Invalid Login");
+              }
+            }}
+            style={styles.loginBtn}
+          >
+            <Text style={styles.loginText}>LOGIN</Text>
+          </TouchableOpacity>
+          <Text style={styles.text_small_red}>{error}</Text>
+          <TouchableOpacity style={styles.registerbtn}>
+            <Text style={styles.registertext}>REGISTER</Text>
+          </TouchableOpacity>
+        </View>
       </SafeAreaView>
     </Background>
-); 
-};
- 
+  );
+}

src/styles.tsx

@@ -1,38 +1,36 @@
-import {StyleSheet} from 'react-native';
-
-
+import { StyleSheet } from "react-native";
 
 const styles = StyleSheet.create({
   background: {
-    height: '100%',
-    width: '100%',
-    backgroundColor:'#002d4d',
-    position: 'absolute',
+    height: "100%",
+    width: "100%",
+    backgroundColor: "#002d4d",
+    position: "absolute",
   },
   text_white: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
+    color: "white",
+    fontWeight: "bold",
+    textAlign: "center",
   },
   button_generic: {
-    justifyContent: 'center',
-    alignSelf: 'center',
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
+    justifyContent: "center",
+    alignSelf: "center",
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
     margin: 8,
     padding: 8,
     borderRadius: 16,
   },
   flex_row: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
   },
   flex_column: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
   },
   input: {
     height: 40,
@@ -48,15 +46,15 @@ const styles = StyleSheet.create({
     marginBottom: 20,
   },
   TextInput: {
-    color: 'white',
+    color: "white",
     height: 50,
     flex: 1,
     padding: 10,
     marginLeft: 5,
   },
   forgot_button: {
-    fontWeight: 'bold',
-    color: 'white',
+    fontWeight: "bold",
+    color: "white",
     height: 30,
     marginBottom: 10,
   },
@@ -77,16 +75,15 @@ const styles = StyleSheet.create({
     marginTop: 40,
     backgroundColor: "orange",
   },
-  loginText:{
-    color: 'white',
-    fontWeight: 'bold',
+  loginText: {
+    color: "white",
+    fontWeight: "bold",
     fontSize: 20,
   },
-  registertext:{
-    color: 'white',
-    fontWeight: 'bold',
+  registertext: {
+    color: "white",
+    fontWeight: "bold",
     fontSize: 20,
-    
   },
   container: {
     marginTop: 30,
@@ -94,37 +91,37 @@ const styles = StyleSheet.create({
     height: 500,
     width: 350,
     borderRadius: 25,
-    backgroundColor: 'blue',
+    backgroundColor: "blue",
     alignItems: "center",
     justifyContent: "center",
   },
-  loginlabel:{
-    fontWeight: 'bold',
+  loginlabel: {
+    fontWeight: "bold",
     fontSize: 25,
     marginBottom: 30,
-    color: 'white',
+    color: "white",
   },
-  box:{
-    width: '100%',
+  box: {
+    width: "100%",
     height: 200,
   },
-  userinfocont:{
+  userinfocont: {
     marginTop: 10,
     marginLeft: 50,
     height: 80,
     width: 300,
     borderRadius: 25,
-    backgroundColor: 'orange',
+    backgroundColor: "orange",
     alignItems: "center",
     justifyContent: "center",
   },
-  userlabel:{
-    fontWeight: 'bold',
+  userlabel: {
+    fontWeight: "bold",
     fontSize: 25,
     marginBottom: 10,
-    color: 'white', 
+    color: "white",
   },
-  addnote:{
+  addnote: {
     marginLeft: 180,
     width: "10%",
     borderRadius: 25,
@@ -133,26 +130,26 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     backgroundColor: "lightgreen",
   },
-  addtext:{
+  addtext: {
     fontSize: 20,
-    color: 'white',
+    color: "white",
   },
-  addnotescont:{
+  addnotescont: {
     marginTop: 20,
     marginLeft: 20,
     height: 200,
     width: 350,
-    backgroundColor: 'blue',
-    alignItems: 'flex-start',
-    justifyContent: 'center',
+    backgroundColor: "blue",
+    alignItems: "flex-start",
+    justifyContent: "center",
   },
   no: {
     fontSize: 20,
-    color: 'white',
+    color: "white",
     marginTop: 20,
-    alignItems: 'center'
+    alignItems: "center",
   },
-  typehere:{
+  typehere: {
     backgroundColor: "black",
     borderRadius: 10,
     width: "75%",
@@ -160,34 +157,34 @@ const styles = StyleSheet.create({
     marginTop: 20,
   },
   typeinput: {
-    color: 'white',
+    color: "white",
     flex: 1,
     paddingBottom: 250,
     marginLeft: 5,
   },
-  title:{
-    color: 'white',
+  title: {
+    color: "white",
     flex: 1,
     marginLeft: 5,
   },
-  tle:{
+  tle: {
     backgroundColor: "black",
     borderRadius: 10,
     width: "80%",
     height: 40,
     marginTop: 20,
   },
-  addnotecont:{
+  addnotecont: {
     marginTop: 30,
     marginLeft: 22,
     height: 500,
     width: 350,
     borderRadius: 25,
-    backgroundColor: '#7cb9e8',
+    backgroundColor: "#7cb9e8",
     alignItems: "center",
     justifyContent: "center",
   },
-  savebtn:{
+  savebtn: {
     width: "40%",
     borderRadius: 25,
     height: 40,
@@ -196,7 +193,7 @@ const styles = StyleSheet.create({
     marginTop: 10,
     backgroundColor: "green",
   },
-  cancelbtn:{
+  cancelbtn: {
     width: "40%",
     borderRadius: 25,
     height: 40,
@@ -205,28 +202,28 @@ const styles = StyleSheet.create({
     marginTop: 10,
     backgroundColor: "green",
   },
-  savenote:{
-    color: 'white',
-    fontWeight: 'bold',
+  savenote: {
+    color: "white",
+    fontWeight: "bold",
     fontSize: 20,
   },
-  cancel:{
-    color: 'white',
-    fontWeight: 'bold',
+  cancel: {
+    color: "white",
+    fontWeight: "bold",
     fontSize: 20,
   },
-  homecont:{
+  homecont: {
     marginTop: 30,
     height: 150,
     width: 350,
     borderRadius: 25,
-    backgroundColor: '#7cb9e8',
+    backgroundColor: "#7cb9e8",
     alignItems: "center",
     justifyContent: "center",
   },
-  newnote:{
-    color: 'white',
-    fontWeight: 'bold',
+  newnote: {
+    color: "white",
+    fontWeight: "bold",
     fontSize: 50,
   },
   //
@@ -238,7 +235,7 @@ const styles = StyleSheet.create({
     width: "60%",
     height: 50,
     marginTop: 50,
-    marginLeft:10,
+    marginLeft: 10,
     justifyContent: "center",
   },
   label: {
@@ -250,7 +247,6 @@ const styles = StyleSheet.create({
   disabledInput: {
     backgroundColor: "white",
     borderRadius: 10,
-    
   },
   editButton: {
     backgroundColor: "green",
@@ -260,19 +256,25 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     marginTop: 20,
-    marginLeft: 20
+    marginLeft: 20,
   },
-  buttonText:{
+  buttonText: {
     color: "white",
   },
-  inputUser:{
+  inputUser: {
     marginLeft: 10,
     height: 40,
     width: "100%",
     color: "black",
     backgroundColor: "white",
     borderRadius: 10,
-  }
+  },
+  text_small_red: {
+    color: "#bc231e",
+    fontSize: 10,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
 });
 
 export default styles;