From 816038d4b66fdcbf9e6a76f97ca76cb1f5abc9fe Mon Sep 17 00:00:00 2001 From: moyomogi Date: Tue, 27 Dec 2022 18:17:51 +0900 Subject: [PATCH] Update `[id].tsx` --- .gitignore | 1 + package.json | 5 +- postcss.config.js | 6 - src-tauri/src/domain/models.rs | 3 + src-tauri/src/main.rs | 5 - src-tauri/tauri.conf.json | 2 +- src/App.css | 21 --- src/assets/next.svg | 21 --- src/assets/react.svg | 1 - src/assets/tauri.svg | 6 - src/domain/models.ts | 3 + src/pages/_app.tsx | 3 +- src/pages/articles/[id].tsx | 225 +++++++++++++++++++++++++++++++++ src/pages/games/[id].tsx | 111 ---------------- src/pages/index.tsx | 213 +++++++++++++++++++++---------- src/pages/post.tsx | 54 +------- src/repository/fly/fly.ts | 2 +- src/style.css | 106 ---------------- tailwind.config.js | 8 -- 19 files changed, 391 insertions(+), 405 deletions(-) delete mode 100644 postcss.config.js delete mode 100644 src/App.css delete mode 100644 src/assets/next.svg delete mode 100644 src/assets/react.svg delete mode 100644 src/assets/tauri.svg create mode 100644 src/pages/articles/[id].tsx delete mode 100644 src/pages/games/[id].tsx delete mode 100644 src/style.css delete mode 100644 tailwind.config.js diff --git a/.gitignore b/.gitignore index 17394f1..4425b22 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ node_modules target venv +*.css *.py Cargo.lock memo.md diff --git a/package.json b/package.json index 0f4c329..5c7acaa 100644 --- a/package.json +++ b/package.json @@ -9,9 +9,11 @@ }, "dependencies": { "@tauri-apps/api": "^1.0.2", + "bulma": "^0.9.4", "next": "^12.2.5", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.7.1", "web-vitals": "^3.0.4" }, "devDependencies": { @@ -19,9 +21,6 @@ "@types/node": "^18.7.11", "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", - "autoprefixer": "^10.4.8", - "postcss": "^8.4.16", - "tailwindcss": "^3.1.8", "typescript": "^4.7.4" } } diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index 12a703d..0000000 --- a/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; diff --git a/src-tauri/src/domain/models.rs b/src-tauri/src/domain/models.rs index 81f8a03..e0f8348 100644 --- a/src-tauri/src/domain/models.rs +++ b/src-tauri/src/domain/models.rs @@ -52,11 +52,13 @@ pub struct ArticleOwner { #[derive(Clone, Debug, Serialize, Deserialize)] pub struct ArticleTag { + id: String, name: String, } #[derive(Clone, Debug, Serialize, Deserialize)] pub struct ArticleComment { + id: String, // created_at: DateTime, // updated_at: DateTime, created_at: String, @@ -67,6 +69,7 @@ pub struct ArticleComment { #[derive(Clone, Debug, Serialize, Deserialize)] pub struct ArticleImageUrl { + id: String, image_url: String, } diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 9d53a92..4ca2068 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -43,10 +43,6 @@ use article::*; // let id = article.id; // format!("Hello, {}! You've been greeted from Rust!", name) // } -#[tauri::command] -fn greet(name: &str) -> String { - format!("Hello, {}! You've been greeted from Rust!", name) -} // async fn manage_articles(app: &mut App) -> Result<()> { // let articles = article::fetch_articles().await?; @@ -65,7 +61,6 @@ pub async fn main() -> Result<(), Box> { let articles = handle.await.expect("failed to handle articles"); tauri::Builder::default() .invoke_handler(tauri::generate_handler![ - greet, get_articles, insert_article, update_article, diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 61f5822..ad9d727 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -35,7 +35,7 @@ "icons/128x128@2x.png", "icons/icon.ico" ], - "identifier": "com.tauri.dev", + "identifier": "random-launcher", "longDescription": "", "macOS": { "entitlements": null, diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b649d3d..0000000 --- a/src/App.css +++ /dev/null @@ -1,21 +0,0 @@ -/* .logo { - padding: 1.5em !important; -} - -span.logos > a > span { - overflow: inherit !important; -} - -.logo.next:hover { - filter: drop-shadow(0 0 2em #36373f); -} - -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafb); -} - -@media (prefers-color-scheme: dark) { - .logo.next:hover { - filter: drop-shadow(0 0 2em #ffff); - } -} */ diff --git a/src/assets/next.svg b/src/assets/next.svg deleted file mode 100644 index b24329d..0000000 --- a/src/assets/next.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/tauri.svg b/src/assets/tauri.svg deleted file mode 100644 index 31b62c9..0000000 --- a/src/assets/tauri.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/domain/models.ts b/src/domain/models.ts index f7679e4..34f94d6 100644 --- a/src/domain/models.ts +++ b/src/domain/models.ts @@ -38,10 +38,12 @@ export interface ArticleOwner { }; export interface ArticleTag { + id: string; name: string; }; export interface ArticleComment { + id: string; created_at: string; updated_at: string; body: string; @@ -49,5 +51,6 @@ export interface ArticleComment { }; export interface ArticleImageUrl { + id: string; image_url: string; }; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index a5ca36c..44d045d 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,8 +1,7 @@ import React from "react"; import type { AppProps } from "next/app"; -import "../style.css"; -import "../App.css"; +import "bulma/css/bulma.css"; import reportWebVitals from "../utils/reportWebVitals"; // https://bit.ly/CRA-vitals diff --git a/src/pages/articles/[id].tsx b/src/pages/articles/[id].tsx new file mode 100644 index 0000000..b1c6907 --- /dev/null +++ b/src/pages/articles/[id].tsx @@ -0,0 +1,225 @@ +import { useEffect, useState } from "react"; +// import { invoke } from "@tauri-apps/api/tauri"; +// https://react-icons.github.io/react-icons/icons?name=fa +import { + FaAngleDoubleLeft, + FaPlay, + FaUser, + FaShapes, + FaTv, + FaHandPaper, + FaGamepad, + FaKeyboard, + FaStarHalfAlt, + FaRegSmileBeam, +} from "react-icons/fa"; + +import { Article } from "../../domain/models"; +import { isNullOrUndefined } from "../../utils/utils"; +import { getArticles, getAllPaths } from "../../repository/fly/fly"; + +export default function App({ id }: { id: string }) { + const [article, setArticle] = useState
(null); + useEffect( + () => { + try { + getArticles().then((articles: Map) => { + setArticle(articles[id]); + // console.log("(useEffect) articles[id]:", articles[id]); + }); + } catch (e) { + console.log("failed to run getArticles", e); + } + }, + // マウント時のみ useEffect する + [] + ); + return ( +
+ {isNullOrUndefined(article) ? ( + "Loading..." + ) : article.public ? ( + <> + {/* 戻る */} +
+ +
+ {/* article */} +
+
+
+

{article.title}

+
+ 作成: {article.created_at}、更新: {article.updated_at} +
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ + + + {article.article_owners + .map((o) => o.user.name) + .join("、")} +
+
+ + + + {article.article_tags.map((t) => ( + + + + + {t.name} + + ))} +
+
+ + + + + + + コントローラ/ + + + + キーボード +
+
+
+
+

ギャラリー

+
+ {article.article_image_urls.map((aiu) => ( +
+
+ +
+
+ ))} +
+
+
+
+
+
+
+

概要

+
{article.body}
+
+
+
+
+

評価

+
+
+
+ + + + 評価する +
+
+
+
+ + + + Good +
+
+
+
+ + {/*

{article.title}

+ {article.created_at} + {article.updated_at} + {article.article_tags.map((t) => ( +

{t.name}

+ ))} + {article.article_owners.map((o) => ( +

{o.user.name}

+ ))} */} + {/* {article.article_image_urls.map((aiu) => ( + + ))} */} +

{article.article_game_content.exec_path}

+

{article.article_game_content.zip_url}

+ {article.article_comments.map((ac) => { +
+

{ac.rate}

+ {ac.created_at} + {ac.updated_at} +

{ac.body}

+
; + })} + + ) : ( + "401 Unauthorized" + )} +
+ ); +} + +// https://reffect.co.jp/react/next-js +export async function getServerSidePaths() { + const paths = await getAllPaths(); + return { + paths, + fallback: "blocking", + }; +} + +export async function getServerSideProps({ params: { id } }) { + return { + props: { + id, + }, + }; +} diff --git a/src/pages/games/[id].tsx b/src/pages/games/[id].tsx deleted file mode 100644 index 8551273..0000000 --- a/src/pages/games/[id].tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { useEffect, useState } from "react"; -// import { invoke } from "@tauri-apps/api/tauri"; -import Image from "next/image"; -import reactLogo from "../../assets/react.svg"; -import tauriLogo from "../../assets/tauri.svg"; -import nextLogo from "../../assets/next.svg"; - -import { Article } from "../../domain/models"; -import { isNullOrUndefined } from "../../utils/utils"; -import { getArticles, getAllPaths } from "../../repository/fly/fly"; - -export default function App({ id }: { id: string }) { - const [article, setArticle] = useState
(null); - useEffect(() => { - try { - getArticles().then((articles: Map) => { - setArticle(articles[id]); - // console.log("(useEffect) articles[id]:", articles[id]); - }); - } catch (e) { - console.log("failed to run getArticles", e); - } - }); - return ( - <> -
- - - Next logo - - - - - Tauri logo - - - - - React logo - - -
- {isNullOrUndefined(article) ? ( - "Loading..." - ) : article.public ? ( - <> -

{article.title}

- {article.created_at} - {article.updated_at} - {article.article_tags.map((t) => ( -

{t.name}

- ))} - {article.article_owners.map((o) => ( -

{o.user.name}

- ))} - {article.article_image_urls.map((aiu) => ( - - ))} -

{article.body}

-

{article.article_game_content.exec_path}

-

{article.article_game_content.zip_url}

- {article.article_comments.map((ac) => { - <> -

{ac.rate}

- {ac.created_at} - {ac.updated_at} -

{ac.body}

- ; - })} - - ) : ( - "401 Unauthorized" - )} - - ); -} - -// https://reffect.co.jp/react/next-js -export async function getServerSidePaths() { - const paths = await getAllPaths(); - return { - paths, - fallback: "blocking", - }; -} - -export async function getServerSideProps({ params: { id } }) { - return { - props: { - id, - }, - }; -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2775c30..398f0cf 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,81 +1,162 @@ -import { useState } from "react"; -import { invoke } from "@tauri-apps/api/tauri"; +import { useEffect, useState } from "react"; +// import { invoke } from "@tauri-apps/api/tauri"; import Image from "next/image"; -import reactLogo from "../assets/react.svg"; import tauriLogo from "../assets/tauri.svg"; import nextLogo from "../assets/next.svg"; +// https://react-icons.github.io/react-icons/icons?name=fa +import { + FaCloudUploadAlt, + FaHome, + FaTv, + FaHeadphones, + FaPaintBrush, + FaUnity, + FaList, +} from "react-icons/fa"; +import { Article } from "../domain/models"; +import { isNullOrUndefined } from "../utils/utils"; +import { getArticles } from "../repository/fly/fly"; export default function App() { - const [greetMsg, setGreetMsg] = useState(""); - const [name, setName] = useState(""); - - async function greet() { - setGreetMsg(await invoke("greet", { name })); - } - + // Game + const [articleDict, setArticleDict] = + useState>>(null); + const availTagsDict = { + games: { + jp: "ゲーム", + icon: , + }, + music: { + jp: "音楽", + icon: , + }, + illusts: { + jp: "イラスト", + icon: , + }, + others: { + jp: "その他", + icon: , + }, + }; + useEffect( + () => { + try { + getArticles().then((as: Map) => { + let ad = new Map>(); + for (let key in availTagsDict) { + ad[key] = new Map(); + } + for (const id in as) { + const a: Article = as[id]; + let key = "others"; + for (const t in a.article_tags) { + if (Object.keys(availTagsDict).includes(t)) { + key = t; + break; + } + } + console.log("key:", key); + console.log("id:", id); + console.log("ad[key]:", ad[key]); + console.log("ad[key][id]:", ad[key][id]); + ad[key][id] = a; + } + setArticleDict(ad); + }); + } catch (e) { + console.log("failed to run getArticles", e); + } + }, + // マウント時のみ useEffect する + [] + ); return ( - <> -
-

Welcome to Tauri!

- -
- - - Next logo - - - - - Tauri logo - +
+ {/* */} +
+
+ {/* +
*/} -

- Click on the Tauri, Next, and React logos to learn more about each - framework. -

- -
-
- setName(e.currentTarget.value)} - placeholder="Enter a name..." - /> - -
+ {isNullOrUndefined(articleDict) + ? "Loading..." + : Object.keys(availTagsDict).map((t) => { + return ( + + ); + })}
+
-

{greetMsg}

+
+
+ {isNullOrUndefined(articleDict) + ? "Loading..." + : Object.keys(availTagsDict).map((t: string) => { + return ( +
+

{availTagsDict[t].jp}

+
+ {Object.values(articleDict[t]).map((a: Article) => { + return ( + + ); + })} +
+
+ ); + })} +
- +
); } diff --git a/src/pages/post.tsx b/src/pages/post.tsx index c41e650..6827f74 100644 --- a/src/pages/post.tsx +++ b/src/pages/post.tsx @@ -1,10 +1,7 @@ // import { useState } from "react"; // import { invoke } from "@tauri-apps/api/tauri"; import { getClient, Body, ResponseType } from "@tauri-apps/api/http"; -import Image from "next/image"; -import reactLogo from "../assets/react.svg"; -import tauriLogo from "../assets/tauri.svg"; -import nextLogo from "../assets/next.svg"; +// import Image from "next/image"; function App() { async function post() { @@ -40,50 +37,13 @@ function App() { console.log("res:", res); } return ( -
-
- - - Next logo - - - - - Tauri logo - - - - - React logo - - + <> +
+
-
-
- -
-
-
+ ); } diff --git a/src/repository/fly/fly.ts b/src/repository/fly/fly.ts index 0fc0687..133f11e 100644 --- a/src/repository/fly/fly.ts +++ b/src/repository/fly/fly.ts @@ -75,7 +75,7 @@ export async function getArticles() { // }, // ], // ]); - // console.log("(getArticles) articles:", articles); + console.log("(getArticles) articles:", articles); return articles; } diff --git a/src/style.css b/src/style.css deleted file mode 100644 index c78a24e..0000000 --- a/src/style.css +++ /dev/null @@ -1,106 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -:root { - font-family: Inter, Avenir, Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 400; - - color: #0f0f0f; - background-color: #f6f6f6; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -/* .container { - margin: 0; - padding-top: 10vh; - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: 0.75s; -} - -.logo.tauri:hover { - filter: drop-shadow(0 0 2em #24c8db); -} - -.row { - display: flex; - justify-content: center; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} - -a:hover { - color: #535bf2; -} - -h1 { - text-align: center; -} - -input, -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - color: #0f0f0f; - background-color: #ffffff; - transition: border-color 0.25s; - box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); -} - -button { - cursor: pointer; -} - -button:hover { - border-color: #396cd8; -} - -input, -button { - outline: none; -} - -#greet-input { - margin-right: 5px; -} - -@media (prefers-color-scheme: dark) { - :root { - color: #f6f6f6; - background-color: #2f2f2f; - } - - a:hover { - color: #24c8db; - } - - input, - button { - color: #ffffff; - background-color: #0f0f0f98; - } -} */ diff --git a/tailwind.config.js b/tailwind.config.js deleted file mode 100644 index 3faeb1b..0000000 --- a/tailwind.config.js +++ /dev/null @@ -1,8 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: ["./src/**/*.tsx"], - theme: { - extend: {}, - }, - plugins: [], -};