add BackstagePage #15

benben6515 · 2021-09-30T15:26:34Z

（10/03 更新）

fixed theme, prop CSS problems.
add Homepage simple RWD.
redirect editing page to FormPage
TODO : FormPage with editing

不囉唆，直上圖

rockyooooooo

大部分是命名的問題～

rockyooooooo · 2021-10-01T02:31:32Z

src/components/App.js

        <Route exact path="/add">
          <AddPage />
        </Route>
        <Route exact path="/form">
          <FormPage />
        </Route>
+        <Route exact path="/backstage">


跟我的路由撞名ㄌ，開會討論怎麼改

待討論：

前台是單支留言 => /issue/奇怪的url

後台 => /backstage

後台總留言 => /backstage/issues

後台單支留言 => /backstage/issue or /backstage/issue/奇怪的url

rockyooooooo · 2021-10-01T02:42:25Z

src/pages/BackstageSinglePage/EditSection.js

+  justify-self: center;
+`
+
+const EditWrapper = styled.form`


這個名子可能要含有 form 比較知道原來他是個 form

他不是 form 了 XD

rockyooooooo · 2021-10-01T02:45:01Z

src/pages/BackstageSinglePage/EditSection.js

+`
+
+const EditSection = () => {
+  const { secondary_300: secondary300 } = useTheme()


只解構要用的，讚

rockyooooooo · 2021-10-01T02:49:14Z

src/pages/BackstageSinglePage/GraphSection.js

+const randomN = (num) => {
+  return Math.round(Math.random() * num)
+}
+const datas = () => {
+  const jsonData = []
+  for (const i in Array(5).fill(0)) {
+    jsonData.push({
+      date: '10/1' + i,
+      views: randomN(100 + i * 10),
+      comments: randomN(30 - i),
+      replies: randomN(10)
+    })
+  }
+  return jsonData
+}
+const data = datas()


雖然是測試用的假資料，但是命名感覺還是可以符合語意一點 XD

rockyooooooo · 2021-10-01T02:56:09Z

src/pages/BackstageSinglePage/GraphSection.js

+
+  // TODO: get real data
+
+  const handleClick = async (filter) => {


命名感覺可以改成實際做了什麼事

rockyooooooo · 2021-10-01T03:26:27Z

src/pages/BackstageSinglePage/GraphSection.js

+        <Button onClick={() => handleClick('all')} active={filter === 'all'}>
+          <span>all</span>
+          <span>data</span>
+        </Button>


這四個 button 感覺有優化的空間

rockyooooooo · 2021-10-01T03:28:29Z

src/pages/BackstageSinglePage/GraphSection.js

+          <Legend />
+          {(filter === 'all' || filter === 'views') && (
+            <Line
+              type="monotone"


這個 'monotone' 要存成常數嗎

rockyooooooo · 2021-10-01T03:44:28Z

src/pages/BackstageSinglePage/QRcodeSection.js

+  const handleCopyQRcode = () => {
+    navigator.clipboard.writeText(QRcodeImage).then(
+      () => {
+        alert('複製成功！')
+      },
+      () => {
+        alert('複製失敗 QQ')
+      }
+    )
+  }
+
+  const handleCopyURL = () => {
+    navigator.clipboard.writeText(URL).then(
+      () => {
+        alert('複製成功！')
+      },
+      () => {
+        alert('複製失敗 QQ')
+      }
+    )
+  }


可以寫成一個 function

哭哭再別的 branch = =

rockyooooooo · 2021-10-01T03:45:18Z

src/pages/BackstageSinglePage/components/Button.js

+  justify-self: center;
+`
+
+export default Button


這個檔案是不是用不到了？

rockyooooooo · 2021-10-01T03:47:44Z

src/pages/BackstageSinglePage/components/SectionWrapper.js

+const SectionWrapper = styled.div`
+  width: 100%;
+  ${({ isGreyBackground }) => isGreyBackground && 'background: #f9f9f9;'}
+`
+// background: ${({ theme }) => theme.secondary_850};


theme 跟註解

然後我找不到什麼時候會用到 isGreyBackground XD

EditSection 跟 GraphSection 有用到，他有傳 props

但是我看不到灰背景，我眼鏡業障重嗎

真的業障重

angelina524

每個 section margin 在大一點 QQ，呼吸呼吸

angelina524 · 2021-10-01T06:32:43Z

src/components/BackstageNavbar.js

+        {iconName('1x', theme.secondary_200)}
+        <span>{title}</span>
+      </div>
+      {location.pathname === '/backstage' && (


一樣 url 待討論

angelina524 · 2021-10-01T06:42:47Z

src/components/Button.js

+  font-size: 1rem;
+  text-align: center;
+  line-height: ${BUTTON_HEIGHT};
+`


在 menu 看不出來，放到 navbar 後，button 超大個...

angelina524 · 2021-10-01T06:44:17Z

src/pages/BackstageSinglePage/BackstageSinglePage.js

+        userId={1}
+        nickname="benben bunbun"
+        MenuContent={BackstageMenuContent}
+      />


討論：哪邊 call getMe API

angelina524 · 2021-10-01T06:47:17Z

src/pages/BackstageSinglePage/EditSection.js

+const EditContent = styled.p`
+  overflow: hidden;
+  white-space: pre-line;
+  text-overflow: ellipsis;


我直接 break all，hhhh... 真得超醜拉

angelina524 · 2021-10-01T06:47:58Z

src/pages/BackstageSinglePage/EditSection.js

+  )
+}
+
+export default EditSection


再補上編輯功能，感恩的心

angelina524 · 2021-10-01T06:51:02Z

src/pages/BackstageSinglePage/GraphSection.js

+  )
+}
+
+export default GraphSection


顯示中文 please

angelina524 · 2021-10-01T06:52:13Z

src/pages/BackstageSinglePage/QRcodeSection.js

+`
+
+const QRcodeSection = () => {
+  const QRcodeImage =


qrcode.react 可以研究一下這個套件

angelina524 · 2021-10-01T06:53:27Z

src/pages/BackstageSinglePage/QRcodeSection.js

+        </QRcodeImageWrapper>
+        <CopyWrapper onClick={handleCopyQRcode}>按此複製 QR code</CopyWrapper>
+        <URLWrapper>{URL}</URLWrapper>
+        <CopyWrapper onClick={handleCopyURL}>按此複製網址</CopyWrapper>


@rockyooooooo 按此回頂端的樣式用這個好了，比較好看！！！

玩了一下 CSS 因為原本背景有點空 wwww

angelina524 · 2021-10-01T06:54:47Z

src/pages/BackstageSinglePage/components/SectionWrapper.js

+const SectionWrapper = styled.div`
+  width: 100%;
+  ${({ isGreyBackground }) => isGreyBackground && 'background: #f9f9f9;'}
+`
+// background: ${({ theme }) => theme.secondary_850};


EditSection 跟 GraphSection 有用到，他有傳 props

angelina524 · 2021-10-01T06:56:08Z

src/pages/HomePage/SurveySection.js

+      <TitleWrapperRight>
+        <h3>問卷調查</h3>
+        <p>按您的喜好設計並創建表單，</p>
+        <p>可快速搜集與整理觀眾的資料。</p>


homepage 的 h3, p 用 cardList 寫好的資料套進去

rockyooooooo

有一些之前說的沒改到 ><

rockyooooooo · 2021-10-03T12:07:17Z

src/components/Button.js

@@ -4,6 +4,7 @@ export const BUTTON_HEIGHT = '2.25rem'

 export default styled.button`
  background: ${({ theme }) => theme.secondary_300};


這行可以刪掉了吧

這一行其實是 backgroundColor 沒傳的 default 值，但應該可以合併起來 ><

rockyooooooo · 2021-10-03T12:28:32Z

src/pages/BackstageSinglePage/EditSection.js

+  justify-self: center;
+`
+
+const EditWrapper = styled.form`


rockyooooooo · 2021-10-03T12:37:59Z

src/pages/BackstageSinglePage/EditSection.js

+  useEffect(() => {
+    const now = new Date().toISOString().slice(0, 10)
+    const nowStatus =
+      now < beginDate ? '即將發佈' : now < finishDate ? '進行中' : '已截止'


可讀性不佳 QQ

好像有點 XDD

rockyooooooo · 2021-10-03T12:38:59Z

src/pages/BackstageSinglePage/EditSection.js

+      setBeginDate(() => beginTime.slice(0, 10))
+      setFinishDate(() => finishTime.slice(0, 10))


這不用傳函數吧@@

對欸，原本用別的寫法要用，忘記改回來 XD

rockyooooooo · 2021-10-03T12:40:56Z

src/pages/BackstageSinglePage/GraphSection.js

+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;


不用寫好的 flexJustifyAlign 了嗎 QQ

rockyooooooo · 2021-10-03T12:41:50Z

src/pages/BackstageSinglePage/GraphSection.js

+  display: flex;
+  justify-content: center;


被遺忘的 flexJustifyAlign

rockyooooooo · 2021-10-03T12:51:40Z

src/pages/BackstageSinglePage/QRcodeSection.js

+  const handleCopyQRcode = () => {
+    navigator.clipboard.writeText(QRcodeImage).then(
+      () => {
+        alert('複製成功！')
+      },
+      () => {
+        alert('複製失敗 QQ')
+      }
+    )
+  }
+
+  const handleCopyURL = () => {
+    navigator.clipboard.writeText(URL).then(
+      () => {
+        alert('複製成功！')
+      },
+      () => {
+        alert('複製失敗 QQ')
+      }
+    )
+  }


rockyooooooo reviewed Oct 1, 2021

View reviewed changes

angelina524 reviewed Oct 1, 2021

View reviewed changes

benben6515 added 2 commits October 2, 2021 00:09

fix confilct

f2aa8bd

add homepage RWD, fix theme/props color

c4661c8

benben6515 force-pushed the dev-css#8 branch from 7e67415 to c4661c8 Compare October 3, 2021 05:20

rockyooooooo reviewed Oct 3, 2021

View reviewed changes

adjust naming

e077f9a

benben6515 merged commit 9a42d1c into dev Oct 4, 2021

benben6515 deleted the dev-css#8 branch October 4, 2021 04:25


		// TODO: get real data

		const handleClick = async (filter) => {

		@@ -4,6 +4,7 @@ export const BUTTON_HEIGHT = '2.25rem'

		export default styled.button`
		background: ${({ theme }) => theme.secondary_300};

		setBeginDate(() => beginTime.slice(0, 10))
		setFinishDate(() => finishTime.slice(0, 10))

add BackstagePage #15

add BackstagePage #15

Conversation

benben6515 commented Sep 30, 2021 • edited Loading

rockyooooooo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

angelina524 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rockyooooooo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benben6515 commented Sep 30, 2021 •

edited

Loading