Use environment variables instead of constants

.env

@@ -0,0 +1,4 @@
+VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
+VITE_APPWRITE_PROJECT_ID=scrummie-poker
+VITE_APPWRITE_DATABASE_ID=670402eb000f5aff721f
+VITE_APPWRITE_ESTIMATION_SESSION_COLLECTION_ID=670402f60023cb78d441

src/constants.ts

@@ -1,5 +0,0 @@
-// TODO: Think about moving to .env
-export const APPWRITE_ENDPOINT = 'https://cloud.appwrite.io/v1';
-export const APPWRITE_PROJECT_ID = 'scrummie-poker';
-export const APPWRITE_DATABASE_ID = '670402eb000f5aff721f';
-export const APPWRITE_ESTIMATION_SESSION_COLLECTION_ID = '670402f60023cb78d441';

src/lib/appwrite.ts

@@ -1,11 +1,16 @@
 import { Client, Account, Databases } from 'appwrite';
-import { APPWRITE_ENDPOINT, APPWRITE_PROJECT_ID } from '../constants';
 
 export const client = new Client();
 
-client.setEndpoint(APPWRITE_ENDPOINT).setProject(APPWRITE_PROJECT_ID);
+client
+  .setEndpoint(import.meta.env.VITE_APPWRITE_ENDPOINT)
+  .setProject(import.meta.env.VITE_APPWRITE_PROJECT_ID);
 
 export { ID } from 'appwrite';
 
 export const account = new Account(client);
 export const databases = new Databases(client);
+
+export const DATABASE_ID = import.meta.env.VITE_APPWRITE_DATABASE_ID;
+export const ESTIMATION_SESSION_COLLECTION_ID = import.meta.env
+  .VITE_APPWRITE_ESTIMATION_SESSION_COLLECTION_ID;

src/lib/context/estimation.tsx

@@ -5,12 +5,13 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { client, databases } from '../appwrite';
-import { DatabaseModels, EntityModels } from '../types';
 import {
-  APPWRITE_DATABASE_ID,
+  client,
-  APPWRITE_ESTIMATION_SESSION_COLLECTION_ID,
+  DATABASE_ID,
-} from '../../constants';
+  databases,
+  ESTIMATION_SESSION_COLLECTION_ID,
+} from '../appwrite';
+import { DatabaseModels, EntityModels } from '../types';
 import { useUser } from './user';
 import { EstimationSessionTicket } from '../types/entityModels';
 
@@ -78,8 +79,8 @@ export const EstimationContextProvider = (props: PropsWithChildren) => {
 
     databases
       .getDocument<DatabaseModels.EstimationSession>(
-        APPWRITE_DATABASE_ID,
+        DATABASE_ID,
-        APPWRITE_ESTIMATION_SESSION_COLLECTION_ID,
+        ESTIMATION_SESSION_COLLECTION_ID,
         sessionId,
       )
       .then((payload) => {
@@ -89,7 +90,7 @@ export const EstimationContextProvider = (props: PropsWithChildren) => {
 
     return client.subscribe<DatabaseModels.EstimationSession>(
       [
-        `databases.${APPWRITE_DATABASE_ID}.collections.${APPWRITE_ESTIMATION_SESSION_COLLECTION_ID}.documents.${sessionId}`,
+        `databases.${DATABASE_ID}.collections.${ESTIMATION_SESSION_COLLECTION_ID}.documents.${sessionId}`,
       ],
       ({ payload }) => {
         const userId = userData?.$id ?? ''; // TODO: Not sure if this is the user id or session
@@ -108,8 +109,8 @@ export const EstimationContextProvider = (props: PropsWithChildren) => {
     data: Partial<EntityModels.SessionState>,
   ) => {
     await databases.updateDocument<DatabaseModels.EstimationSession>(
-      APPWRITE_DATABASE_ID,
+      DATABASE_ID,
-      APPWRITE_ESTIMATION_SESSION_COLLECTION_ID,
+      ESTIMATION_SESSION_COLLECTION_ID,
       sessionId,
       {
         sessionState: JSON.stringify({
@@ -159,8 +160,8 @@ export const EstimationContextProvider = (props: PropsWithChildren) => {
       .map((x) => JSON.stringify(x));
 
     await databases.updateDocument<DatabaseModels.EstimationSession>(
-      APPWRITE_DATABASE_ID,
+      DATABASE_ID,
-      APPWRITE_ESTIMATION_SESSION_COLLECTION_ID,
+      ESTIMATION_SESSION_COLLECTION_ID,
       sessionId,
       {
         tickets: newTicketsValue,

src/lib/context/estimationSession.tsx

@@ -5,12 +5,13 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { client, databases } from '../appwrite';
-import { ID, Models, Query } from 'appwrite';
 import {
-  APPWRITE_DATABASE_ID,
+  client,
-  APPWRITE_ESTIMATION_SESSION_COLLECTION_ID,
+  DATABASE_ID,
-} from '../../constants';
+  databases,
+  ESTIMATION_SESSION_COLLECTION_ID,
+} from '../appwrite';
+import { ID, Models, Query } from 'appwrite';
 
 interface EstimationSessionType extends Models.Document {
   userId: string;
@@ -72,8 +73,8 @@ export function EstimationSessionProvider(props: PropsWithChildren) {
     estimationSession: Omit<EstimationSessionType, keyof Models.Document>,
   ) => {
     const response = await databases.createDocument<EstimationSessionType>(
-      APPWRITE_DATABASE_ID,
+      DATABASE_ID,
-      APPWRITE_ESTIMATION_SESSION_COLLECTION_ID,
+      ESTIMATION_SESSION_COLLECTION_ID,
       ID.unique(),
       estimationSession,
     );
@@ -84,8 +85,8 @@ export function EstimationSessionProvider(props: PropsWithChildren) {
 
   const remove = async (id: string) => {
     await databases.deleteDocument(
-      APPWRITE_DATABASE_ID,
+      DATABASE_ID,
-      APPWRITE_ESTIMATION_SESSION_COLLECTION_ID,
+      ESTIMATION_SESSION_COLLECTION_ID,
       id,
     );
     setEstimationSessions((estimationSessions) =>
@@ -102,8 +103,8 @@ export function EstimationSessionProvider(props: PropsWithChildren) {
   ) => {
     const currentSession = estimationSessions.find((x) => x.$id === sessionId);
     const response = await databases.updateDocument<EstimationSessionType>(
-      APPWRITE_DATABASE_ID,
+      DATABASE_ID,
-      APPWRITE_ESTIMATION_SESSION_COLLECTION_ID,
+      ESTIMATION_SESSION_COLLECTION_ID,
       sessionId,
       {
         tickets: currentSession?.tickets.concat([
@@ -132,8 +133,8 @@ export function EstimationSessionProvider(props: PropsWithChildren) {
 
   const selectTicket = async (sessionId: string, ticketId: string) => {
     const response = await databases.updateDocument<EstimationSessionType>(
-      APPWRITE_DATABASE_ID,
+      DATABASE_ID,
-      APPWRITE_ESTIMATION_SESSION_COLLECTION_ID,
+      ESTIMATION_SESSION_COLLECTION_ID,
       sessionId,
       {
         sessionState: JSON.stringify({
@@ -171,8 +172,8 @@ export function EstimationSessionProvider(props: PropsWithChildren) {
         },
       ]);
     const response = await databases.updateDocument<EstimationSessionType>(
-      APPWRITE_DATABASE_ID,
+      DATABASE_ID,
-      APPWRITE_ESTIMATION_SESSION_COLLECTION_ID,
+      ESTIMATION_SESSION_COLLECTION_ID,
       sessionId,
       {
         sessionState: JSON.stringify({
@@ -192,8 +193,8 @@ export function EstimationSessionProvider(props: PropsWithChildren) {
   const revealVotes = async (sessionId: string) => {
     const currentState = getState(sessionId);
     const response = await databases.updateDocument<EstimationSessionType>(
-      APPWRITE_DATABASE_ID,
+      DATABASE_ID,
-      APPWRITE_ESTIMATION_SESSION_COLLECTION_ID,
+      ESTIMATION_SESSION_COLLECTION_ID,
       sessionId,
       {
         sessionState: JSON.stringify({
@@ -212,8 +213,8 @@ export function EstimationSessionProvider(props: PropsWithChildren) {
 
   const init = async () => {
     const response = await databases.listDocuments<EstimationSessionType>(
-      APPWRITE_DATABASE_ID,
+      DATABASE_ID,
-      APPWRITE_ESTIMATION_SESSION_COLLECTION_ID,
+      ESTIMATION_SESSION_COLLECTION_ID,
       [Query.orderDesc('$createdAt'), Query.limit(10)],
     );
     setEstimationSessions(response.documents);
@@ -224,7 +225,7 @@ export function EstimationSessionProvider(props: PropsWithChildren) {
 
     return client.subscribe<EstimationSessionType>(
       [
-        `databases.${APPWRITE_DATABASE_ID}.collections.${APPWRITE_ESTIMATION_SESSION_COLLECTION_ID}.documents`,
+        `databases.${DATABASE_ID}.collections.${ESTIMATION_SESSION_COLLECTION_ID}.documents`,
       ],
       (payload) => {
         setEstimationSessions((estimationSessions) =>

src/main.tsx

@@ -16,6 +16,7 @@ import { EstimationSessionProvider } from './lib/context/estimationSession';
 import { EstimationContextProvider } from './lib/context/estimation';
 import Estimation from './pages/Estimation/Estimation';
 import Header from './components/Header';
+import Profile from './pages/Profile';
 
 interface RouterContext {
   userContext: UserContextType;
@@ -61,6 +62,12 @@ const loginRoute = createRoute({
   getParentRoute: () => rootRoute,
 });
 
+const profileRoute = createRoute({
+  path: 'profile',
+  component: Profile,
+  getParentRoute: () => authenticatedRoute,
+});
+
 const estimationSessionRoute = createRoute({
   path: 'estimate/session/$sessionId',
   component: Estimation,
@@ -69,7 +76,11 @@ const estimationSessionRoute = createRoute({
 
 const router = createRouter({
   routeTree: rootRoute.addChildren([
-    authenticatedRoute.addChildren([indexRoute, estimationSessionRoute]),
+    authenticatedRoute.addChildren([
+      indexRoute,
+      profileRoute,
+      estimationSessionRoute,
+    ]),
     loginRoute,
   ]),
   context: {

src/pages/Profile.tsx

@@ -0,0 +1,5 @@
+const Profile = () => {
+  return <p>TODO</p>;
+};
+
+export default Profile;

src/vite-env.d.ts

@@ -1 +1,12 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APPWRITE_ENDPOINT: string;
+  readonly VITE_APPWRITE_PROJECT_ID: string;
+  readonly VITE_APPWRITE_DATABASE_ID: string;
+  readonly VITE_APPWRITE_ESTIMATION_SESSION_COLLECTION_ID: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}