Aula 13 coder react js

.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+dataconnect
+dataconnect/dataconnect
+dataconnect-generated

README.md

@@ -1,20 +1,5 @@
-<h2>Material referente as entregas dos desafios no curso de React.JS na Coderhouse Brasil</h2>
-
+<h1>Descrição:</h1>
 <hr>
-
-<h3> Aulas com entrega:</h3>
-<ul>
-<li>Aula 2 ( App com Vite + React )</li>
-<li>Aula 3 ( Menu E-COMMERCE )</li>
-<li>Aula 4 ( Criando uma LP ( Landing Page) )</li>
-<li>Aula 5 ( Contador com botão )</li>
-<li>Aula 6 ( Catálogo com maps e promises )</li>
-<li>Aula 7 ( Detalhe do Produto )</li>
-<li>Aula 8 ( Primeira Entrega )</li>
-<li>Aula 9 ( Sincronizar Counter )</li>
-<li>Aula 10 ( CartContext )</li>
-<li>Aula 11 ( Cart View )</li>
-
-</ul>
-
-<span>Acesse as aulas pelas branches</span>
+<div>
+<p>08/01/2025 Desafio ( Item Collection II ) da Aula 13 ( Firebase II ) do curso de React.js na CoderHouse; Turma #63750 de 2024.</p>
+</div>

dataconnect-generated/js/default-connector/esm/index.esm.js

@@ -0,0 +1,8 @@
+import { getDataConnect, validateArgs } from 'firebase/data-connect';
+
+export const connectorConfig = {
+  connector: 'default',
+  service: 'cursoCoderhouseReactJS',
+  location: 'us-central1'
+};
+

dataconnect-generated/js/default-connector/esm/package.json

@@ -0,0 +1 @@
+{"type":"module"}

dataconnect-generated/js/default-connector/index.cjs.js

@@ -0,0 +1,9 @@
+const { getDataConnect, validateArgs } = require('firebase/data-connect');
+
+const connectorConfig = {
+  connector: 'default',
+  service: 'cursoCoderhouseReactJS',
+  location: 'us-central1'
+};
+exports.connectorConfig = connectorConfig;
+

dataconnect-generated/js/default-connector/index.d.ts

@@ -0,0 +1,15 @@
+import { ConnectorConfig, DataConnect } from 'firebase/data-connect';
+export const connectorConfig: ConnectorConfig;
+
+export type TimestampString = string;
+
+export type UUIDString = string;
+
+export type Int64String = string;
+
+export type DateString = string;
+
+
+
+
+

dataconnect-generated/js/default-connector/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@firebasegen/default-connector",
+  "version": "1.0.0",
+  "author": "Firebase <firebase-support@google.com> (https://firebase.google.com/)",
+  "description": "Generated SDK For default",
+  "license": "Apache-2.0",
+  "engines": {
+    "node": " >=18.0"
+  },
+  "typings": "index.d.ts",
+  "module": "esm/index.esm.js",
+  "main": "index.cjs.js",
+  "browser": "esm/index.esm.js",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "require": "./index.cjs.js",
+      "default": "./esm/index.esm.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "firebase": "^10.14.0 || ^11.0.0"
+  }
+}

dataconnect/connector/connector.yaml

@@ -0,0 +1,6 @@
+connectorId: default
+generate:
+  javascriptSdk:
+    outputDir: ..\..\dataconnect-generated\js\default-connector
+    package: "@firebasegen/default-connector"
+    packageJsonDir: ..\..

dataconnect/connector/mutations.gql

@@ -0,0 +1,50 @@
+# # Example mutations for a simple movie app
+
+# # Create a movie based on user input
+# mutation CreateMovie(
+#   $title: String!
+#   $genre: String!
+#   $imageUrl: String!
+# ) @auth(level: USER_EMAIL_VERIFIED) {
+#   movie_insert(
+#     data: {
+#       title: $title
+#       genre: $genre
+#       imageUrl: $imageUrl
+#     }
+#   )
+# }
+
+# # Upsert (update or insert) a user's username based on their auth.uid
+# mutation UpsertUser($username: String!) @auth(level: USER) {
+#   user_upsert(
+#     data: {
+#       id_expr: "auth.uid"
+#       username: $username
+#     }
+#   )
+# }
+
+# # Add a review for a movie
+# mutation AddReview(
+#   $movieId: UUID!
+#   $rating: Int!
+#   $reviewText: String!
+# ) @auth(level: USER) {
+#   review_upsert(
+#     data: {
+#       userId_expr: "auth.uid"
+#       movieId: $movieId
+#       rating: $rating
+#       reviewText: $reviewText
+#       # reviewDate defaults to today in the schema. No need to set it manually.
+#     }
+#   )
+# }
+
+# # Logged in user can delete their review for a movie
+# mutation DeleteReview(
+#   $movieId: UUID!
+# ) @auth(level: USER) {
+#   review_delete(key: { userId_expr: "auth.uid", movieId: $movieId })
+# }

dataconnect/connector/queries.gql

@@ -0,0 +1,83 @@
+# # Example queries for a simple movie app.
+
+# # @auth() directives control who can call each operation.
+# # Anyone should be able to list all movies, so the auth level is set to PUBLIC
+# query ListMovies @auth(level: PUBLIC) {
+#   movies {
+#     id
+#     title
+#     imageUrl
+#     genre
+#   }
+# }
+
+# # List all users, only admins should be able to list all users, so we use NO_ACCESS
+# query ListUsers @auth(level: NO_ACCESS) {
+#   users { id, username }
+# }
+
+# # Logged in user can list all their reviews and movie titles associated with the review 
+# # Since the query requires the uid of the current authenticated user, the auth level is set to USER
+# query ListUserReviews @auth(level: USER) {
+#   user(key: {id_expr: "auth.uid"}) {
+#     id
+#     username
+#     # <field>_on_<foreign_key_field> makes it easy to grab info from another table
+#     # Here, we use it to grab all the reviews written by the user.
+#     reviews: reviews_on_user {
+#       id
+#       rating
+#       reviewDate
+#       reviewText
+#       movie {
+#         id
+#         title
+#       }
+#     }
+#   }
+# }
+
+# # Get movie by id
+# query GetMovieById($id: UUID!) @auth(level: PUBLIC) {
+#   movie(id: $id) {
+#     id
+#     title
+#     imageUrl
+#     genre
+#     metadata: movieMetadata_on_movie {
+#       rating
+#       releaseYear
+#       description
+#     }
+#     reviews: reviews_on_movie {
+#       id
+#       reviewText
+#       reviewDate
+#       rating
+#       user {
+#         id
+#         username
+#       }
+#     }
+#   }
+# }
+
+# # Search for movies, actors, and reviews
+# query SearchMovie(
+#   $titleInput: String
+#   $genre: String
+# ) @auth(level: PUBLIC) {
+#   movies(
+#     where: {
+#       _and: [
+#         { genre: { eq: $genre } }
+#         { title: { contains: $titleInput } }
+#       ]
+#     }
+#   ) {
+#     id
+#     title
+#     genre
+#     imageUrl
+#   }
+# }

dataconnect/dataconnect.yaml

@@ -0,0 +1,12 @@
+specVersion: "v1beta"
+serviceId: "cursoCoderhouseReactJS"
+location: "us-central1"
+schema:
+  source: "./schema"
+  datasource:
+    postgresql:
+      database: "fdcdb"
+      cloudSql:
+        instanceId: "cursoCoderhouseReactJS-fdc"
+      # schemaValidation: "COMPATIBLE"
+connectorDirs: ["./connector"]

dataconnect/schema/schema.gql

@@ -0,0 +1,45 @@
+# # Example schema for simple movie review app
+
+# # Users
+# # Suppose a user can leave reviews for movies
+# # user  -> reviews is a one to many relationship,
+# # movie -> reviews is a one to many relationship
+# # movie <-> user is a many to many relationship
+# type User @table {
+#   id: String! @col(name: "user_auth")
+#   username: String! @col(name: "username", dataType: "varchar(50)")
+#   # The following are generated by the user: User! field in the Review table
+#   # reviews_on_user 
+#   # movies_via_Review
+# }
+
+# # Movies
+# type Movie @table {
+#   # The below parameter values are generated by default with @table, and can be edited manually.
+#   # implies directive `@col(name: "movie_id")`, generating a column name
+#   id: UUID! @default(expr: "uuidV4()")
+#   title: String!
+#   imageUrl: String!
+#   genre: String
+# }
+
+# # Movie Metadata
+# # Movie - MovieMetadata is a one-to-one relationship
+# type MovieMetadata @table {
+#   # @unique indicates a 1-1 relationship
+#   movie: Movie! @unique 
+#   # movieId: UUID <- this is created by the above reference
+#   rating: Float
+#   releaseYear: Int
+#   description: String
+# }
+
+# # Reviews
+# type Review @table(name: "Reviews", key: ["movie", "user"]) {
+#   id: UUID! @default(expr: "uuidV4()")
+#   user: User!
+#   movie: Movie!
+#   rating: Int
+#   reviewText: String
+#   reviewDate: Date! @default(expr: "request.time")
+# }

eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>