feat: 🎸 changed to be tested

Author: staszekz

src/Theme/theme.ts

@@ -2,6 +2,10 @@ import { colors } from '../utils/colors';
 
 export const theme = {
   colors,
+  fontFamily: 'Nunito, sans-serif', // 'Roboto, sans-serif
+  headings: {
+    fontFamily: 'Nunito, sans-serif',
+  },
   font: {
     this: 300,
     regular: 400,

src/components/Form/note-management-form.tsx

@@ -8,7 +8,13 @@ import { modals } from '@mantine/modals';
 import { CollectionType, Note } from '@notes/types';
 import { Timestamp } from 'firebase/firestore';
 
-export const NoteManagementForm = ({ data, editNote }: { data: Note; editNote: (element: Note) => void }) => {
+export const NoteManagementForm = ({
+  data,
+  editNote
+}: {
+  data: Note;
+  editNote: (element: Note, id: string) => void;
+}) => {
   const { addElement } = useRemoteData<Note>({ key: CollectionType.NOTES });
 
   const { Field, Subscribe, handleSubmit, state, useStore } = useForm({
@@ -21,7 +27,7 @@ export const NoteManagementForm = ({ data, editNote }: { data: Note; editNote: (
         },
     validatorAdapter: zodValidator,
     onSubmit: async ({ value }) => {
-      data ? editNote({ ...value, id: data.id }) : addElement.mutate(value); // TODO: id in types
+      data ? editNote(value) : addElement.mutate(value); // TODO: id in types
       modals.closeAll();
     }
   });

src/components/atoms/title.tsx

@@ -3,7 +3,6 @@ import { Title as MantineTitle } from '@mantine/core';
 export function Title({ children, pb, c, size, ta }: TitleProps) {
   return (
     <MantineTitle ta={ta || 'center'} c={c || 'var(--primary)'} size={size || 'h2'} pb={pb}>
-      {/* nie używa czcionki Nunito */}
       {children}
     </MantineTitle>
   );

src/components/table/modals.tsx

@@ -3,11 +3,11 @@ import { modals } from '@mantine/modals';
 import { NoteManagementForm, TodoManagementForm } from '@notes/components';
 import { Note, Todo } from '@notes/types';
 
-export function openNoteModal(data: Note, edit: (element: Note) => void) {
+export function openNoteModal(data: Note, edit: (id: string, element: Note) => void) {
   return modals.open({
     title: <Title size={'1.5rem'}>{data ? 'Edit: ' : 'Add:'}</Title>,
     centered: true,
-    children: <NoteManagementForm data={data} editNote={edit} />
+    children: <NoteManagementForm data={data} editNote={data => edit(id, data)} />
   });
 }
 

src/components/views/Notes/Notes.tsx

@@ -41,7 +41,7 @@ export const Notes = () => {
 
   const controlsConfig: ControlConfig<Note> = {
     Edit: {
-      onClick: original => openNoteModal(original, editElement.mutate),
+      onClick: (original, id) => openNoteModal(original, editElement.mutate),
       icon: <IconEdit />,
       color: 'var(--secondary)',
       tooltipMessage: 'Edit this note'

src/hooks/use-remote-data.tsx

@@ -1,7 +1,7 @@
 import { keepPreviousData, useMutation, useQuery } from '@tanstack/react-query';
 import { addElementFn, editSingleElementFn, getCollection, deleteSingleElementFn } from '@notes/rq';
 
-export function useRemoteData<T extends { id: string }>({ key }: { key: string }) {
+export function useRemoteData<T extends {}>({ key }: { key: string }) {
   const collection = useQuery({
     queryKey: [key],
     queryFn: async () => await getCollection({ key }),
@@ -17,7 +17,8 @@ export function useRemoteData<T extends { id: string }>({ key }: { key: string }
   });
 
   const editElement = useMutation({
-    mutationFn: async (element: T): Promise<void> => editSingleElementFn({ element, key }),
+    mutationFn: async ({ element, id }: { element: T; id: string }): Promise<void> =>
+      editSingleElementFn({ element, key, id }),
     onSettled: () => {
       collection.refetch();
     }

src/rq/manage-collection.ts

@@ -4,10 +4,10 @@ import { database, auth } from '@notes/database';
 
 
 
-export async function getCollection({ key }: { key: string }) {
+export async function getCollection<T>({ key }: { key: string }): Promise<(T & { id: string })[]> {
   const uid = auth.currentUser?.uid;
   const res = await getDocs(collection(database, key));
-  return res.docs.map(doc => ({ ...doc.data(), id: doc.id }));
+  return res.docs.map((doc) => ({ ...doc.data() as T, id: doc.id }));
 }
 
 
@@ -51,9 +51,9 @@ export async function addElementFn<T extends { [x: string]: any }>({ element, ke
 
 }
 // add option to edit many elements
-export async function editSingleElementFn<T extends { id: string }>({ element, key }: { element: T, key: string }) {
+export async function editSingleElementFn<T extends {}>({ element, key, id }: { element: T, key: string, id: string }) {
   const uid = auth.currentUser?.uid;
-  const _doc = doc(database, key, element.id)
+  const _doc = doc(database, key, id)
   await updateDoc(_doc, element);
 
   // const res = await fetch(`${DATABASE_URL}/users/${uid}/${key}/${element.id}.json`, {

src/types/collections.ts

@@ -1,7 +1,6 @@
 import { Timestamp } from 'firebase/firestore';
 
 export type Note = {
-  id?: string;
   title: string;
   createdOn: Timestamp;
   content: string;