6 |
8 | );
9 | }
--------------------------------------------------------------------------------
/server/prisma/migrations/20220426175856_create_feedbacks/migration.sql:
--------------------------------------------------------------------------------
1 | -- CreateTable
2 | CREATE TABLE "Feedback" (
3 | "id" TEXT NOT NULL PRIMARY KEY,
4 | "screenshot" TEXT,
5 | "comment" TEXT NOT NULL,
6 | "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
7 | "updatedAt" DATETIME NOT NULL
8 | );
9 |
--------------------------------------------------------------------------------
/server/src/server.ts:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import cors from 'cors';
3 | import { routes } from './routes';
4 |
5 | const app = express();
6 |
7 | app.use(express.json());
8 | app.use(cors());
9 |
10 | app.use(routes);
11 |
12 | app.listen(3333, () => {
13 | console.log('HTTP server running!');
14 | });
15 |
--------------------------------------------------------------------------------
/mobile/src/components/Copyright/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { View, Text } from 'react-native';
3 |
4 | import { styles } from './styles';
5 |
6 | export function Copyright() {
7 | return (
8 | Tipo de feedback: ${type}
`, 35 | `Comentário: ${comment}
`, 36 | screenshot ? `
20 | { Object.entries(feedbackTypes).map(([ key, value ]) => {
21 | return (
22 |
31 | )
32 | }) }
33 |
34 |
35 | );
36 | }
--------------------------------------------------------------------------------
/web/src/components/Widget/index.tsx:
--------------------------------------------------------------------------------
1 | import { ChatTeardropDots } from "phosphor-react";
2 | import { Popover, Transition } from '@headlessui/react'
3 | import { WidgetForm } from "./WidgetForm";
4 | import { Fragment } from "react";
5 |
6 | export function Widget() {
7 | return (
8 |
17 |
21 |
22 | Agradecemos o feedback!
23 |
24 |
30 |
31 |
32 | );
33 | }
--------------------------------------------------------------------------------
/web/src/components/Widget/WidgetForm/ScreenshotButton.tsx:
--------------------------------------------------------------------------------
1 | import html2canvas from "html2canvas";
2 | import { Camera, Trash } from "phosphor-react";
3 | import { useState } from "react";
4 | import { Loading } from "../../Loading";
5 |
6 | interface ScreenshotButtonProps {
7 | screenshot: string | null;
8 | onScreenshotTook: (screenshot: string | null) => void;
9 | }
10 |
11 | export function ScreenshotButton({
12 | screenshot,
13 | onScreenshotTook
14 | }: ScreenshotButtonProps) {
15 | const [isTakingScreenshot, setIsTakingScreenshot] = useState(false);
16 |
17 | async function handleScreenshot() {
18 | setIsTakingScreenshot(true)
19 |
20 | const canvas = await html2canvas(document.querySelector('html')!)
21 |
22 | const base64image = canvas.toDataURL("image/png");
23 |
24 | onScreenshotTook(base64image)
25 | setIsTakingScreenshot(false)
26 | }
27 |
28 | function handleDeleteScreenshot() {
29 | onScreenshotTook(null)
30 | }
31 |
32 | if (screenshot) {
33 | return (
34 |
46 | );
47 | }
48 |
49 | return (
50 |
60 | );
61 | }
--------------------------------------------------------------------------------
/mobile/src/components/Widget/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState } from 'react';
2 | import { TouchableOpacity } from 'react-native';
3 | import { ChatTeardropDots } from 'phosphor-react-native';
4 | import BottomSheet from '@gorhom/bottom-sheet';
5 | import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
6 |
7 | import { Options } from '../Options';
8 | import { Success } from '../Success';
9 | import { Form } from '../Form';
10 |
11 | import { styles } from './styles';
12 | import { theme } from '../../theme';
13 | import { feedbackTypes } from '../../utils/feedbackTypes';
14 |
15 | export type FeedbackType = keyof typeof feedbackTypes;
16 |
17 | function Widget() {
18 | const [feedbackType, setFeedbackType] = useState
51 | { feedbackSent ? (
52 | setFeedbackType(null)}
65 | onFeedbackSent={handleFeedbackSent}
66 | />
67 | )}
68 |
69 | )}
70 |
71 |
74 |
75 | );
76 | }
--------------------------------------------------------------------------------
/web/src/components/Widget/WidgetForm/Steps/FeedbackContentStep.tsx:
--------------------------------------------------------------------------------
1 | import { ArrowLeft } from "phosphor-react";
2 | import { FormEvent, useState } from "react";
3 |
4 | import { FeedbackType, feedbackTypes } from "..";
5 | import { api } from "../../../../lib/api";
6 |
7 | import { Loading } from "../../../Loading";
8 | import { CloseButton } from "../../CloseButton";
9 | import { ScreenshotButton } from "../ScreenshotButton";
10 |
11 | interface FeedbackContentStepProps {
12 | onFeedbackCanceled: () => void;
13 | onFeedbackSent: () => void;
14 | feedbackType: FeedbackType;
15 | }
16 |
17 | export function FeedbackContentStep({
18 | onFeedbackCanceled,
19 | onFeedbackSent,
20 | feedbackType
21 | }: FeedbackContentStepProps) {
22 | const [isSendingFeedback, setIsSendingFeedback] = useState(false);
23 |
24 | const [screenshot, setScreenshot] = useState
57 | {feedbackTypeInfo.title}
58 |
59 |
60 |