upload, view tweets

horizon0708 · May 15, 2021 · 4d99437 · 4d99437
1 parent 08cd215
commit 4d99437
Show file tree

Hide file tree

Showing 20 changed files with 741 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -13,9 +13,11 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "dayjs": "^1.10.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^6.15.5",
+    "react-query": "^3.16.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",

diff --git a/src/App.tsx b/src/App.tsx
@@ -11,10 +11,15 @@ import { AuthProvider } from './contexts/authContext'
 import EditProfilePage from './pages/editProfilePage';
 import { ErrorPage } from './pages/errorPage';
 import { ConfirmEmailPage } from './pages/confirmEmailPage';
+import { ViewProfilePage } from './pages/viewProfilePage';
+import { TweetPage } from './pages/tweetPage'
+import { QueryClient, QueryClientProvider } from 'react-query'
 
+const queryClient = new QueryClient()
 function App() {
   return (
-    <AuthProvider> {/* I've been added! */}
+    <AuthProvider> 
+      <QueryClientProvider client={queryClient}>
       <Router>
         <NavBar />
         <Container maxWidth="sm">
@@ -34,15 +39,19 @@ function App() {
             <Route path="/profile/edit">
               <EditProfilePage />
             </Route>
+            <Route path="/profile">
+              <ViewProfilePage />
+            </Route>
             <Route path="/error">
               <ErrorPage />
             </Route>
             <Route path="/">
-              <HomePage />
+              <TweetPage />
             </Route>
           </Switch>
         </Container>
       </Router>
+      </QueryClientProvider>
     </AuthProvider>
   )
 }

diff --git a/src/api/avatars.ts b/src/api/avatars.ts
@@ -0,0 +1,20 @@
+import { QueryFunction } from "react-query"
+import { AVATAR_BUCKET } from "../constants"
+import { supabaseClient } from "./supabaseClient"
+
+export const fetchAvatar: QueryFunction<string | undefined> = async ({ queryKey }) => {
+    const [_key, path] = queryKey
+    const { data, error } = await supabaseClient.storage
+        .from(AVATAR_BUCKET)
+        .download(path as string)
+
+    if(error) {
+        throw new Error(error.message)
+    }
+
+    if(!data) {
+        return undefined
+    }
+
+    return URL.createObjectURL(data)
+}
diff --git a/src/api/favorites.ts b/src/api/favorites.ts
@@ -0,0 +1,9 @@
+import { QueryFunction } from "react-query/types/core/types"
+import { FAVORITES_TABLE } from "../constants"
+import { supabaseClient } from "./supabaseClient"
+
+export const toggleFavorite: QueryFunction<boolean> = () => {
+
+
+    return true
+}
diff --git a/src/api/tweets.ts b/src/api/tweets.ts
@@ -0,0 +1,72 @@
+import dayjs from 'dayjs';
+import { QueryFunction } from 'react-query';
+import { supabaseClient } from '../api/supabaseClient';
+import { TWEETS_TABLE } from '../constants';
+import { definitions } from './types';
+
+type TweetResponse = {
+    id: number
+    content: string
+    createdAt: string,
+    favorited_users: { id: string, username: string }[]
+    tweet_author: definitions["profiles"] 
+} 
+
+export type Tweet = {
+    id: number
+    isFavorited: boolean
+    favorites: number
+    favoritedBy: definitions["profiles"][]
+    author: definitions["profiles"]
+    createdAt: string
+    content: string
+}
+
+type AddTweetRequestBody = {
+    userId: string
+    content: string
+}
+
+export const fetchTweets: QueryFunction<Tweet[], [string, string | undefined, string | undefined]> = async ({ queryKey }) => {
+    const [_key, loggedInUserId, userIdToFilterTweetsBy] = queryKey
+
+    const query =  userIdToFilterTweetsBy ? 
+        supabaseClient.rpc<TweetResponse>('get_tweets', { u_id: userIdToFilterTweetsBy }) :
+        supabaseClient.rpc<TweetResponse>('get_tweets')
+
+    let { data, error } = await query
+
+    if(error) {
+        throw new Error(error.message);
+    } 
+    if(!data) {
+        return []
+    }
+
+    return data.map(fromResponseToTweet(loggedInUserId as string | undefined))
+}
+
+const fromResponseToTweet = (loggedInUserId?: string, )=>(response: TweetResponse): Tweet => {
+    const { id, content, createdAt, favorited_users, tweet_author } = response;
+    return {
+        id,
+        content,
+        createdAt: dayjs(createdAt).format(`DD MMM`),
+        favoritedBy: favorited_users,
+        author: tweet_author,
+        isFavorited: favorited_users?.findIndex(u => u.id === loggedInUserId) > -1,
+        favorites: favorited_users ? favorited_users.length : 0
+    }    
+}
+
+export const createTweet = async (tweet: AddTweetRequestBody) => {
+    const { data, error } = await supabaseClient
+        .from<Tweet>(TWEETS_TABLE)
+        .insert(tweet)
+
+    if(error) {
+        throw new Error(error.message)
+    }
+
+    return data || []
+}
diff --git a/src/api/types.ts b/src/api/types.ts
@@ -12,6 +12,102 @@ export interface paths {
       };
     };
   };
+  "/favorites": {
+    get: {
+      parameters: {
+        query: {
+          id?: parameters["rowFilter.favorites.id"];
+          inserted_at?: parameters["rowFilter.favorites.inserted_at"];
+          tweet_id?: parameters["rowFilter.favorites.tweet_id"];
+          user_id?: parameters["rowFilter.favorites.user_id"];
+          /** Filtering Columns */
+          select?: parameters["select"];
+          /** Ordering */
+          order?: parameters["order"];
+          /** Limiting and Pagination */
+          offset?: parameters["offset"];
+          /** Limiting and Pagination */
+          limit?: parameters["limit"];
+        };
+        header: {
+          /** Limiting and Pagination */
+          Range?: parameters["range"];
+          /** Limiting and Pagination */
+          "Range-Unit"?: parameters["rangeUnit"];
+          /** Preference */
+          Prefer?: parameters["preferCount"];
+        };
+      };
+      responses: {
+        /** OK */
+        200: {
+          schema: definitions["favorites"][];
+        };
+        /** Partial Content */
+        206: unknown;
+      };
+    };
+    post: {
+      parameters: {
+        body: {
+          /** favorites */
+          favorites?: definitions["favorites"];
+        };
+        query: {
+          /** Filtering Columns */
+          select?: parameters["select"];
+        };
+        header: {
+          /** Preference */
+          Prefer?: parameters["preferReturn"];
+        };
+      };
+      responses: {
+        /** Created */
+        201: unknown;
+      };
+    };
+    delete: {
+      parameters: {
+        query: {
+          id?: parameters["rowFilter.favorites.id"];
+          inserted_at?: parameters["rowFilter.favorites.inserted_at"];
+          tweet_id?: parameters["rowFilter.favorites.tweet_id"];
+          user_id?: parameters["rowFilter.favorites.user_id"];
+        };
+        header: {
+          /** Preference */
+          Prefer?: parameters["preferReturn"];
+        };
+      };
+      responses: {
+        /** No Content */
+        204: never;
+      };
+    };
+    patch: {
+      parameters: {
+        query: {
+          id?: parameters["rowFilter.favorites.id"];
+          inserted_at?: parameters["rowFilter.favorites.inserted_at"];
+          tweet_id?: parameters["rowFilter.favorites.tweet_id"];
+          user_id?: parameters["rowFilter.favorites.user_id"];
+        };
+        body: {
+          /** favorites */
+          favorites?: definitions["favorites"];
+        };
+        header: {
+          /** Preference */
+          Prefer?: parameters["preferReturn"];
+        };
+      };
+      responses: {
+        /** No Content */
+        204: never;
+      };
+    };
+  };
   "/profiles": {
     get: {
       parameters: {
@@ -118,6 +214,7 @@ export interface paths {
           id?: parameters["rowFilter.tweets.id"];
           createdAt?: parameters["rowFilter.tweets.createdAt"];
           content?: parameters["rowFilter.tweets.content"];
+          userId?: parameters["rowFilter.tweets.userId"];
           /** Filtering Columns */
           select?: parameters["select"];
           /** Ordering */
@@ -171,6 +268,7 @@ export interface paths {
           id?: parameters["rowFilter.tweets.id"];
           createdAt?: parameters["rowFilter.tweets.createdAt"];
           content?: parameters["rowFilter.tweets.content"];
+          userId?: parameters["rowFilter.tweets.userId"];
         };
         header: {
           /** Preference */
@@ -188,6 +286,7 @@ export interface paths {
           id?: parameters["rowFilter.tweets.id"];
           createdAt?: parameters["rowFilter.tweets.createdAt"];
           content?: parameters["rowFilter.tweets.content"];
+          userId?: parameters["rowFilter.tweets.userId"];
         };
         body: {
           /** tweets */
@@ -204,9 +303,44 @@ export interface paths {
       };
     };
   };
+  "/rpc/get_users_who_favorited": {
+    post: {
+      parameters: {
+        body: {
+          args: { [key: string]: any };
+        };
+        header: {
+          /** Preference */
+          Prefer?: parameters["preferParams"];
+        };
+      };
+      responses: {
+        /** OK */
+        200: unknown;
+      };
+    };
+  };
 }
 
 export interface definitions {
+  favorites: {
+    /**
+     * Note:
+     * This is a Primary Key.<pk/>
+     */
+    id: number;
+    inserted_at: string;
+    /**
+     * Note:
+     * This is a Foreign Key to `tweets.id`.<fk table='tweets' column='id'/>
+     */
+    tweet_id: number;
+    /**
+     * Note:
+     * This is a Foreign Key to `users.id`.<fk table='users' column='id'/>
+     */
+    user_id: string;
+  };
   profiles: {
     /**
      * Note:
@@ -228,6 +362,11 @@ export interface definitions {
     id: number;
     createdAt?: string;
     content: string;
+    /**
+     * Note:
+     * This is a Foreign Key to `profiles.id`.<fk table='profiles' column='id'/>
+     */
+    userId?: string;
   };
 }
 
@@ -252,6 +391,12 @@ export interface parameters {
   offset: string;
   /** Limiting and Pagination */
   limit: string;
+  /** favorites */
+  "body.favorites": definitions["favorites"];
+  "rowFilter.favorites.id": string;
+  "rowFilter.favorites.inserted_at": string;
+  "rowFilter.favorites.tweet_id": string;
+  "rowFilter.favorites.user_id": string;
   /** profiles */
   "body.profiles": definitions["profiles"];
   "rowFilter.profiles.id": string;
@@ -264,6 +409,7 @@ export interface parameters {
   "rowFilter.tweets.id": string;
   "rowFilter.tweets.createdAt": string;
   "rowFilter.tweets.content": string;
+  "rowFilter.tweets.userId": string;
 }
 
 export interface operations {}
diff --git a/src/components/navBar.tsx b/src/components/navBar.tsx
@@ -62,11 +62,13 @@ export const NavBar = ({}) => {
                 <NotificationsIcon />
               </Badge>
             </IconButton>
-            <IconButton color="inherit">
-              <Badge color="secondary">
-                <AccountCircle />
-              </Badge>
-            </IconButton>
+            <Link underline="none" component={RouterLink} to="/profile" color="inherit">
+              <IconButton color="inherit">
+                <Badge color="secondary">
+                  <AccountCircle />
+                </Badge>
+              </IconButton>
+            </Link>
         </Toolbar>
       </AppBar>
     </div>

diff --git a/src/components/profileForm.tsx b/src/components/profileForm.tsx
@@ -35,9 +35,6 @@ export const ProfileForm: React.FC<ProfileFormProps> = ({ onSubmit, isSubmitting
 
   return (
     <form className={`${classes.form} ${className}`} onSubmit={(e) => e.preventDefault()}>
-      <div>
-        {children}
-      </div>
       <div>
         <TextField
           name="username"